 |
热门文章 |
|
|
|
相关文章 |
|
| 没有相关文章 |
|
|
| 鼠标滚轮缩放图象（兼容ie、ff、opera） |
| 来源：百学资源站 更新时间：2010/7/18 0:17:12 阅读次数： 我要投稿 |
|
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title> 鼠标滚轮缩放图象</title>
</head>
<body>
<img id="img" src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081123451407.jpg">
<div id="output"></div>
<script type="text/javascript">
function scrollImage(id,speed) //被缩放图象id与缩放速度
{
var speed=speed?speed:1;
var is_ff=navigator.userAgent.toLowerCase().indexOf('firefox');
var $=function(d){return document.getElementById(d)};
var zoom=function(event){
var event=event?event:window.event;
if(is_ff>0){
$(id).style.width=$(id).offsetWidth-event.detail*speed+'px';
$("output").innerHTML=$(id).offsetWidth; //调试用,显示图象实时宽度,使用时删除
}
else{
$(id).style.width=$(id).offsetWidth+event.wheelDelta/40*speed+'px';
$("output").innerHTML=$(id).offsetWidth; //调试用,显示图象实时宽度,使用时删除
}
};
this.onload=function(){
if(is_ff>0) $("img").addEventListener("DOMMouseScroll",zoom,false);
else $("img").onmousewheel=zoom;
}
}
var img=new scrollImage("img",5);
window.onload=function(){
img.onload();
}
</script>
</body>
</html> |
| 特效说明： |
| 鼠标滚轮缩放图象（兼容ie、ff、opera） |
|
| 上一篇文章： 鼠标滑过图片出现大图片提示层效果js代码下一篇文章： 很漂亮的图片切换展示效果 |
|
|
|
注册 登录
