jquery xzy_zoompic 图片放大缩小查看插件

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

功能:点击对象弹出可移动的窗口显示图片,图片可滚轮放大与缩小并移动,方便对照图片输入需要的信息(原始需求)双击还原原始大小。

因工作需要紧急制作的一个图片查看插件。

<script type="text/javascript">
$(document).ready(function() {
    $(".z_pic").xzy_zoompic(500,400,4,200);
});
/*
jquery xzy_zoompic 图片放大缩小查看插件
$(class).xzy_zoompic(w,h,unit,min)
w:窗口宽度,可选参数,默认350像数
h:窗口高度,可选参数,默认300像数
unit:滚轮时放大或缩小系数,可选参数,默认5个像数
min:图片缩小时最小宽度,可选参数,默认200像数
功能:点击对象弹出可移动的窗口显示图片,图片可滚轮放大与缩小并移动,方便对照图片输入需要的信息(原始需求)双击还原原始大小。
作者:太阳光
此插件是因工作需要,费时1小时完成,部分功能仍不理想。
*/
jQuery.fn.extend({
    xzy_zoompic:function (w,h,unit,min){
        w=w||350;h=h||300;unit=unit||5;min=min||200;
        $('body').append('<div id="xzy_zoompic" style="width:'+w+'px;height:'+h+'px"><div id="xzy_zoompic_title" style="width:'+w+'px"><div id="xzy_zoompic_close" title="点击关闭"></div><span></span></div><img src="" id="xzy_zoompic_pic" /></div>');
        $(this).click(function(){
            $("#xzy_zoompic_pic").attr("src",$(this).attr("src")).css({width:"auto",top:0,left:0});
            $("#xzy_zoompic_title span").html($(this).attr("alt"));
            var i_top=$(this).offset().top;
            var i_left=parseInt($(window).width()/2-w/2);
            $("#xzy_zoompic").css({display:"block",left:i_left,top:i_top});
        });
        function move_div(id){
            $(id).mousedown(function (e) {
                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);
            return false;
        }
        $("#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");
        $("#xzy_zoompic_close").click(function(){
            $("#xzy_zoompic").hide();
        });
    }
});
</script>

效果浏览点击这里

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

  • 感到高兴

    0

    高兴
  • 感到支持

    0

    支持
  • 感到搞笑

    0

    搞笑
  • 感到不解

    0

    不解
  • 感到谎言

    0

    谎言
  • 感到枪稿

    0

    枪稿
  • 感到震惊

    0

    震惊
  • 感到无奈

    0

    无奈
  • 感到无聊

    0

    无聊
  • 感到反对

    0

    反对
  • 感到愤怒

    0

    愤怒
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自动补齐