jQuery模拟窗口抖动效果

2024-12-23 21:19:35

效果图：

代码如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title>jQuery模拟窗口抖动</title>
 <style type="text/css">
  input{margin-top: 20px;}
  .center{margin-left: 50%;transform: translate(-50%);}
  .img{display:block;position:absolute;top:100px;}
 </style>
</head>
<body>
 <img src="http://mpic.tiankong.com/60b/994/60b994dc105a7b76b25e116733a142e9/431-0248.jpg" class="img center" />
 <input type="button" class="center" value="模拟窗口抖动" />
 <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.js" type="text/javascript"></script>
 <script type="text/javascript">
  $(":button").click(function () {
   var len = 4, //晃动的距离，单位像素
   c = 16, //晃动次数，4次一圈
   step = 0, //计数器
   img = $("img"),
   off = img.offset();
   this.step = 0;
   timer = setInterval(function () {
    var set = pos();
    img.offset({ top: off.top + set.y * len, left: off.left + set.x * len });
    if (step++ >= c) {
     img.offset({ top: off.top, left: off.left }); //抖动结束回归原位
     clearInterval(timer);

    }
    // console.log(step)
   }, 45);
  });
  function pos() {
   this.step = this.step ? this.step : 0;
   this.step = this.step == 4 ? 0 : this.step;
   var set = {
    0: { x: 0, y: -1 },
    1: { x: -1, y: 0 },
    2: { x: 0, y: 1 },
    3: { x: 1, y: 0 }
   }
   return set[this.step++];
  }
 </script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

jQuery插件jRumble实现网页元素抖动

jRumble,它能让网页上的任意元素抖动起来,在你的网站中使用这个效果会有很大的机率吸引用户的注意力.此插件的效果可以用在链接上,或者div上,你可以设置抖动的范围.XY坐标.抖动幅度等.可设置为当鼠标移动上去抖动或者默认一直抖动,插件可定制性还是蛮高的.PS:此插件在IE中还存在一些小问题 jQuery jRumble是使用方法 <script type="text/javascript" src="js/jquery-jrumble.js"><
Jquery右下角抖动、浮动实例代码(兼容ie6、FF)

复制代码代码如下: setTimeout("document.getElementById('qq_dd').style.display='block'; ",5000);// JavaScript Document$(function(){ if($.browser.msie&&$.browser.version=="6.0"&&$("html")[0].scrollHeight>$("h
jquery.messager.js插件导致页面抖动的解决方法

消息弹出时页面总是抖动或者闪一下,找了很长时间没有找到原因,今天找到,原来是html没有声明解析规范需要加上<!DOCTYPE> 标签复制代码代码如下: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
jQuery+css3实现文字跟随鼠标的上下抖动

css3过渡属性结合jq,如果直接复制代码运行,需要加载一个jquery文件 <!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
jQuery通过扩展实现抖动效果的方法

本文实例讲述了jQuery通过扩展实现抖动效果的方法.分享给大家供大家参考.具体实现方法如下: 1. JavaScript代码如下: 复制代码代码如下: jQuery.fn.shake = function(intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Time duration*/) { this.each(function() { var jqNode =
jquery果冻抖动效果实现方法

本文实例讲述了jquery果冻抖动效果实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码代码如下: <html> <head> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(function(){ $("
jQuery实现动态表单验证时文本框抖动效果完整实例

本文实例讲述了jQuery实现动态表单验证时文本框抖动效果.分享给大家供大家参考.具体如下: 这里使用jQuery实现的动态表单验证特效,当用户输入错误或没有输入的时候点击提交按钮,有问题的输入框会抖动几下,以提示用户此项有问题,文本框抖动功能都有意思,这个表单比较典型,想实现jquery Ajax表单功能的可以参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-table-txt-check-shake-style-codes
基于jquery的仿百度的鼠标移入图片抖动效果

1.查看源文件,在查看后很纳闷的发现,此页并没有包含那些奖品信息.这样就断定代码在另一个页面中.于是想当然的以为是用的框架连接的地址.结果没查到,却看到了一个这样的信息: 复制代码代码如下: <div id ="task-intro-box"></div> <div id ="task-awards"></div> <div id ="
jQuery实现网页抖动的菜单抖动效果

本文实例讲述了jQuery实现网页抖动的菜单抖动效果.分享给大家供大家参考.具体如下: 这里的jQuery抖动导航菜单效果,兼容IE7/8/9及其它主流浏览器,使用方法:先引入jQuery脚本库和jquery.shake.js文件,然后在需要的元素上调用shake( )方法,例如想使整个页面抖动,则这么写:$('body').shake( ),调用上述方法后,将鼠标移至指定的元素,该元素就会抖动. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3
jQuery模拟窗口抖动效果

效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery模拟窗口抖动</title> <style type="text/css"> input{margin-top: 20px;} .center{margin-left: 50%;transform: translate(-50%
jQuery模拟黑客帝国矩阵效果实例

本文实例讲述了jQuery模拟黑客帝国矩阵效果的方法.分享给大家供大家参考.具体实现方法如下: html部分如下: <div id="container"> <div style="width:10px; word-break :break-all"> 10001001110010010010000 </div> <div style="width:10px; word-break :break-all;margi
基于javascript实现窗口抖动效果

本文实例讲解了基于javascript实现窗口抖动效果的详细代码,分享给大家供大家参考,具体内容如下效果图: 鼠标点击,窗口实现抖动. 具体代码: <!DOCTYPE HTML> <html> <head> <meta charset="gb2312"/> <title>窗口登陆效果</title> <style type="text/css"> #win { position:r
JavaScript实现窗口抖动效果

原理介绍抖动其实是往复运动的一种特殊形式,只不过往复运动是一种无摩擦力的无限运动,且以速度为参照依据:而抖动以位置作为参照依据,最终停在起始点在网页中最常见的一种抖动效果应该是窗口抖动提示了抖动元素从起始点开始,先向右移动最大距离len,然后移动到对称的左边位置:然后再向右移动稍微小一点的距离,再移动到对称的左边位置:以此循环,最终元素停止在起始点代码实现抖动在代码实现上,无非就是通过定时器,每隔一段时间让left或top值进行变化在运动实现中,有两种距离变化的思路思路一 div.
C#实现QQ窗口抖动效果

本文实例为大家分享了C#实现QQ窗口抖动效果的具体代码,供大家参考,具体内容如下实现界面: 1. 两个textbook和两个Button 2. NotifyIcon控件是实现托盘实现代码: private void Form1_Load(object sender, EventArgs e) { this.Text = "聊天窗口"; button1.Text = "抖动"; button2.Text = "发送"; this.AutoSiz
javascript实现的仿腾讯QQ窗口抖动效果代码

振动 function zd(u){ var a=['top','left'],b=0; u=setInterval(function(){ document.getElementById('win').style[a[b%2]]=(b++)%415){clearInterval(u);b=0} },32) } 欢迎访问我们,www.jb51.net [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
实例代码详解javascript实现窗口抖动及qq窗口抖动

窗口抖动效果在很多地方都有应用,例如网易的登陆窗口就有这样的效果,当登陆失败的时候就会出现抖动效果,这不但有动感,而且让人感觉新颖,下面是一段这样的代码实例,和大家分享一下. 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <meta name="author" content="http://www.softwhy.com/&qu
jquery模拟实现鼠标指针停止运动事件

本文实例讲解了鼠标指针停止运动触发事件实例代码,分享给大家供大家参考,具体内容如下在js中有有内置的鼠标各种事件,比如click事件,mousemove事件等等,但是并没有鼠标指针停止运动这个事件,下面就利用jquery模拟实现此效果,希望能够给需要的朋友带来一定的帮助. 代码如下: <html> <head> <meta charset="gb2312"> <title>鼠标指针停止运动</title> <style
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】

本文实例讲述了jQuery模拟实现经典FLASH导航动画效果的方法.分享给大家供大家参考,具体如下: 一.前言: FLASH在中国互联网发展初期的时候非常的热,各种各样的矢量造型和动作,加上专门配制的音效,让很多人眼前一亮,并且让很多人迷上了这种新兴的媒体,那时候兴起了很多大大小小的专门发布FLASH的网站,印象中记得的像"FLASH闪吧"."FLASH帝国"."闪客天地"等这些都是很火很热的网站,在当时盛极一时,由此也产生了一大批的专门从事FL
jQuery模拟实现的select点击选择效果【附demo源码下载】

本文实例讲述了jQuery模拟实现的select点击选择效果.分享给大家供大家参考,具体如下: 有时候有些HTML元素无法让我们用样式控制进行控制,但是射鸡师或是客户的需求就是需要这种效果,还要让每个浏览器都显示同样的效果,这时候就会让我们这些所谓的前端攻城师很蛋疼,客户会认为交了点钱不让你折腾些东西,以为你是没做事的.面对这些对技术一窍不通的客户,技术对于他们来说就是一坨屎,以为我们都是用意念来写代码做程序的,所以都把我们的劳动成果看作是廉价得像是简单的拉出一泡屎而已. 虽然很喜欢什么都没有修

jQuery模拟窗口抖动效果

相关推荐

随机推荐