dom基础2 — 实现鼠标放大缩小查看图片功能

<script type="text/javascript">
    "use strict";
    var console = window.console;

    // var Event = require("./addEvent.js");

    var dom = document.createElement(‘div‘);
    dom.style.width = ‘600px‘;
    dom.style.height = ‘600px‘;
    dom.style.border = ‘1px solid gray‘;
    dom.style.position = ‘absolute‘;
    dom.style.top = ‘0‘;
    dom.style.bottom = ‘0‘;
    dom.style.left = ‘0‘;
    dom.style.right = ‘0‘;
    dom.style.margin = ‘auto‘;
    dom.style.overflow = ‘hidden‘;
    document.body.appendChild(dom);

    dom.insertAdjacentHTML(‘afterbegin‘,‘<img src="https://qidian.qpic.cn/qidian_common/349573/9fb9627740f52f4addf43720928e683d/0"/>‘);

    var img = document.querySelector(‘img‘);
    img.style.width = ‘100%‘;
    img.style.height = ‘100%‘;
    img.style.objectFit = ‘cover‘;

    // 监听鼠标滚轮事件
    var addEvent = (function(window, undefined) {
        var _eventCompat = function(event) {
            var type = event.type;
            if (type == ‘DOMMouseScroll‘ || type == ‘mousewheel‘) {
                event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3;
            }
            if (event.srcElement && !event.target) {
                event.target = event.srcElement;
            }
            if (!event.preventDefault && event.returnValue !== undefined) {
                event.preventDefault = function() {
                    event.returnValue = false;
                };
            }
            /*
               ......其他一些兼容性处理 */
            return event;
        };
        if (window.addEventListener) {
            return function(el, type, fn, capture) {
                if (type === "mousewheel" && document.mozFullScreen !== undefined) {
                    type = "DOMMouseScroll";
                }
                el.addEventListener(type, function(event) {
                    fn.call(this, _eventCompat(event));
                }, capture || false);
            };
        } else if (window.attachEvent) {
            return function(el, type, fn, capture) {
                el.attachEvent("on" + type, function(event) {
                    event = event || window.event;
                    fn.call(el, _eventCompat(event));
                });
            };
        }
        return function() {};
    })(window);        

    var num = 10;
    addEvent(dom, "mousewheel", function(event) {
        if (event.delta < 0) {
            console.log(‘鼠标向上滚了,图片缩小‘);
            num--;
            if (num <= 10) {
                num = 10;
                img.style.transform= ‘scale(1)‘;
            } else if (num > 10) {
                img.style.transform= ‘scale(‘ + num/10 + ‘)‘;
                console.log(num/10);
            } else {

            }

        } else {
            console.log(‘鼠标向下滚了,图片放大‘);
            num++;
            img.style.transform = ‘scale(‘ + num/10 + ‘)‘;
            console.log(num/10);
        }
    });

</script>

原文地址:https://www.cnblogs.com/popeyesailorman/p/10589460.html

时间: 2024-10-11 01:27:50

dom基础2 — 实现鼠标放大缩小查看图片功能的相关文章

Qt 图片浏览器 实现图片的放大缩小翻转等功能

图片的功能 源代码: wiget.h #ifndef WIDGET_H #define WIDGET_H #include <QPixmap> #include <QImage> #include <QPushButton> #include <QHBoxLayout> #include <QScrollArea> #include <QLabel> #include <QWidget> #include <QPal

javascript 实现双指放大缩小旋转图片

1 先记录 屏幕上 的手指数量 (记录方法 按下+1  松开-1) 2 记录每个手指的在屏幕上的坐标  每个手指的touchid不一样  用数组存就行 shouzhis[touchid]= x,y 3 如果屏幕上有2个手指 1 缩放按照2个手指的距离来计算 private getTouchDistance():number { var _distance:number = 0; var names = this.touchPoints["names"]; _distance = egr

移动端图片放大滑动查看-插件photoswipe的使用

最近在开发项目的时候,遇到一个需求,需要移动端实现放大查看图片的功能,然后我就在网上搜索了一下资料,看到了photoswipe这个插件,后来试了试,确实挺好用的,它可以实现手势放大缩小查看图片,左右滑动切换图片以及上下滑动关闭大图.现在简单分享一下. 一.需要引入的css和js文件. 页面中需要引入如下文件:photoswipe.css,default-skin.css,photoswipe.js,photoswipe-ui-default.min.js 首先可以到它的官网或者github网站上

鼠标滚轮图片放大缩小功能,使用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="

IOS 开发笔记-基础 UI(3)按钮的使用(放大缩小、改变位置,首位式动画)和学习案例

UIKit框架提供了非常多的UI控件,但并不是每一个都很常用,有些控件可能1年内都用不上,有些控件天天用,比如UIButton.UILabel.UIImageView.UITableView等等,按钮控件是非常重要且比较基础的一个UI控件---UIButton,一般情况下,点击某个控件后,会做出相应反应的都是按钮,按钮的功能比较多,既能显示文字,又能显示图片,还能随时调整内部图片和文字的位置. 案例: 功能分析 (1)左下角4个方向按钮,控制头像按钮的位置 (2)右下角分别是放大.缩小按钮,控制

基于jquery的鼠标滚动放大缩小图片

一直以来都想写一个图片放大和缩小的小玩意,本来以为会很复杂,这几天自己思考了一下,原来是so easy啊.目前实现的放大缩小,主要时依据鼠标的滚轮触发事件来实现的,废话少说直接上源码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

mxGraph绘图区域使用鼠标滚轮实现放大/缩小

// 重写鼠标滚轮事件 mxEvent.addMouseWheelListener = function (funct) { } // 增加初次加载事件 window.onload = function () { var element= document.getElementById('graph'); addScrollListener(element, wheelHandle); } function addScrollListener(element, wheelHandle) { if

纯js实用DOM元素放大缩小特效插件

Zoomerang.js是一款非常实用的HTML DOM元素放大缩小js特效插件.它可以将页面上的任何元素进行放大缩小.当某个元素处于Zoomerang的监听状态时,点击该元素可以将它放大到屏幕的中间,再次点击它又会回到原来的位置. 使用注意事项: 该元素放大缩小效果依赖于CSS Transform(IE浏览器至少要IE10才能支持) 在固定尺寸的元素上效果最佳:display: block.display: inline-block和img. 避免在很长的文本段上使用. 在mobile上使用时

C# GDI绘制矩形框,鼠标左键拖动可移动矩形框,滚轮放大缩小矩形框

最近工作需要,要做一个矩形框,并且 用鼠标左键拖动矩形框移动其位置.网上查了一些感觉他们做的挺复杂的.我自己研究一天,做了一个比较简单的,发表出来供大家参考一下.如觉得简单,可路过,谢谢.哈哈. 先大概介绍一下原因,GDI画矩形框就不说了,很简单的.这里面最主要的就是滚轮放大和左键移动两个事件,要计算矩形框的坐标位置.下面将代码贴出如下: 先是定义需要的变量,就四个变量. //矩形框坐标        private Rectangle DrawRect = new Rectangle(0, 0