当前位置:首页 > 网页特效 > 窗口特效 >

js模拟QQ聊天窗口抖动特效(图片抖动代码)

时间:2014-03-09 22:41 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
  • 图片抖动代码,基于jquery插件实现的一款网页特效,当鼠标点击图片后,图片开始猛烈抖动,有点像震动的感觉,仿QQ聊天窗口抖动特效,拉动快慢是可以调节的,在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>
    <title>仿QQ窗口抖动代码</title>
    <style>
    * {margin:0px; padding:0px;}
    #box {width:400px; height:436px; margin:50px auto;}
    </style>
    <script type="text/javascript">
    function convertStyle(obj)
    {
    if(obj.length)
    {
    for (var i=0; i<obj.length; i++)
    {
    obj[i].style.left=obj[i].offsetLeft+'px';
    obj[i].style.top=obj[i].offsetTop+'px';
    }
    for (var i=0; i<obj.length; i++)
    {
    obj[i].style.position='absolute';
    obj[i].style.margin=0;
    }
    }
    else
    {
    obj.style.left=obj.offsetLeft+'px';
    obj.style.top=obj.offsetTop+'px';
    obj.style.position='absolute';
    obj.style.margin=0;
    }
    }
    function shake(obj)
    {
    var posData=[obj.offsetLeft,obj.offsetTop];
    obj.onclick=function()
    {
    var i=0;
    clearInterval(timer);
    var timer=setInterval(function()
    {
    i++;
    obj.style.left=posData[0]+((i%2)>0?-2:2)+'px';
    obj.style.top=posData[1]+((i%2)>0?-2:2)+'px';
    if(i>=30)
    {
    clearInterval(timer);
    obj.style.left=posData[0]+'px';
    obj.style.top=posData[1]+'px';
    }
    }, 30);
    }
    }
    window.onload=function()
    {
    var oBox=document.getElementById('box');
    convertStyle(oBox);
    shake(oBox);
    }
    </script>
    </head>
    <body>
    <!-- 抖动代码 开始 -->
    <div id='box'><img src="/jscss/demoimg/201402/doudong.png" width='400' /></div>
    <!-- 抖动代码 结束 -->
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div style="text-align:center;margin:50px 0">
    <div style="text-align:center;clear:both">
    <p>兼容全系列的浏览器:IE8、360、FireFox、世界之窗、Chrome、傲游、Safari、Opera等. </p><br>
    </div>
    <p style="margin:20px 0"></p>
    </div>
    </body>
    </html>

由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-chuangkou/6598.html

窗口特效下载排行

最新文章