2013-07-08 10:59:56 鼠标放在图片上滑动鼠标滑轮缩放图片放大缩小CSS特效，当鼠标处于网页图片之上时滚动鼠标滚轮缩放图片DIV+CSS+JS特效
鼠标放在图片上滑动鼠标滑轮缩放图片放大缩小CSS特效，当鼠标处于网页图片之上时滚动鼠标滚轮缩放图片DIV+CSS+JS特效。
鼠标滑轮缩放图片特效效果截图
一、最简单的简洁版图片缩放特效如下：
1、缩放JS代码：
- <script language="javascript">
- <!--
- function bbimg(o){
- var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (zoom>0) o.style.zoom=zoom+'%';
- return false;
- }
- //-->
- </script>
2、HTML中图片：
- <img src="HTML8-logo-201305.gif" alt="鼠标放上滑动鼠标滑动放大缩小此图片"
title="鼠标放上滑动鼠标滑动放大缩小此图片" onmousewheel="return bbimg(this)"
width="165" height="60" style="cursor: pointer;" border="0" />
使用说明：需要缩放放大缩小图片的地方加入“onmousewheel="return bbimg(this)"”即可。使用时候最好对图片img标签内设置宽度和高度。
此特效特点，只对鼠标所在上方对应图片进行缩放放大缩小。
简单版在线演示：查看案例
打包下载：
二、复杂版缩放图片JS特效 不推荐
此款DIV CSS+JS的图片缩放特效，应用不是那么好使用，推荐最简洁版，复杂版缩放图片代码如下。
1、JS代码：
- if (window.addEventListener)
- {
- window.addEventListener('DOMMouseScroll', wheel, false);//给firefox添加鼠标滚动事件
- }
- function wheel(event)
- {
- return wheelimg(event);
- }
- function bbimg()
- {
- var div = document.getElementById("div1");
- var allImg = div.getElementsByTagName("IMG");
- for(i=0;i<allImg.length;i++)
- {
- var zoom=parseInt(allImg[i].style.zoom, 10)||100;
- zoom+=event.wheelDelta/12;
- if (zoom>0) allImg[i].style.zoom=zoom+'%';
- }
- }
- function wheelimg(event)
- {
- var delta = 0;
- var div = document.getElementById("div1");
- if (event.detail)
- {
- //如果是firefox
- var allImg = div.getElementsByTagName("IMG");
- var isThis=false;//现判断鼠标中仑的元素是不是包含在那个div里面
- for(i=0;i<allImg.length;i++)
- {
- isThis=true;
- allImg[i].width=allImg[i].width+event.detail*12;
- event.returnValue = false;
- }
- }
- return true;
- }
2、HTML代码如下：
- <body onmousewheel="bbimg()">
- <div id="div1">
- <img id="wheelimg" src="http://farm3.static.flickr.com/2782/4098845549_fe43958798.jpg"
style="cursor: pointer;" border="0" />- <img id="wheelimg1" src="http://farm3.static.flickr.com/2448/4099603568_69b7811d55.jpg"
style="cursor: pointer;" border="0" />- </div>
- </body>
使用说明：需要对body标签内加入“onmousewheel="bbimg()"”；同时需要缩放的图片放入“<div id="div1"> ”内，同时对图片设置“ID=wheelimg”，注意ID参数变化。
在线演示：查看案例
打包下载：