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%);} .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实现动态表单验证时文本框抖动效果完整实例
本文实例讲述了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右下角抖动、浮动 实例代码(兼容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果冻抖动效果实现方法
本文实例讲述了jquery果冻抖动效果实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(function(){ $("
-
jQuery通过扩展实现抖动效果的方法
本文实例讲述了jQuery通过扩展实现抖动效果的方法.分享给大家供大家参考.具体实现方法如下: 1. JavaScript代码如下: 复制代码 代码如下: jQuery.fn.shake = function(intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Time duration*/) { this.each(function() { var jqNode =
-
jQuery插件jRumble实现网页元素抖动
jRumble,它能让网页上的任意元素抖动起来,在你的网站中使用这个效果会有很大的机率吸引用户的注意力.此插件的效果可以用在链接上,或者div上,你可以设置抖动的范围.XY坐标.抖动幅度等.可设置为当鼠标移动上去抖动或者默认一直抖动,插件可定制性还是蛮高的.PS:此插件在IE中还存在一些小问题 jQuery jRumble是使用方法 <script type="text/javascript" src="js/jquery-jrumble.js"><
-
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.messager.js插件导致页面抖动的解决方法
消息弹出时页面总是抖动或者闪一下,找了很长时间没有找到原因,今天找到,原来是html没有声明解析规范 需要加上<!DOCTYPE> 标签 复制代码 代码如下: PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
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元素无法让我们用样式控制进行控制,但是射鸡师或是客户的需求就是需要这种效果,还要让每个浏览器都显示同样的效果,这时候就会让我们这些所谓的前端攻城师很蛋疼,客户会认为交了点钱不让你折腾些东西,以为你是没做事的.面对这些对技术一窍不通的客户,技术对于他们来说就是一坨屎,以为我们都是用意念来写代码做程序的,所以都把我们的劳动成果看作是廉价得像是简单的拉出一泡屎而已. 虽然很喜欢什么都没有修
随机推荐
- JavaScript无提示关闭窗口(兼容IE/Firefox/Chrome)
- Swift 编程语言入门教程
- 浅谈js中test()函数在正则中的使用
- C#中参数个数可变的方法实例分析
- shell实现自动adsl拨号并检测连接状况脚本分享
- jQuery插件ajaxFileUpload实现异步上传文件效果
- 非常不错的列出sql服务器上所有数据库的asp代码
- JavaScript数据类型学习笔记
- jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
- 详解Ruby中的异常
- SQLSERVER数据备份文件的分割备份方法
- 分页 SQLServer存储过程
- 菜鸟学习JavaScript小实验之函数引用
- ADSL注册表优化大法之9x/ME篇
- C#中WPF使用多线程调用窗体组件的方法
- php flush无效,IIS7下php实时输出的方法
- android实现人脸识别技术的示例代码
- linux shell之通过标识测试文件系统属性的方法示例
- vue+axios 前端实现的常用拦截的代码示例
- JavaScript常见事件处理程序实例总结