简单的JS多物体的运动---运动和透明度的变化
2014-05-28 21:56
519 查看
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;} #div2 {width: 30px; height: 60px; background: black; position: absolute; right: -30px; top: 70px; color: white; text-align: center;} #img1 { opacity: 0.3; miaov: 妙味; filter: alpha(opacity=30); margin-left: 200px;} </style> <script> window.onload = function() { var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var oImg = document.getElementById('img1'); //var iTimer = null; oDiv1.onmouseover = function() { startMove(this, 'left', 0, 10); } oDiv1.onmouseout = function() { startMove(this, 'left', -100, -10); } oImg.onmouseover = function() { startMove(this, 'opacity', 100, 10); } oImg.onmouseout = function() { startMove(this, 'opacity', 30, -10); } function startMove(obj, attr, iTarget, iSpeed) { clearInterval(obj.iTimer); var iCur = 0; obj.iTimer = setInterval(function() { if (attr == 'opacity') { iCur = Math.round(css( obj, 'opacity' ) * 100); } else { iCur = parseInt(css(obj, attr)); } if (iCur == iTarget) { clearInterval(obj.iTimer); } else { if (attr == 'opacity') { obj.style.opacity = (iCur + iSpeed) / 100; obj.style.filter = 'alpha(opacity='+ (iCur + iSpeed) +')'; } else { obj.style[attr] = iCur + iSpeed + 'px'; } } }, 30); } function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } } } </script> </head> <body> <div id="div1"> <div id="div2">分享到</div> </div> <img src="1.jpg" id="img1" /> </body> </html>
相关文章推荐
- Js运动动画系列5--多物体运动-透明度
- JS实现简单的多物体运动动画
- 物体任意值运动框架(包括透明度)move.js
- js改变宽高字体大小透明度多物体模块运动
- 学习js运动多个物体宽度变化笔记
- js运动技术--多物体运动框架(变宽、变高、改变字体、改变border、透明度)以及替换offset的使用
- js笔记---(运动)通用的move方法,兼容透明度变化
- 学习JS运动透明度变化笔记
- js运动-改变透明度(单物体)
- js改变宽高字体大小透明度多物体模块运动
- js多物体运动框架
- (42)JS运动之多物体框架--多个div变宽
- js多个物体运动的问题1
- js实现多物体运动框架并兼容各浏览器
- js多物体任意值运动
- 点滴积累【JS】---JS小功能(JS实现多物体缓冲运动)
- JS实现多物体width缓冲运动实例
- Unity3D入门 :简单的物体运动
- [js]多个物体的运动
- 通过alpha变量实现图片透明度渐变(仍然用到JS缓冲运动框架)