JS实现图片缩放功能
在上网时经常会看到有图片缩放的功能， 于是今天自己也动手写了一个， 以下是源代码：
<html>
<head>
<title>图片自动缩放</title>
</head>
<body>
<script language="javascript">
<!--
function bimg(pic){
// 获取对象缩放比例， 并转化成十进制整数
var zoom = parseInt(pic.style.zoom,10) || 100;
//滚轮移动量上移+120， 下移-120
zoom+=event.wheelDelta/12;
if(zoom>0)
pic.style.zoom = zoom+'%'; //重新设置比例
return false;
}
function limg(){
var zoom=parseInt(pic.style.zoom, 10)||100;
zoom +=zoom/12;
if(zoom>0){
pic.style.zoom=zoom+'%'; //重新设置比例
return false;
}
}
function simg(){
var zoom=parseInt(pic.style.zoom, 10)||100;
zoom -=zoom/12;
if(zoom>0){
pic.style.zoom=zoom+'%'; //重新设置比例
return false;
}
}
//-->
</script>
<img src="收藏1.jpg" border="0" onmousewheel="return bimg(this)">
<img src="收藏1.jpg" border="0" id="pic"><a href="#" onclick="return limg();">放大</a> <a href="#" onclick="return simg();">缩小</a>
</body>
</html>
————说明： 上述代码中用到了三个函数， 第一个函数是用滚轮去控制缩放的， 第二个与第三个则是通过点击链接控制的。
1、 parseInt()方法用于将一个字符串转换为整型数字， 其中parseInt(xxx,10),代表把字符串转化成整数，10代表十进制，同理8，16等分别代表八进制和十六进制
2、 style.zoom属性主要是用来显示元素的放大比例
3、 event.wheelData属性为onmousewheel事件返回的一个表示鼠标滑轮滚动方向的整数， 返回值一般式120或120，正值表示滚轮向上滚动，负值表示向下滚动。
4、 onmousewheel事件表示当鼠标中间滚轮滚动时获取通知。
<html>
<head>
<title>图片自动缩放</title>
</head>
<body>
<script language="javascript">
<!--
function bimg(pic){
// 获取对象缩放比例， 并转化成十进制整数
var zoom = parseInt(pic.style.zoom,10) || 100;
//滚轮移动量上移+120， 下移-120
zoom+=event.wheelDelta/12;
if(zoom>0)
pic.style.zoom = zoom+'%'; //重新设置比例
return false;
}
function limg(){
var zoom=parseInt(pic.style.zoom, 10)||100;
zoom +=zoom/12;
if(zoom>0){
pic.style.zoom=zoom+'%'; //重新设置比例
return false;
}
}
function simg(){
var zoom=parseInt(pic.style.zoom, 10)||100;
zoom -=zoom/12;
if(zoom>0){
pic.style.zoom=zoom+'%'; //重新设置比例
return false;
}
}
//-->
</script>
<img src="收藏1.jpg" border="0" onmousewheel="return bimg(this)">
<img src="收藏1.jpg" border="0" id="pic"><a href="#" onclick="return limg();">放大</a> <a href="#" onclick="return simg();">缩小</a>
</body>
</html>
————说明： 上述代码中用到了三个函数， 第一个函数是用滚轮去控制缩放的， 第二个与第三个则是通过点击链接控制的。
1、 parseInt()方法用于将一个字符串转换为整型数字， 其中parseInt(xxx,10),代表把字符串转化成整数，10代表十进制，同理8，16等分别代表八进制和十六进制
2、 style.zoom属性主要是用来显示元素的放大比例
3、 event.wheelData属性为onmousewheel事件返回的一个表示鼠标滑轮滚动方向的整数， 返回值一般式120或120，正值表示滚轮向上滚动，负值表示向下滚动。
4、 onmousewheel事件表示当鼠标中间滚轮滚动时获取通知。