js鼠标滑过图片震动特效的方法


Posted in Javascript onFebruary 17, 2015

本文实例讲述了js鼠标滑过图片震动特效的方法。分享给大家供大家参考。具体实现方法如下:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>鼠标滑过 图片震动效果</title>

<STYLE>.shakeimage {

 POSITION: relative

}

</STYLE>

</head>

<body>

<SCRIPT language=JavaScript1.2>

<!--

var rector=3

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

}

//-->

</SCRIPT>

<img class="shakeimage" onMouseOver="init(this);rattleimage()" onMouseOut="stoprattle(this)" src="/images/csrcode.ico" border="0" style="cursor:pointer;"/>

<img class="shakeimage" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this)" src="/images/changshi.ico"  border="0" style="cursor:pointer;"/>

<img class="shakeimage" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this)" src="/images/links.ico" border="0" style="cursor:pointer;"/>

鼠标滑过图片预览效果。

</body>

</html>

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

Javascript 相关文章推荐
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
javascript对JSON数据排序的3个例子
Apr 12 Javascript
JavaScript验证图片类型(扩展名)的函数分享
May 05 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
javascript 代码是如何被压缩的示例代码
May 06 Javascript
js实现双击图片放大单击缩小的方法
Feb 17 #Javascript
js图片模糊切换显示特效的方法
Feb 17 #Javascript
js实现单击图片放大图片的方法
Feb 17 #Javascript
js实现iframe自动自适应高度的方法
Feb 17 #Javascript
js全选实现和判断是否有复选框选中的方法
Feb 17 #Javascript
Jquery树插件zTree用法入门教程
Feb 17 #Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 #Javascript
You might like
也谈 PHP 和 MYSQL
2006/10/09 PHP
php连接数据库代码应用分析
2011/05/29 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
PHP实现微信提现功能
2018/09/30 PHP
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
2015/02/27 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
2016/04/18 Javascript
json与jsonp知识小结(推荐)
2016/08/16 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
JS数组方法concat()用法实例分析
2020/01/18 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
Expedia加拿大官方网站:加拿大最大的在线旅游提供商
2017/12/31 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
成教自我鉴定
2013/10/27 职场文书
商场促销活动方案
2014/02/08 职场文书
大学生社会实践方案
2014/05/11 职场文书
公司活动总结范文
2014/07/01 职场文书
国际商务专业求职信
2014/07/15 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
大学生军训自我鉴定范文
2014/09/18 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
JS数组的常用方法整理
2021/03/31 Javascript
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript