js 淡入淡出的图片

最新推荐文章于 2022-01-20 18:30:13 发布

weixin_30335353

最新推荐文章于 2022-01-20 18:30:13 发布

阅读量37

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/txxt/p/5785387.html

版权

js 淡入淡出的图片

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js淡入淡出的图片</title>
<style>
#img{display:block;margin:0 auto; opacity:0.3; filter:alpha(opacity=30); width:200px; height:300px;}
</style>
<script>
window.onload=function(){
var oImg=document.getElementById('img');
var iTimer=0;
oImg.onmouseover=function(){
   startMove(this,100,10);    
}
oImg.onmouseout=function(){
   startMove(this,30,-10);    
}
function startMove(obj, iTarget, iSpeed) {
        clearInterval(iTimer);
        var iCur=0;
        iTimer = setInterval(function() {
            iCur=Math.round(css(obj,'opacity')*100);   
            if (iCur == iTarget) {
                clearInterval(iTimer);
            } else {
                obj.style.opacity=(iCur+iSpeed)/100;
                obj.style.filter='alpha(opacity='+(iCur+iSpeed)+')';   //加括号防止转换成字符串
            }
            
        }, 30);
    }

function css(obj,attr){       //获取元素的css任何属性
  if(obj.currentStyle){
      return obj.currentStyle[attr];
   }else{
     return getComputedStyle(obj,false)[attr];   
   }    
}}
</script>
</head>
<body>
<img src='cat.jpg' id='img'/>

</body>
</html>

posted on 2016-08-18 21:05 TXXT 阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/txxt/p/5785387.html

weixin_30335353

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 淡入淡出的图片

js 淡入淡出的图片 <!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.o...
复制链接

扫一扫