鼠标移上去透明度渐渐增加，鼠标移出，透明度渐渐减小。

关键代码：

1 var speed = 0;
2 if(target>obj.alpha){
3     speed = 5;
4 }else{
5     speed = -5;
6 }

根据目标值和当时值的对比，来决定是正向还是负向速度。

01 for(i=0; i < runs_li.length; i++){
02     runs_li[i].timer = null;
03     runs_li[i].alpha = 30;
04     runs_li[i].onmouseover = function(){
05         startrun(this,100);
06     }
07     runs_li[i].onmouseout = function(){
08         startrun(this,30);
09     }
10 }

给每一个元素加上各自的透明度值，各自的透明度变化分开。

全部代码：

01 <style>
02 #runs{width:300px; margin:10px auto;}
03 #runs li{width:80px; height:80px; background:#06c; list-style:none; float:left; margin:10px; display:inline; filter:alpha(opacity=30); opacity:0.3;}
04 </style>
05 <script>
06 window.onload = function(){
07   var runs = document.getElementById("runs");
08   var runs_li = runs.getElementsByTagName("li");
09   var i=0;
10   for(i=0; i<runs_li.length; i++){
11     runs_li[i].timer = null;
12     runs_li[i].alpha = 30;
13     runs_li[i].onmouseover = function(){
14       startrun(this,100);
15     }
16     runs_li[i].onmouseout = function(){
17       startrun(this,30);
18     }
19   }
20 }
21  
22 function startrun(obj,target){
23   clearInterval(obj.timer);
24   obj.timer = setInterval(function(){
25     var speed = 0;
26     if(target>obj.alpha){
27       speed = 5;
28     }else{
29       speed = -5;
30     }
31    
32     if(obj.alpha == target){
33       clearInterval(obj.timer);
34     }else{
35       obj.alpha = obj.alpha + speed;
36       obj.style.filter = "alpha(opacity="+obj.alpha+")";
37       obj.style.opacity = obj.alpha/100;
38     }
39  
40   },30)
41 }
42  
43 </script>
44  
45 <ul id="runs">
46   <li>简</li>
47   <li>明</li>
48   <li>现</li>
49   <li>代</li>
50   <li>魔</li>
51   <li>法</li>
52 </ul>

最新文章

  1. js_跨域
  2. Httpd运维日志:通过apxs添加模块
  3. property attribute: assign, strong, weak, unsafe_unretain and copy
  4. Java日志系统框架的设计与实现
  5. mysql - 行号
  6. Android（java）学习笔记89：泛型概述和基本使用
  7. linux 添加用户
  8. 27个Jupyter快捷键、技巧(原英文版)
  9. MySQL 关闭子表的外键约束检察
  10. Scrapy爬虫框架（实战篇）【Scrapy框架对接Splash抓取javaScript动态渲染页面】
  11. 软件开发：网站＆视频&amp;书籍&amp;文章推荐（不断更新）
  12. Kubernetes---Pod控制器
  13. 【问题解决方案】本地代码文件上传到GitHub里中文乱码问题
  14. build tool 的简单认知
  15. SG函数值
  16. caffe-windows环境配置（github上官方BVLC/caffe的推荐配置方法详解）
  17. oracle数据库分组之后取最大或者最小值
  18. 【转】vue项目打包部署——nginx代理访问
  19. cmake介绍
  20. python day03--字符串

热门文章

  1. Scala语法（三）
  2. Python基本图形绘制
  3. python查询mysql数据
  4. Python学习之模块基础
  5. SAP ABAP Development Tools in Eclipseのセットアップ
  6. 【转】Python 数据库连接池
  7. IOException: win32 io returned 267. Path:
  8. Vue学习（一）：Vue实例
  9. Linux-Ps命令使用
  10. QC的使用学习（一）