有关网页常见图片淡入淡出的效果的随笔

最新推荐文章于 2024-08-09 21:30:00 发布

weixin_30399871

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量119

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/slientLove/p/5877469.html

版权

网页常见的图片淡入淡出的效果还是比较常见的，在这里，我个人来分享一些自己的一些笔记。

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>淡入淡出图片效果图</title>
   <style type="text/css">
       #img1{ filter:alpha(opacity:30); opacity: 0.3; }　　　　　　　　/*    这里用两种方式表示透明度，主要是考虑浏览器兼容性问题   */
   </style>
   <script type="text/javascript">
       window.onload = function(){
           var oImg = document.getElementById("img1");
           var alpha = 30;               //用一个变量存储透明度，开始时图片本身的透明度也可以表示
           oImg.onmouseover = function(){
               startMove(100);           //鼠标移入时开启函数
           }
           oImg.onmouseout = function(){
               startMove(30);
           }
           function startMove(iTarget){
           var timer = null;
           clearInterval(timer);　　　　//在开启一个定时器之前，先关闭已经开起的定时器
           timer = setInterval(function(){
               var speed = 0;               //设置透明度变化的速度
               if(alpha<iTarget){
                   speed = 1;　　　　　　//透明度小于目标值，则将变化的速度设为正值
               }else{
                   speed = -1;
               }
               if(alpha==iTarget){
                   clearInterval(timer);       //如果达到目标透明度，则清除定时器,否则定时器不会消除，没有效果
               }else{
                   alpha+=speed;
                   oImg.style.filter = 'alpha(opacity:'+alpha+')';       //为了兼容IE浏览器
                   oImg.style.opacity = alpha/100;
                   document.title = alpha;       //主要是为了测试，在标题上显示透明度
               }
           },30);
           }
       };
   </script>
</head>
<body>
   <img id="img1" src="../img/9.jpg">
</body>
</html>

转载于:https://www.cnblogs.com/slientLove/p/5877469.html

weixin_30399871

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有关网页常见图片淡入淡出的效果的随笔

网页常见的图片淡入淡出的效果还是比较常见的，在这里，我个人来分享一些自己的一些笔记。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>淡入淡出图片效果图</title> <style type="text/css"> ...
复制链接

扫一扫