当前位置：首页 > news >正文

网页制作17-Javascipt图像特效の鼠标经过图像震动

news 来源：原创 2025/5/15 8:14:10

01、效果图

02、grammer用法

parseInt() 函数可解析一个字符串，并返回一个整数。

parseInt(string, radix)

如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。
如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。
如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

03代码


<html><head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.zhendimage{
position:relative
}
</style>
<script>
var rector=3
var stopit=0 
var a=1

function init(which){
stopit=0
zhend=which
zhend.style.left=0
zhend.style.top=0
}//鼠标经过，初始化图像位置

function rattleimage(){
if (stopit==1)
return
if (a==1){
zhend.style.top=parseInt(zhend.style.top)+rector
}
else if (a==2){
zhend.style.left=parseInt(zhend.style.left)+rector
}
else if (a==3){
zhend.style.top=parseInt(zhend.style.top)-rector
}
else{
zhend.style.left=parseInt(zhend.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>
</head>
<body>   
<img class="zhendimage" onMouseover="init(this);rattleimage()" onMouseout="stoprattle(this)" height="200"
                  src="ABC.png" alt="">
</body></html>