var number = 3//总图片数量
var num = number-1
var speed = 3000//间隔时间
function amouseover(){
ismouseover = true
}
function amouseout(){
ismouseover = false
}
.
.
.
function imgSwitch(){
if(!ismouseover){
var imgNow = document.getElementById("switch")
var iNow = Math.floor(Math.random()*num)
imgNow.src = imgDyn[iNow][0]
imgNow.parentNode.href = imgDyn[iNow][1]
imgDyn.splice(iNow,1)
if(num>0){
num = num-1
}else{
num = number -1
imgInit()
}
}
setTimeout(imgSwitch,speed)
}
.
.
.
<a onmouseover='amouseover()' onmouseout='amouseout' href="#" target="_blank"><img id="switch" src="" width="100%"></a>
试试这个.
图片我用的(
new:
http://www.lanrentuku.com/lanren/png/wall_eve_harddisk/wall_eve_harddisk_03.png
old:
http://www.lanrentuku.com/lanren/png/wall_eve_harddisk/wall_eve_harddisk_12.png
)只能上传一个,自己下载下吧
<html>
<head>
<script>
window.onload = function()
{
img1.style.clip = "rect(0 256 256 0)"
img2.style.clip = "rect(0 256 0 0)"
}
function showNew()
{
window.clearInterval(myTime)
var i=0
var myTime = window.setInterval(function()
{
img1.style.clip = "rect("+ i +" 256 256 0)"
img2.style.clip = "rect(0 256 "+ i +" 0)"
i+=16
if(i>256)
{
window.clearInterval(myTime)
}
},1)
}
function showOld()
{
var i=0
var myTime = window.setInterval(function()
{
img1.style.clip = "rect("+ (256-i) +" 256 256 0)"
img2.style.clip = "rect(0 256 "+ (256-i) +" 0)"
i+=16
if(i>256)
{
window.clearInterval(myTime)
}
},1)
}
</script>
</head>
<body>
<div>
<img id="img1" src="old.png" style="position:absolute" onmouseover="showNew()" />
<img id="img2" src="new.png" style="position:absolute" onmouseout="showOld()" />
</div>
</body>
</html>
设置图片的父元素为相对定位；
设置图片为绝对定位；
假设图片宽为w，高为h，放大后的宽为2w，高为2h，则计算其位置如下：
left:-(2w-w)/2,
top:-(2h-h)/2
