js抖动

效果

代码

1

2

3

4

5

6

7

8

9

10

11

<img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvd3d3LnFxb3EubmV0L3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDAxMDAuanBn.jpg" onMouseover="shake(this,‘onmouseout‘)" >

<script type="text/javascript">

var typ = ["marginTop","marginLeft"],rangeN=10,timeout=20;

function shake(o,end){

var range=Math.floor(Math.random()*rangeN);

var typN=Math.floor(Math.random()*typ.length);

o["style"][typ[typN]]=""+range+"px";

var shakeTimer=setTimeout(function(){shake(o,end)},timeout);

o[end]=function(){clearTimeout(shakeTimer)};

}

</script>

js抖动

时间: 2024-11-05 02:45:50

js抖动的相关文章

JS 抖动和节流

节流:周期性的执行,比如就是 每隔10秒执行一次,每隔10秒执行一次,主要就是用当前的时间减去上一次触发的时间,判断是否大于等于要执行的间隔时间,如果是就执行,不是就不执行.(注意:最后一次按键事件可能出现小于间隔时间的情况,可以给最后一次按键事件使用setTimeOut来延迟事件的触发): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

JS打造抖动的按钮特效(鼠标放上去开始抖动)

<HTML><HEAD> <TITLE>JS打造抖动的按钮特效(鼠标放上去开始抖动)_石家庄水泵厂|草坪销售</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> </HEAD> <BODY bgColor=#fef4d9><BR><BR> <CENTER>鼠标抖动的按钮&

css+javascript网页抖动图标、抖动制作教程,输入抖动命令js执行命令让网页抖动起来(详细版)

首先我想说关于网页中做css抖动不难,用js命令也不难,下面我将为大家详细介绍具体做法. 一.我们要先有个网页代码的基本架构,比如 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>抖动网页的基本框架</title> </head> <body> <div> <h1

原生js实现图片抖动效果

今天来写一个关于图片抖动的效果,需求是:点击图片,让其抖动几下停止(类似于苹果手机填错密码之后会抖一下的效果),其实想要实现这个效果,原理就是,点击之后,让其左移动下然后右移动一下(每移动一下减几像素知道减到0),然后将其放入定时器内,让其慢慢自动停下来.来看代码布局: <style> #img{position:absolute;left:30px;} </style> <body> <!--需求:点击图片,图片会抖动几下--> <img id=&q

js的抖动及防抖和节流

 js的抖动 在 js 中 改变窗口大小 & 上下滚动滚动条 & 反复向输入框中输入内容 ... , 如果绑定了相应的事件 , 这些事件的触发频率非常高, 严重影响用户体验和服务器的性能 , 这种问题 在js中 就叫 js 的抖动 . 解决方法 : 防抖 & 节流  js的防抖 就是在 触发事件 中设置一个定时器来延迟 绑定事件 的生效 , 并且每次在 触发事件 中清除定时器 , 直到两次 触发事件 生效的间隔 能够触发定时器才会时 绑定事件 生效 (持续触发并不会对应函数 , 只

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:ab

cocos js 自定义抖动动作

自定义抖动动作,记录备查 1 /** 2 * 自定义抖动动作 3 */ 4 var Shake = cc.ActionInterval.extend({ 5 //节点初始位置 6 nodeInitialPos:null, 7 //X轴抖动幅度 8 nodeShakeStrengthX:0, 9 //Y轴抖动幅度 10 nodeShakeStrengthY:0, 11 //抖动时间 12 duration:0, 13 ctor:function(duration,shakeStrengthX,sh

原生JS offsetX和offsetY引起抖动

在模仿淘宝放大镜效果时, 发现mask层一直抖动, 红色方框添加了onmousemove事件, 内部用到了offsetX 最后解决方案是给mask添加css属性: pointer-event: none; <div class="outer"> <div.mask></div> </div> 原本我是想让outer作为参考系获得offsetX和offsetY的值, 所以把onmousemove事件响应函数添加到outer上, 可是这样做仅

js实现Mac触摸板双指事件(上/下/左/右/放大/缩小)

前言 这几天在修复一个web问题时,需要捕获Mac触摸板双指事件(上.下.左.右.放大.缩小),但发现并没有现成的轮子,还是要自己造. 例如:jquery.mousewheel.js(添加跨浏览器的鼠标滚轮支持), 给得太简单,没有处理Mac双指行为,所以不能用. 目标 获取Mac触摸板双指行为,具体有两个,一个是实时拖动路线,二是手势(上.下.左.右.放大.缩小). 难点 双指行为只会触发mousewheel事件,其他什么的touch,mouse都不会触发,只能从这个下手. 双指特性 1.在快