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 相关文章推荐
javascript replace方法与正则表达式
Feb 19 Javascript
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
微信小程序 navigation API实例详解
Oct 02 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
javascript 跨域问题以及解决办法
Jul 17 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
echarts饼图各个板块之间的空隙如何实现
Dec 01 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 Javascript
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
SSI指令
2006/11/25 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
百度地图JavascriptApi Marker平滑移动及车头指向行径方向
2017/03/13 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
vue如何通过id从列表页跳转到对应的详情页
2018/05/01 Javascript
从vue源码解析Vue.set()和this.$set()
2018/08/30 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
Python实现连接两个无规则列表后删除重复元素并升序排序的方法
2018/02/05 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
python判断输入日期为第几天的实例
2018/11/13 Python
Pandas透视表(pivot_table)详解
2019/07/22 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
什么是封装
2013/03/26 面试题
肯尼迪就职演说稿
2013/12/31 职场文书
商场消防管理制度
2014/01/12 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
三年级评语大全
2014/04/23 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书