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 相关文章推荐
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
May 02 Javascript
jquery插件推荐 jquery.cookie
Nov 09 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
Dec 15 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
微信小程序页面开发注意事项整理
May 18 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 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
php !function_exists(&quot;T7FC56270E7A70FA81A5935B72EACBE29&quot;))代码解密
2011/01/07 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
js实时监听文本框状态的方法
2011/04/26 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
基于JavaScript代码实现微信扫一扫下载APP
2015/12/30 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
python数据结构之二叉树的统计与转换实例
2014/04/29 Python
Python内置数据类型详解
2014/08/18 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
python版DDOS攻击脚本
2019/06/12 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
django-crontab 定时执行任务方法的实现
2019/09/06 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
python异步Web框架sanic的实现
2020/04/27 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
html5的新增的标签和废除的标签简要概述
2013/02/20 HTML / CSS
幼儿园数学教学反思
2014/02/02 职场文书
庆祝三八妇女节标语
2014/10/09 职场文书
2014年保卫工作总结
2014/12/05 职场文书
简历自荐信范文
2015/03/09 职场文书