【插件】jQuery.iviewer----图片浏览、放大、缩小、全屏

做项目的时候使用到一个图片浏览的插件jQuery.iviewer,链接地址:http://www.jq22.com/jquery-info4580

效果如下:

但是应用的时候出现不能滚动放大缩小的问题,查看代码的时候发现封装的滚轮判断事件有点问题,返回的delta都为0,然后对jquery.iviewer.js的代码做了一些修改:

1、添加函数addWheelEvent来判断滚动方式

/**
    *   nomousewheel
    **/
    // 兼容所有浏览器
    addWheelEvent: function (obj,efn){
        //判断IE8还是非IE8
        if(document.addEventListener){
            //火狐还是非火狐
            var oDiv = document.createElement("div");
            if(oDiv.onmousewheel === null){
                obj.addEventListener("mousewheel",fn,false);
            }else{
                obj.addEventListener("DOMMouseScroll", fn, false);
            }
        }else{
            obj.attachEvent("onmousewheel", fn);
        }
        function fn(ev){
            ev = ev || window.event;
            var d = ev.wheelDelta/120 || -ev.detail/3;
            var rs = efn.call(obj,ev,d);
            if(rs === false){//禁止滚动条默认事件
                ev.preventDefault && ev.preventDefault();
                return false;
            }
        }
    },

2、修改_create函数中的滚动事件:注释‘mousewheel.iviewer‘方法,改用前面新增的方法addWheelEvent

 if (this.options.mousewheel) {
            // this.container.bind(‘mousewheel.iviewer‘, function(ev, delta)
            var obj = this.container.get(0);//将jQuery对象转化为DOM对象
            this.addWheelEvent(obj,function(ev,delta)//使用新增方法
            {
                //this event is there instead of containing div, because
                //at opera it triggers many times on div

                var zoom = (delta > 0)?1:-1,
                container_offset = me.container.offset(),
                mouse_pos = {
                    //jquery.mousewheel 3.1.0 uses strange MozMousePixelScroll event
                    //which is not being fixed by jQuery.Event
                    x: (ev.pageX || ev.originalEvent.pageX) - container_offset.left,
                    y: (ev.pageY || ev.originalEvent.pageX) - container_offset.top
                };
                me.zoom_by(zoom, mouse_pos);
                return false;
            });

原文地址:https://www.cnblogs.com/qiuyueding/p/8297654.html

时间: 2024-10-10 08:12:25

【插件】jQuery.iviewer----图片浏览、放大、缩小、全屏的相关文章

基于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

Android浏览图片,点击放大至全屏效果

最近做一个项目类似于QQ空间,做到照片浏览的功能,对于QQ空间中点击图片放大至全屏,感觉效果很赞,于是也做了个类似的效果.如下. 我不知道QQ那个是怎么做的,我的思路如下: 首先,从图片缩略界面跳转到图片详情页面,应该是从一个Activity跳转到另外一个Activity,应该图片详情页面也有很多操作,用View或者Dialog不是很好.所以现在难点就是,如何使得前一个界面的ImageView在另外一个界面做缩放切割动画. 一般缩略界面的ImageView的是如上图所示的正方形的,并且是CENT

UIButon 控件的尺寸放大缩小(也可以理解为图片的放大缩小,思路是一样的)-学习笔记

图片的放大缩小功能的简单实现(以一个简单的猜图项目中的放大缩小为例) 思路: 1.创建一个UIButton * guessimage  控件,设定好位置,再创建一个button bigImage控件测试一下 放大图片的方法 goToBig,同样放好位置: 2.给 guessimage 设置边距,尺寸大小,同样 bigImage 也进行设置等等: 3.给 bigImage 添加点击 放大图片的方法:goToBig, 在goToBig里面 定义 4个 座标的值,也就是 CGFloat guessim

Android 本地/网路下载图片实现放大缩小

 Android 本地加载/网路下载图片实现放大缩小拖拉效果,自定义控件. package com.example.ImageViewCustom; import android.app.Activity; import android.os.Bundle; import com.example.ImageViewCustom.CustomControl.MImageView; public class MyActivity extends Activity { MImageView mImag

基于jQuery悬停图片变色放大特效

分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="width: 620px; margin: 40px auto 0 auto;"> <div class="img"> <div class="inner"> <div> <img src="image/1-1.

Java界面程序实现图片的放大缩小

Java界面程序实现图片的放大缩小.这个程序简单地实现了图片的打开.保存.放大一倍.缩小一倍和固定缩放尺寸,但是并没有过多的涵盖对图片的细节处理,只是简单地实现了图片大小的放缩. 思维导图如下: 效果图如下: 代码如下: package picture; import java.awt.*; import java.awt.event.*; import java.awt.image.BufferedImage; import javax.swing.*; import java.io.*; i

图片 滚动 放大缩小 旋转

需求就是页面浏览一张图片,要求提供放大.缩小.旋转的功能 这里实现的方式是使用jquery的一个iviewer插件 具体实现方式已经提供在下载包中,下载链接: 如果失效请联系QQ:1546224081,或者QQ:2651408273 ps几点: 1,使用文件前,做好相应css和js的映射. 2,mousewheel是iviewer-master的简介版. 3,更改mousewheel图表时,记得要更改jquery.iviewer.css的中的最后两行,以及相应的路径. 4,两个demo我都放在了

jQuery炫酷点击变形全屏放大的模态窗口

这是一款效果非常炫酷的点击变形全屏放大的jQuery模态窗口插件.该模态窗口插件当用户点击某个按钮时,按钮先变形缩小变为圆形,然后在由小圆到大圆全屏放大,效果非常酷. 最后在生成模态窗口的时候的动画效果使用jquery和Velocity以及CSS3 transition 和 transformations共同完成. 在线演示:http://www.htmleaf.com/Demo/201501291297.html 下载地址:http://www.htmleaf.com/jQuery/Light

jquery 图片比例不变,全屏居中

<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>图片中心点全屏缩放代码</title> <script type="text/javascript" src="http://i1.sinaimg.cn/jslib/jquery-1.4.2.min.js"></script> &l

Android多点触控技术,实现对图片的放大缩小平移,惯性滑动等功能

首先推荐一下鸿洋大大的打造个性的图片预览与多点触控视频教程,这套教程教我们一步一步实现了多点触控实现对图片的平移和缩放的功能,这篇文章我将在鸿洋大大的基础之上做了一些扩展功能: 1.图片的惯性滑动 2.图片缩放小于正常比例时,松手会自动回弹成正常比例 3.图片缩放大于最大比例时,松手会自动回弹成最大比例 实现图片的缩放,平移,双击缩放等基本功能的代码如下,每一行代码我都做了详细的注释 public class ZoomImageView extends ImageView implements