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 相关文章推荐
基于jQuery的仿flash的广告轮播代码
Nov 04 Javascript
分享20款好玩的jQuery游戏
Apr 17 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
浅谈Unicode与JavaScript的发展史
Jan 19 Javascript
javascript文本框内输入文字倒计数的方法
Feb 24 Javascript
简单谈谈javascript Date类型
Sep 06 Javascript
微信小程序 Template详解及简单实例
Jan 05 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
详解Vue中watch的高级用法
May 02 Javascript
深入浅析Vue中的 computed 和 watch
Jun 06 Javascript
JS实现音量控制拖动
Jan 15 Javascript
使用jquery实现轮播图效果
Jan 02 jQuery
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实现变色验证码实例
2014/01/06 PHP
PHP操作MySQL事务实例
2014/11/05 PHP
PHP开发API接口签名生成及验证操作示例
2020/05/27 PHP
JavaScript 面向对象之命名空间
2010/05/04 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
Javascript中的变量使用说明
2010/05/18 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
jQuery中ScrollTo用法示例
2016/09/04 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[04:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster 选手采访
2021/03/11 DOTA
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
django之session与分页(实例讲解)
2017/11/13 Python
pygame游戏之旅 调用按钮实现游戏开始功能
2018/11/21 Python
python进阶之自定义可迭代的类
2019/08/20 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
opencv 形态学变换(开运算,闭运算,梯度运算)
2020/07/07 Python
用python进行视频剪辑
2020/11/02 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
Canon佳能美国官方商店:购买数码相机、数码单反相机、镜头和打印机
2016/11/15 全球购物
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
三严三实心得体会范文
2014/10/13 职场文书
党员评议个人总结
2014/10/20 职场文书
Django rest framework如何自定义用户表
2021/06/09 Python
linux下安装redis图文详细步骤
2021/12/04 Redis
MySQL数据库之内置函数和自定义函数 function
2022/06/16 MySQL