功能:放大缩小,拖动,变换样式(图片)问题:修改图片透明度时会闪
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.drag{position:relative;cursor:hand}
</style>
<script language="javascript">
var dragapproved = false;
var picture,x,y
function move(){ //拖动鼠标
if(event.button==1&&dragapproved){
picture.style.pixelLeft=temp1+event.clientX-x
picture.style.pixelTop=temp2+event.clientY-y
return false;
}
}
function drags(){ //拖动前的初始化工作
if(!document.all) return
if(event.srcElement.className=="drag"){
dragapproved = true
picture=event.srcElement;
temp1=picture.style.pixelLeft
temp2=picture.style.pixelTop
x=event.clientX
y=event.clientY
document.οnmοusemοve=move
}
}
document.οnmοusedοwn=drags //按下鼠标左键
document.οnmοuseup=new Function("dragapproved=false") //松开鼠标左键
</script><!-- 拖动鼠标,实现图像拖动功能-->
<script language="javascript">
function Counting(count){
if(event.wheelDelta>=120) //event.wheelDelta设置或获取滚轮按钮滚动的距离和方向。
count++;
else if(event.wheelDelta<=-120)
count--;
return count;
}//滚轮每滚动一次使count加/减1
var count=10;
function Picture(){
count=Counting(count);
Resize(count);
return false;
}//滚轮滚动后适当控制图片的缩放比例
var pic = "img1.jpg";
var opacity = 100;
function Resize(count){
var m = document.getElementById('map');
if (count <= 8)
{
if (m.src.indexOf("img2.jpg") > 0 && opacity == 100)
{
pic= "img1.jpg";
var num=setInterval(function(){ChangePic(num)},200);
}
} else
{
if (m.src.indexOf("img1.jpg") > 0 && opacity == 100)
{
pic= "img2.jpg";
var num=setInterval(function(){ChangePic(num)},200);
}
}
m.style.zoom=count+'0%';
}//设置图片缩放大小
function ChangePic(num)
{
var m = document.getElementById("map");
opacity = opacity - 20;
if (opacity <= 0)
{
clearInterval(num);
opacity = 100;
m.src = pic;
}
m.style.filter = "alpha(opacity=" + opacity + ")";
}
</script><!-- 滚动鼠标滚轮,实现图像缩放功能-->
<img src="img1.jpg" width="1337" height="905" border="0" alt="" align="middle" id="map" class="drag" style="margin:0" onmousewheel="Picture()">
</head>
<body>
</body>
</html>