js中的运动
2016-06-14 15:37
183 查看
缓慢隐藏与出现
效果:
鼠标移至分享上黄色区域自动向左隐藏。<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div{ background-color: yellow; height: 200px; width: 150px; position: absolute; top:50px; left: -150px; } span{ background-color: red; position: absolute; top:80px; left: 150px; } </style> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementsByTagName('div')[0]; oDiv.onmouseout = function(){ startMove(-150); } oDiv.onmouseover = function(){ startMove(0); } } var timer = null; function startMove(target){ var oDiv = document.getElementsByTagName('div')[0]; var speed = 10; if(oDiv.offsetLeft>target) speed = -10; //防止定时器被多次调用 clearInterval(timer); timer = setInterval(function(){ if(oDiv.offsetLeft != target){ oDiv.style.left = oDiv.offsetLeft+speed+'px'; } else clearInterval(timer); }, 30); } </script> </head> <body> <div><span>分享</span></div> </body> </html>
使用绝对定位,通过获取offsetLeft(相对于浏览器左边框的距离)的值和left来确定黄色区域的位置
图像透明度渐变效果
当鼠标移入图像时颜色变亮,移除时颜色变暗<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div{ background-color: yellow; height: 200px; width: 150px; filter:alpha(opacity:30); opacity: 0.3; } </style> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementsByTagName('div')[0]; oDiv.onmouseout = function(){ startMove(30); } oDiv.onmouseover = function(){ startMove(100); } } var timer = null; var alpha = 30; function startMove(target){ var oDiv = document.getElementsByTagName('div')[0]; var speed = 10; //防止定时器被多次调用 if(alpha > target) speed = -10; clearInterval(timer); timer = setInterval(function(){ if(alpha != target){ alpha += speed; oDiv.style.filter = "alpha(opacity:"+alpha+")"; oDiv.style.opacity = alpha/100; } else clearInterval(timer); }, 30); } </script> </head> <body> <div></div> </body> </html>
相关文章推荐
- javaScript动态创建数组、动态赋值json数据方法之一(持续补充)
- JS对cookie的读取、修改、删除
- js中属性和方法的类型和区别
- js控制只允许输入数字
- JavaScript函数中关于valueOf和toString的理解
- jstack和线程dump分析
- 随想(三) -- 如何给基于Javascript的rich editor添加协同功能
- JavaScript基础总结三部曲之一
- 巧方法 JavaScript获取超链接的绝对URL地址
- 使用js获取地址栏参数的方法推荐(超级简单)
- 使用javascriptcore实现oc与js的交互
- javascript浅谈闭包
- 返回函数的JavaScript函数
- CANVAS实现图片模糊(处理库StackBlur.js)
- Best Practices for Spies, Stubs and Mocks in Sinon.js
- JS签名插件JSignature使用
- javascript面向对象编程
- js数组的五种迭代方法及两种归并方法(推荐)
- XSS调用外部JS
- 图解Javascript原型链