本文给大家分享的是类似 QQ 窗口的抖动效果, 只是觉得好玩,没什么技术含量,推荐给大家,有需要的小伙伴可以参考下。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
JS 实现仿 QQ 聊天窗口抖动特效
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>
- JavaScript层抖动效果
- </title>
- <style type="text/CSS">
- #body{text-align:center;} #test{width:200px;position:absolute;margin:10px
- auto;height:100px;border:2px dotted red;text-align:center}
- </style>
- </head>
- <body>
- <div style="margin:10px 200px">
- <div>
- <input type="button" value="~点这里让我抖抖吧~" onclick="nn.start()" />
- </div>
- <div>
- <input type="button" value="晃晕了,我不抖了!" onclick="nn.stop()" />
- </div>
- <div id="test">
- <br>
- <img border="0" src="smiley.gif">
- </div>
- </div>
- <p>
- </p>
- <p>
- </p>
- </body>
- </html>
- <script type="text/javascript">
- var m = document.getElementById("test");
- function SKclass(obj, Rate, speed) {
- var oL = obj.offsetLeft;
- var oT = obj.offsetTop;
- this.stop = null;
- this.oTime = null;
- var om = this;
- this.start = function() {
- if (parseInt(obj.style.left) == oL - 2) {
- obj.style.top = oT + 2 + "px";
- setTimeout(function() {
- obj.style.left = oL + 2 + "px"
- },
- Rate)
- } else {
- obj.style.top = oT - 2 + "px";
- setTimeout(function() {
- obj.style.left = oL - 2 + "px"
- },
- Rate)
- }
- this.oTime = setTimeout(function() {
- om.start()
- },
- speed);
- }
- this.stop = function() {
- clearTimeout(this.oTime);
- }
- }
- var nn = new SKclass(m, 20, 70);
- </script>
- </body>
- </html>
再来一个更简单的
- <img id="win" style='position:relative' src="/UploadPic/2008-9/2008962512241.jpg">
- <br />
- <br />
- <button onclick="zd()">
- 振动
- </button>
- <script>
- function zd(u) {
- var a = ['top', 'left'],
- b = 0;
- u = setInterval(function() {
- document.getElementById('win').style[a[b % 2]] = (b++) % 4 < 2 ? 0 : 4;
- if (b > 15) {
- clearInterval(u);
- b = 0
- }
- },
- 32)
- }
- </script>
来源: http://www.phperz.com/article/17/0222/271417.html