JS实现仿QQ聊天窗口抖动特效


Posted in Javascript onMay 10, 2015

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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
js prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
js中回调函数的学习笔记
Jul 31 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
JavaScript通过Date-Mask将日期转换成字符串的方法
Jun 04 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
详解express与koa中间件模式对比
Aug 07 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 #Javascript
深入浅出分析javaScript中this用法
May 09 #Javascript
深入浅出理解javaScript原型链
May 09 #Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
May 09 #Javascript
JS动画效果打开、关闭层的实现方法
May 09 #Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 #Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 #Javascript
You might like
PHP中对数据库操作的封装
2006/10/09 PHP
Zend Framework教程之MVC框架的Controller用法分析
2016/03/07 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
基于php编程规范(详解)
2017/08/17 PHP
如何实现JS函数的重载
2006/09/22 Javascript
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
用JavaScript调用WebService的示例
2008/04/07 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
JavaScript将一个数组插入到另一个数组的方法
2015/03/19 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
AngularJS入门教程之AngularJS 模板
2016/08/18 Javascript
loading动画特效小结
2017/01/22 Javascript
JavaScript实现星星等级评价功能
2017/03/22 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
python类继承与子类实例初始化用法分析
2015/04/17 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
Django admin model 汉化显示文字的实现方法
2019/08/12 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
python爬取天气数据的实例详解
2020/11/20 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
用HTML5制作视频拼图的教程
2015/05/13 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
满月酒主持词
2014/03/27 职场文书
企业授权委托书范本
2014/04/02 职场文书
本科毕业生自荐信
2014/06/02 职场文书
《改造我们的学习》心得体会
2014/11/07 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
停电放假通知
2015/04/14 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python