这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
闲得无聊,弄了个抖动效果,大家看看有没有值得学习地方
在线演示:
[Ctrl+A 全选 注: 如需引入外部 Js 需刷新才能执行]
- <html>
- <head>
- <title>
- 鼠标移至图片后抖动的JS代码
- </title>
- </head>
- <body>
- <style>
- .shakeimage{position:relative; left:100px; top:100px;}
- </style>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_8/1490187022_4530.gif"
- onmouseover="shake(this,'onmouseout')" data-src="">
- <script language="JavaScript1.2">
- var typ = ["marginTop", "marginLeft"],
- rangeN = 10,
- timeout = 20;
- function shake(o, end) {
- var range = Math.floor(Math.random() * rangeN);
- var typN = Math.floor(Math.random() * typ.length);
- o["style"][typ[typN]] = "" + range + "px";
- var shakeTimer = setTimeout(function() {
- shake(o, end)
- },
- timeout);
- o[end] = function() {
- clearTimeout(shakeTimer)
- };
- }
- </script>
- </body>
- </html>
创意之处:
调用简单:事件 ="shake(this,'onmouseout')";
代码简短:函数主体程序仅仅 5 行代码
性能高
逻辑清晰,便于二次开发
来源: http://www.phperz.com/article/17/0629/282260.html