鼠标滚轮实现图片缩放

<img id="myimage" src="images/pic.jpg" alt="my image" />
    <script type="text/javascript">
        //添加鼠标滚轮事件处理代码
        var myimage = document.getElementById("myimage");
        if (myimage.addEventListener) {
            // IE9, Chrome, Safari, Opera
            myimage.addEventListener("mousewheel", MouseWheelHandler, false);
            // Firefox
            myimage.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
        }
        // IE 6/7/8
        else myimage.attachEvent("onmousewheel", MouseWheelHandler);
        //为了让不同浏览器都能支持的处理做法,我们将对Firefox的detail值取反然后返回1或者-1的其中一个
        function MouseWheelHandler(e) {
            // cross-browser wheel delta
            var e = window.event || e; // old IE support
            var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
            //现在我们直接决定图片的大小范围。以下代码将图片的宽度范围设置在800-2300个像素之间
            myimage.style.width = Math.max(800, Math.min(2300, myimage.width + (30 * delta))) + "px";
            // 最后一点,我们在方法中返回false是为了终止标准的鼠标滚轮事件处理,以防它上下滑动网页
            return false;
        }
    </script>

时间: 2024-11-11 11:36:04

鼠标滚轮实现图片缩放的相关文章

鼠标滚轮实现图片的缩放-------Day79

今天是7月的最后一天了,不得不说,我定下的七月份剩余几天的计划是完不成了,一则工作确实紧了些,再则没能处理好生活.工作和学习的节奏,这才是人生最大的课题吧,不过也还好,至少自己还在坚持着,其实真的越来越感觉到自己的不足,可昂扬的斗志却是越来越低沉的迹象,内心里总有个声音在蛊惑自己:别整那些刻意的东西,做给谁看啊,而且刻意的记录的时间完全可以拿来学更多的东西,可最终我还在这个蛊惑前坚持着:确实可以腾出更多的时间来,也没人会在意在做什么,可是,同样,我不需要走那么快,而且只要知道自己在意就好了,我需

鼠标滚轮改变图片大小

<!DOCTYPE html"> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>通过鼠标滚动-放大缩小图片</title> <meta name="description&

鼠标滚轮调整图片大小

=======粘贴以下代码,保存为html文件可直接运行查看效果======= <html> <head> <title>鼠标滚动调整图片大小</title> <script language="javascript"> <!-- var count = 10; function resizeimg(oImage) { count = Counting(count); Resize(oImage,count); retu

用jQuery实现 使用鼠标滚轮对外部图片进行缩放

<div mag-thumb="outer"> <img src="img/alley/500x300.jpg" /> </div> <div style="width: 300px; height: 300px;"> <div mag-zoom="outer"> <img src="img/alley/1000x600.jpg" />

js 鼠标滚轮控制图片放大缩小

<img :src="ImgUrl" alt="" width="100%" @mousewheel="zoomimg($event)" id="ScrollImg"> // 缩放图片 zoomimg(event) { var delta = 0; if (!event) event = window.event; if (event.wheelDelta) { delta = event.wh

鼠标滚轮图片放大缩小功能,使用layer弹框后不起作用

今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="

炫酷CSS3鼠标hover图片缩放和标题效果

这是一款使用纯CSS3制作的效果非常炫酷的鼠标滑过图片缩放和标题效果.该CSS3图片效果中图片的边框被制作为不停动画的护栏效果,当用鼠标滑过图片时,图片会有非常炫酷的动画效果. CSS3 animations是一个非常神奇的技术,相比于javascript和flash,它只用少量的代码就可以制作出平滑的动画效果.现在,所有的现代浏览器,包括IE9都支持CSS3 transitions 和 animations. 在线演示:http://www.htmleaf.com/Demo/201502081

JS鼠标滚轮事件

所有的现代浏览器都支持鼠标滚轮,并且在用户滚动滚轮时触发时间.浏览器通常使用鼠标滚轮滚动或缩放文档,但可以通过取消mousewheel事件来阻止这些默认操作.有一些互用性问题影响滚轮事件,但是编写跨平台的代码依旧可以行.除了Firefox之外的所有浏览器都支持“mousewheel”事件,但Firefox使用“DOMMouseScroll”,而3级DOM事件规范草案建议使用事件名“wheel”替代“mousewheel”. document.body.onmousewheel = functio

百度地图实时侦听鼠标滚轮获取地图zoom缩放级别

百度地图api提供的获取地图缩放级别的方法比较单一,就一个getZoom()方法,这个方法能够获取一次地图缩放级别,后面随着鼠标滚轮的滚动,地图缩放级别被改变,就无法再获取地图缩放级别了,具体api参考:http://developer.baidu.com/map/reference/index.php?title=Class:%E6%9E%81%E9%80%9F%E7%89%88%E6%A0%B8%E5%BF%83%E7%B1%BB/map 如题,若想实时获取地图的缩放级别,小博主是这样做的,