博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
淡入淡出js
阅读量:7102 次
发布时间:2019-06-28

本文共 1278 字,大约阅读时间需要 4 分钟。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#img1 {filter:alpha(opacity:30); opacity:0.3;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="application/javascript">
window.οnlοad=function()
{
var oImg=document.getElementById('img1');
oImg.οnmοuseοver=function(){
startMove(100);
};
oImg.οnmοuseοut=function(){
startMove(30);
};
};
var timer=null;
var alpha=30;//透明度的初始值
function startMove(iTarget)
{
var oImg=document.getElementById('img1');
clearInterval(timer);//第二次点击速度会叠加,因此在第二次点击之前关闭定时器
timer=setInterval(function()
{
var iSpeed=0;
if(alpha<iTarget)
{
iSpeed=1;
}else
{
iSpeed=-1;
}
if(alpha==iTarget)//这样写是因为定时器清了,仅仅是下次不再执行,但这此还是会执行.iTarget范围在0-255之间
{
clearInterval(timer);
}else{
alpha+=iSpeed;
oImg.style.filter='alpha(opacity:'+alpha+')';//设置IE的透明度
oImg.style.opacity=alpha/100;//设置其他浏览器的透明度,透明度是小数
//document.title=alpha;
}
},30);
};
</script>
</head>

<body>

<img id="img1" src="Desert.jpg" />
</body>
</html>

补充:

CSS设置 IE使用滤镜filter的alpha属性,其他浏览器直接使用opacity属性设置透明度;

IE:filter:alpha(opacity:30);

firefox:  opacity(0.3);

转载于:https://www.cnblogs.com/person008/p/js.html

你可能感兴趣的文章
理解闭包 js回收机制
查看>>
par函数pch参数-控制点的形状
查看>>
MySQL具体解释(8)----------MySQL线程池总结(二)
查看>>
chrome 谷歌浏览器插件损坏
查看>>
前端知识十分钟预览之学习札记
查看>>
ArcGIS API for Silverlight 当DataGrid选中项时,地图聚焦弹出窗口,并可以播放音频文件...
查看>>
JavaWeb学习总结(十三)——使用Session防止表单重复提交
查看>>
C# Qrcode生成二维码支持中文,带图片,带文字 2015-01-22 15:11 617人阅读 评论(1...
查看>>
BWA MEM算法
查看>>
jni
查看>>
openstack neutron中涉及的网络设备
查看>>
LoadRunner
查看>>
CCNet持续集成编译中SVN问题解决
查看>>
nginx 的uri、request_uri 区别
查看>>
多线程与异步的区别
查看>>
cocos2d-X JS 获取cocostudio中的UI组件
查看>>
我记录网站综合系统 -- 技术原理解析[1:我记录的整体框架的简介](转)
查看>>
Jmeter 2.3.4 报表参数意义
查看>>
Linux命令vi/vim
查看>>
短信API在最土团购开源程序中的运用
查看>>