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

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>

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

赞 (0)

相关推荐

  • 纯js实现仿QQ邮箱弹出确认框

    代码非常简单,这里就不多废话了. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML> <HEAD> <TITLE>QQ邮箱的弹出层</TITLE> <meta http-equiv="Co

  • 基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解

    调用方式 :ImageView(index,imgData)  --index参数 为图片默认显示的索引值,类型 为Number  --imaData参数 为图片url数组 ,类型为Array 使用之前要先引入 zepto.js 文件 ImageView.js具体代码如下: 复制代码 代码如下: /*  * ImageView v1.0.0  * --基于zepto.js的大图查看  * --调用方法 ImageView(index,imgDada)  * --index 图片默认值显示索引,N

  • js实现带缓冲效果的仿QQ面板折叠菜单代码

    js实现带缓冲效果的仿QQ面板折叠菜单代码

    本文实例讲述了js实现带缓冲效果的仿QQ面板折叠菜单代码.分享给大家供大家参考.具体如下: 带缓冲效果的仿QQ面板折叠菜单代码,使用方法:调用效果: Effect(1,2); 其中1为: 被改变对象的id 其中2为: 控制容器的id 可在使用: this.parentNode.id 取得(父标签的id) 注意给对象ID的时候一定不要重复. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-buffer-style-qq-menu-codes

  • js实现仿qq消息的弹出窗效果

    js实现仿qq消息的弹出窗效果

    在我们的日常开发中,或者生活中,经常需要用到弹出窗.这里我们就用js模拟一下qq消息一样的弹出窗,分享给大家供大家参考,具体内容如下 运行效果截图: 直接贴代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>javaScript实现网页右下角弹出窗口代码</title> &l

  • js设置控件的隐藏与显示的两种方法

    用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的"display"和"visibility"属性. 当style.display="block"或style.visibility="visible"时控件或见,当style.display="none"或style.visibility="hidden"时控件不可见.不同的是"display"

  • JS实现的仿QQ空间图片弹出效果代码

    本文实例讲述了JS实现的仿QQ空间图片弹出效果代码.分享给大家供大家参考,具体如下: <script type="text/javascript"> function imageShow(which_click) { var image_path = which_click; //alert(image_path); var tag_top = Math.max(document.documentElement.scrollTop, document.body.scroll

  • JS实现的模仿QQ头像资料卡显示与隐藏效果

    JS实现的模仿QQ头像资料卡显示与隐藏效果

    本文实例讲述了JS实现的模仿QQ头像资料卡显示与隐藏效果.分享给大家供大家参考,具体如下: 我们使用QQ时经常需要查看朋友的资料卡,当我们把鼠标移入头像时,资料卡显示,并且鼠标能在头像与资料卡之间能随意移动,当鼠标移出头像或资料卡时,资料卡延时隐藏. 实质就是延时提示框问题! 首先写好布局: <style> div { float:left; margin:5px; } .head { width:50px;height:50px;background-color:pink; } .info

  • javascript 控制 html元素 显示/隐藏实现代码

    1.编写js函数 <script type="text/javascript"> function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";} function $(s){return document.getElementById(s);} </script> 2. 要显示/隐藏的html元素加上 id

  • js菜单点击显示或隐藏效果的简单实例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • 原生JS仿QQ阅读点击展开、收起效果

    原生JS仿QQ阅读点击展开、收起效果

    使用JS技术实现QQ阅读类似的点击展开.收起效果,具体内容如下 一.定义展开函数showdiv(),实现点击"全文"按钮,全文展开. 1.点击展开函数,需要将触发点击事件的按钮作为参数传入 2.通过传入的按钮,查找其父元素,将其父元素设置为隐藏. 3.将紧跟其父元素之后的元素设置为显示. 二.定义收起函数hidediv(),实现点击"收起全文"按钮,全文内容隐藏. 1.点击收起函数,需要将触发点击事件的按钮作为参数传入 2.通过传入的按钮,查找其父元素,将其父元素设

  • javascript仿qq界面的折叠菜单实现代码

    最近一直在研究网页特效,看到qq界面的折叠菜单,于是冒出个想法,自己写一个类似的,上网查了一下,发现已经有不少类似的菜单效果,不管那么多,先写着再说吧. 以下是html结构: <div id="a"><div id="h1">sdfds</div><div id="b1">dsfdsfsdfsd</div><div id="h2">dsf</div&

  • JS实现仿QQ面板的手风琴效果折叠菜单代码

    JS实现仿QQ面板的手风琴效果折叠菜单代码

    本文实例讲述了JS实现仿QQ面板的手风琴效果折叠菜单代码.分享给大家供大家参考.具体如下: 这是一款简单实用的垂直导航菜单,有人把这种风格称为"手风琴"菜单,类似仿QQ面板的折叠菜单,鼠标放在任意一个菜单上,它会展开所属的二级菜单,很不错的选择,以前就分享过此类菜单,这次经过了代码优化升级,更人性化了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-qq-sfq-style-menu-codes/ 具体代码如下: <!

  • JS实现超简单的仿QQ折叠菜单效果

    JS实现超简单的仿QQ折叠菜单效果

    本文实例讲述了JS实现超简单的仿QQ折叠菜单效果.分享给大家供大家参考.具体如下: 这是一款经过精简后的仿QQ折叠菜单代码,以前发过的,不过这个是经过几轮代码精简后的一个版本,而且在各浏览器下的表现也很不错,兼容性没出问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-f-qq-zd-style-menu-codes/ 具体代码如下: <!DOCTYPE html> <html xmlns="http:/

随机推荐