zoukankan      html  css  js  c++  java
  • 图片放大和缩小

    鼠标滚动轮子来放大和缩小图片:

    <!DOCTYPE html>
    
    <html>
    
    <head lang="en">
    
        <meta charset="UTF-8">
        <title></title>
    
    </head>
    
    <body>
    <img src="/image/img/icon_new.png" id="img" alt=""/>
    
    </body>
    
    </html>
    
    <script>
    
    
        function myBrowser() {
    
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    
            var isOpera = userAgent.indexOf("Opera") > -1;
            //判断是否Opera浏览器
    
            if (isOpera) {
                return "Opera";
    
            }
            //判断是否Firefox浏览器
    
            if (userAgent.indexOf("Firefox") > -1) {
    
                return "FF";
    
            }
    
            if (userAgent.indexOf("Chrome") > -1) {
    
                return "Chrome";
    
            }
    
            if (userAgent.indexOf("Safari") > -1) {
    
                return "Safari";
    
            }
    
            if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
    
                return "IE";
    
            }
    
        }
    
    
        var i = document.getElementById("img");
    
        if (myBrowser() == "ff") {
    
            i.addEventListener("DOMMouseScroll", fun, false);
    
        } else {
    
            i.onmousewheel = fun;
            i.onclick = fun;
    
        }
    
    
        function fun(e) {
    
            var ev = e || window.event;
    
            var num = ev.wheelDelta || ev.detail;
    
            if (num > 0) {  //正数表示滚轮向上,负数表示滚轮向下
    
                i.style.width = i.offsetWidth * 1.2 + "px";
    
            } else {
    
                i.style.width = i.offsetWidth * 0.8 + "px";
    
            }
    
        }
    
    
    </script>
  • 相关阅读:
    Live2D 看板娘
    Live2D 看板娘
    Live2D 看板娘
    Live2D 看板娘
    Live2D 看板娘
    Live2D 看板娘
    Live2D 看板娘
    Live2D 看板娘
    Live2D 看板娘
    [转载]MySQL5.5 配置文件 my.ini 1067错误
  • 原文地址:https://www.cnblogs.com/chendezhen/p/15294620.html
Copyright © 2011-2022 走看看