js -- img 随着鼠标滚轮的变化变化 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="zh-cn" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" >
<title>用鼠标滚轮滚动控制图片的缩小放大</title>
<style type="text/css">
    
</style>
<script language="javascript">
    function bbimg(o){ 
        var zoom = parseInt(o.style.zoom, 10) || 100;
        zoom += event.wheelDelta / 100;
        console.log(event.wheelDelta);
        if (zoom > 0) {
            o.style.zoom = zoom + '%';
        }
            return false;
    }
</script>
</head>
<body>
<p>将鼠标放在图片上，点击一下，然后滚动鼠标滚轮试试看</p>
<p><img border="0" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528862370826&di=17ebe8a1a56a7fc6cc18b22aecd83679&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F96dda144ad345982b391b10900f431adcbef8415.jpg" 
　　　　　　　　　　　 onmousewheel="return bbimg(this)"></p>
</body>
</html>

 

posted @ 2018-06-15 14:10  蔚京霖  阅读(258)  评论(0)  编辑  收藏  举报