html怎么把图片做成抖动效果,js实现鼠标触发图片抖动效果的方法

本文实例讲述了js实现鼠标触发图片抖动效果的方法。分享给大家供大家参考。具体实现方法如下：

鼠标触发图片抖动效果

.shakeimage{

position:relative

}

//configure shake degree (where larger # equals greater shake)

var rector=3

///DONE EDITTING///

var stopit=0

var a=1

function init(which){

stopit=0

shake=which

shake.style.left=0

shake.style.top=0

}

function rattleimage(){

if ((!document.all&&!document.getElementById)||stopit==1)

return

if (a==1){

shake.style.top=parseInt(shake.style.top)+rector

}

else if (a==2){

shake.style.left=parseInt(shake.style.left)+rector

}

else if (a==3){

shake.style.top=parseInt(shake.style.top)-rector

}

else{

shake.style.left=parseInt(shake.style.left)-rector

}

if (a<4)

a++

else

a=1

setTimeout("rattleimage()",50)

}

function stoprattle(which){

stopit=1

which.style.left=0

which.style.top=0

}

鼠标移动上来看效果！

希望本文所述对大家的javascript程序设计有所帮助。

html怎么把图片做成抖动效果,js实现鼠标触发图片抖动效果的方法相关推荐

HTML鼠标悬浮空心圆点切换图片,js实现鼠标切换图片（无定时器）
本文实例为大家分享了js实现鼠标切换图片的具体代码,供大家参考,具体内容如下实现效果,可以利用鼠标移动在对应的小点点上,或者点击左右两侧的箭头切换图片,并在图片的上方显示出图片的页数,下方显示出对应 ...
css+javascript网页抖动图标、抖动制作教程，输入抖动命令js执行命令让网页抖动起来（详细版）
首先我想说关于网页中做css抖动不难,用js命令也不难,下面我将为大家详细介绍具体做法. 一.我们要先有个网页代码的基本架构,比如 <!doctype html> <html lan ...
JS 利用鼠标切换图片（无定时器）
实现效果如下图,可以利用鼠标移动在对应的小点点上,或者点击左右两侧的箭头切换图片,并在图片的上方显示出图片的页数,下方显示出对应图片的标题. 全部代码如下: <!DOCTYPE html> ...
html的悬停图片缓慢放大,css3怎么实现鼠标悬停图片时缓慢变大效果?（图文+视频）...
本篇文章主要给大家介绍当鼠标滑过图片时实现放大效果的具体方法. 当我们在浏览各大电商网站时,最常见的图片动态效果,应该就是鼠标移入图片即悬停在图片时出现放大的效果了.实现这样的动态效果主要是为了突出产 ...
css鼠标经过图片镜像翻转,css代码实现鼠标指向图片翻转效果
烈火网(Liehuo.Net)教程今天有读者询问制作鼠标经过时切换图片的效果,这种效果也称为"翻转"效果(roll-over).原来这种效果大多使用Javascript实现,实际 ...
html 鼠标图标做成动画效果,怎么实现鼠标经过图标动画效果
学习前端的小伙伴们你知道鼠标经过图标动画效果如何实现吗?不知道的话跟着小编一起来学习标经过图标动画效果怎么实现把. 今天就为大家分享一组时尚而简单的鼠标经过图标动画效果. 构建HTML基本结构在本示 ...
html鼠标拖尾效果,JS实现鼠标移动拖尾
本文实例为大家分享了JS实现鼠标移动拖尾的具体代码,供大家参考,具体内容如下 JS 代码 function getMousePos(event) { var e = event || window.e ...
html5鼠标经过图片透明,html5 css3透明时钟鼠标悬浮图片放大
特效描述:html5 css3 透明时钟鼠标悬浮图片放大,html5 css3时钟及鼠标悬浮图片扩大特效,适合于初学者,而且是个不错的展示效果代码结构 1. 引入CSS 2. HTML代码 va ...
html鼠标滚动图片渐渐淡出,原生js和jquery实现图片轮播淡入淡出效果
图片轮播有很多种方式,这里采用其中的淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管 ...

html怎么把图片做成抖动效果,js实现鼠标触发图片抖动效果的方法

html怎么把图片做成抖动效果,js实现鼠标触发图片抖动效果的方法相关推荐

最新文章

热门文章