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实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 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 If Else(elsefi) 语句
2013/04/07 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
jquery 常用操作方法
2010/01/28 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
jQuery针对各类元素操作基础教程
2014/08/29 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
es6 filter() 数组过滤方法总结
2019/04/03 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
[01:07:41]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python with的用法
2014/08/22 Python
python读写ini配置文件方法实例分析
2015/06/30 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
Python中查看文件名和文件路径
2017/03/31 Python
python求质数的3种方法
2018/09/28 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
泰国时尚电商:POMELO Fashion
2020/03/11 全球购物
教育专业自荐书范文
2013/12/17 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
研究生个人学年总结
2015/02/14 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js