jquery xzy_zoompic 图片放大缩小查看插件[多窗口]

稿件来源: 阳光企业网站管理系统   撰稿作者: 太阳光   发表日期: 2012-11-01   阅读次数: 267   查看权限: 游客查看

功能:点击对象弹出可移动的窗口显示图片,图片可滚轮放大与缩小并移动,双击还原原始大小。经过修改可弹出多个窗口。

 

jQuery.fn.extend({
    xzy_zoompic:function (w,h,unit,min){
        w=w||350;h=h||300;unit=unit||5;min=min||200;
        $(this).click(function(){
            var i=$(".z_pic").index($(this));
            $(".xzy_zoompic").css("z-index",1000);
            if($("#zoompic_"+i)[0]){
                $("#zoompic_"+i).css("z-index",1001);
            }else{
                var i_left=parseInt($(window).width()/2-w/2);
                $('body').append('<div class="xzy_zoompic" id="zoompic_'+i+'" style="z-index:1001;width:'+w+'px;height:'+h+'px;left:'+i_left+'px;top:'+$(this).offset().top+'px"><div class="xzy_zoompic_title" style="width:'+w+'px"><div class="xzy_zoompic_close" onclick="$(\'#zoompic_'+i+'\').remove()" title="点击关闭"></div>'+$(this).attr("alt")+'</div><img src="'+$(this).attr("src")+'" class="xzy_zoompic_pic" /></div>');
                $(".xzy_zoompic_pic").mouseover(function(){
                    if (document.addEventListener) {
                        this.addEventListener('DOMMouseScroll', scrollMouse, false);
                    }
                    this.onmousewheel = this.onmousewheel = scrollMouse;
                }).dblclick(function(){
                    $(this).css({width:"auto",top:0,left:0});
                });
                move_div(".xzy_zoompic_pic");
                move_div(".xzy_zoompic");
            }
        });
        function move_div(id){
            $(id).mousedown(function (e) {
                $(".xzy_zoompic").css("z-index",1000);
                $(this).parent(".xzy_zoompic").css("z-index",1001);
                $(this).css("z-index",1001);
                var oe=e||window.event;
                var $this = this;
                var startX = oe.clientX - $this.offsetLeft;
                var startY = oe.clientY - $this.offsetTop;
                document.onmousemove = function (e) {
                    var oe = e || window.event;
                    $this.style.left = oe.clientX - startX + "px";
                    $this.style.top = oe.clientY - startY + "px";
                };
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                    if ($this.releaseCapture) {
                        $this.releaseCapture();
                    }
                };
                if ($this.setCapture) {
                    $this.setCapture();
                }
                return false;
            });
        }
        function scrollMouse(e) {
            var direct = 0;
            e = e || window.event;
            if (e.wheelDelta) {
                direct = e.wheelDelta;
                e.returnValue=false
            } else if (e.detail) {
                direct = e.detail;
                e.preventDefault();
            }
            var t = parseInt($(this).width());
            if (direct < 0) {
                t += unit;
            } else {
                t -= unit;
            }
            $(this).width(t < min ? min : t);
        }
    }
});

效果浏览点击这里

关键词: jquery,图片插件,jquery插件   编辑时间: 2012-11-01

  • 感到高兴

    0

    高兴
  • 感到支持

    1

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    1

    愤怒
0%(0)
100%(1)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐