Javascript动画学习
2016-07-27 12:24
495 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Demo1</title> <script type="text/javascript"> window.onload=function(){ var oDiv = document.getElementById('div1'); oDiv.onmouseover = function(){ startMove(0); } oDiv.onmouseout = function(){ startMove(-200) } } var timer1; var alpha = 30; function startMove(target){ clearInterval(timer1); timer1 = setInterval(function(){ var speed = 0; var colorful = 5; var oDiv = document.getElementById("div1"); if(oDiv.offsetLeft > target){ speed = -10; } else if(oDiv.offsetLeft < target){ speed = 10; } else{ clearInterval(timer1); } oDiv.style.left = oDiv.offsetLeft + speed +'px'; oDiv.style.filter = 'alpha(opacity:'+ colorful +')'; oDiv.style.opacity = colorful/100; },30) } </script> <style type="text/css"> body,div,span{ margin: 0; padding: 0; } #div1{ width: 200px; height: 200px; background: red; position: relative; left: -200px; top: 0; filter:alpha(opacity:30); opacity: 0.3; } #div1 span{ width: 20px; height: 50px; background: blue; position: absolute; left: 200px; top: 75px; } </style> </head> <body> <div id="div1"> <span id="share">分享</span> </div> </body> </html>透明度IE为
filter:alpha(opacity:30);
火狐和Chrome为
<pre name="code" class="html">opacity: 0.3;
相关文章推荐
- 客户端JavaScript-如何执行
- Arcgis api for JavaScript 跨域配置(在线编辑问题)
- 你真的了解JavaScript中的局部变量和全局变量吗?
- Ajax(2)--data format
- js实现textarea高度根据内容自适应
- JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
- JavaScript事件委托的技术原理
- js实现textarea高度根据内容自适应
- js实现继承
- JS加密
- 关于JSON字符串的处理与总结 【原创】
- 淘宝一面 关于JavaScript中的事件代理(例子:ul中无数的li上添加点击事件)
- 获取JS中网页各种高宽与位置的方法总结
- 身份证正则验证Js
- 单个字符串转Json格式
- js中的继承
- 在线javascript调试方法
- 公共事件处理函数js库
- JS跨域(ajax跨域、iframe跨域)解决方法及原理详解(jsonp)
- 零散的JavaScript公用方法