js动画--透明度变化
2016-01-08 16:04
211 查看
对于设置元素的透明度的变化。主要思想也是通过一个定时器来控制的。
此外对于透明度有一点要说明一下,就是在IE中我们在css中设置透明度的方式filter:alpha(opacity:value)其中value值从0~100;
在火狐中透明度可以通过opacity:value来设置,其中value=0~1.
代码如下:
html
css
js
此外对于透明度有一点要说明一下,就是在IE中我们在css中设置透明度的方式filter:alpha(opacity:value)其中value值从0~100;
在火狐中透明度可以通过opacity:value来设置,其中value=0~1.
代码如下:
html
<!DOCTYPE html> <html> <head> <title>js动画事件</title> <link href="move.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="move.js"></script> </head> <body> <div id="div1"> </div> </body> </html>
css
*{ margin:0px; padding:0px; } #div1{ width:200px; height:200px; background-color:red; border:1px solid #eeddcc; opacity:0.3; filter:alpha(opacity:30); }
js
var timer window.onload=function(){ var div1=document.getElementById("div1"); div1.onmouseover=function(){ startchange(100); }; div1.onmouseout=function(){ startchange(30); }; } var alpha=30; function startchange(value){ var div1=document.getElementById("div1"); clearInterval(timer); var speed=0; if(value>alpha){ speed=10; }else if(value<alpha){ speed=-10; } timer=setInterval(function(){ if(value==alpha){ clearInterval(timer); }else{ alpha+=speed; div1.style.filter='alpha(opacity:'+alpha+')';//这个地方的书写千万要注意了!!!,这是支持IE方式的 div1.style.opacity=alpha/100;//这里要除以100,将opacity的值降到0~1之间,这是支持火狐方式的。 } },50) }
相关文章推荐
- 利用JS 在网页上获取并显示当前日期 星期
- Maven导入Servlet和JSP jar包
- 阿里巴巴的fastJson
- 常用正则表达式
- 【项目经验】DataTable与JSON之间的转换
- javascript学习笔记一
- js实现对ajax请求面向对象的封装
- lazyload.js参数说明
- JS预览图像将本地图片显示到浏览器上
- jsp servlet js
- 上传控件图片直接在页面显示
- angular js里 当使用ng-repeat 时出现 $$hashKey的键值对
- Javascript关闭Chrome等所有浏览器的方法
- 谷歌浏览器开发调试工具中Sources面板 js调试等 完全介绍
- JavaScript基本概念(五)---语句和函数
- ajax Json 应用
- js 四舍五入
- 玩转Json
- co.js 学习,以及自己简单实现
- ionic项目中JavaScript与ble(低功耗蓝牙)设备传输数据