鼠标图片放大插件-JQUERY ZOOM

发布时间：2016-01-21, 16:34:56 分类：HTML | 编辑 off 网址 | 辅助

正文 2274字数 392,417阅读

插件描述：jQuery Zoom是一款可以让我们将鼠标移动到图片上或者点击图片移动放大的插件。
jQuery Zoom是一款可以让我们将鼠标移动到图片上或者点击图片移动放大的插件。

使用步骤
1、首先将以下js和css文件引用到页面中

<!-- CSS files -->
<link rel="stylesheet" type="text/css" href="zoom.css">
<!-- Js Files -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.zoom.js"></script>

Run code

Cut to clipboard

2、在head标签中加入以下js代码

<script type="text/javascript">
        $(document).ready(function() {
                /* simple call */
                $('#ex1').zoom();
                $('#ex2').zoom({ on:'grab' });
                $('#ex3').zoom({ on:'click' });
  
                /* With callback function. EX. colorbox plugin ! */
                $('a.photo').zoom({
                  url: 'photo-big.jpg',
                  callback: function(){
                    $(this).colorbox({href: this.src});
                  }
                });
        });
</script>

Run code

Cut to clipboard

3、在body标签中加入以下格式的html代码

<span class="zoom" id="ex1"> <img src="daisy.jpg" id="jack" width="555"height="320" alt="Daisy on the Ohoopee">
<p>
    Hover
</p>
</span> <span class="zoom" id="ex2"> <img src="roxy.jpg" width="290"height="320" alt="Roxy on the Ohoopee">
<p>
    Grab
</p>
</span> <span class="zoom" id="ex3"> <img src="daisy.jpg" width="555"height="320" alt="Daisy on the Ohoopee">
<p>
    Click
</p>
</span>

Run code

Cut to clipboard

参数配置
参数名参数说明可选值默认值
url 大图的URL地址，如果不提供该参数，那么将使用第一额IMG元素的src 字符串 false
on 引发放大事件的鼠标动作 mouseover, grab, 或 click mouseover
icon 如果设为true，会在图片右上角添加一个提示布尔值 true
duration 大图渐隐或渐显的速度数字 120
callback 图片加载完成的回调函数函数 false
参数解析
icon:true（默认值）右上角有一个小小的放大镜提示图片

icon:false

三种放大模式：mouseover, grab, 或 click
mouseover：就是当鼠标移动到图片上时放大
grab：是按下鼠标呈手型并放大图片

click：是点击鼠标后开始放大图片，再点击一次又恢复到不能放大的状态

演示 http://www.jq22.com/demo/zoom-master/

Run code

Cut to clipboard

附件：upload/attach/tbs-OndFPVwmqZ.rar

（支付宝）给作者钱财以资鼓励（微信）→

有过 1 条评论 »

广西南宁市 2018-01-31, 00:28:22

模仿微信相册图片放大
点击图片放大缩放
弹出层
相册


<!--zoom img-->
<style>
#newBridge{
z-index: 2147483645!important;
}
#zoomimgggxxxlll{
    width: 100%;
    height: 100%;
    background: #000;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 2147483646;
	display:none;
}
.layui-layer, .layui-layer-shade{
z-index: 2147483647!important;
}
</style>
<div id="zoomimgggxxxlll" onclick="layer.closeAll();$('#zoomimgggxxxlll').hide();"></div>
<script src="/layer/layer.js"></script>
<script type="text/javascript" src="/m/js/pinchzoom.js?1"></script>

<script>
$(function () {
	$('.layui-layer-content').each(function () {
		new RTP.PinchZoom($(this), {});
	});
})


$(document).ready(function(){
  $(".cnnn img").click(function(){
		layer.closeAll();
		$('#zoomimgggxxxlll').show();
		var srccc=$(this).attr('src');
		srccc='<img onclick="layer.closeAll();$(\'#zoomimgggxxxlll\').hide();" src="'+srccc+'" style="max-width:100%;max-height:100%;"/>'
		//alert(srccc);
		//页面层
		layer.open({
		  type: 1,scrollbar: false,
		  title: false,
		  closeBtn: 0,
		  shade: 0,
		  //area: ['100%', '100%'],
		  content: srccc
		});
		
	$('.layui-layer-content').each(function () {
		new RTP.PinchZoom($(this), {});
	});
		
		
  });
  /*$(".layui-layer-content img").on("click",function(){
  //$(".layui-layer-content img").click(function(){
		layer.closeAll();
  });*/
  
  
  });
</script>
<!--end-->

#,广西南宁市,2018-01-31,00:32:46, 附件下载

#,广西南宁市,2018-01-31,00:33:31, 图片缩放大


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Pinchzoom.js Demo</title>

    <style type="text/css">
        div.pinch-zoom,
        div.pinch-zoom img{
            width: 100%;
            -webkit-user-drag: none;
        }

    </style>
    <link rel="stylesheet" href="style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <!-- pinchzoom requires: jquery -->
    <script type="text/javascript" src="../dependencies/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../src/pinchzoom.js"></script>
    <script type="text/javascript">
        $(function () {
            $('div.pinch-zoom').each(function () {
                new RTP.PinchZoom($(this), {});
            });
        })
    </script>
</head>
<body>

    <div class="page">
        <div class="pinch-zoom">
            <div class="description">
                <h1>Pinchzoom.js</h1>
                <p>
                    Multi-touch zoom in Javascript
                </p>
            </div>
            <img src="frog.jpg"/>
           
        </div>
    </div>

</body>
</html>

-webkit-user-drag

#,广西南宁市,2018-01-31,00:34:41, jQuery动画出现连续触发、滞后反复执行的解决方法

//语法结构 
$("#div").stop();//停止当前动画，继续下一个动画 
$("#div").stop(true);//清除元素的所有动画 
$("#div").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画
$("#div").stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态

$("#div").stop().animate({width:"100px"},100);

#,广西南宁市,2018-01-31,10:59:47,
修复uc等浏览器图片max不显示问题

area: ['100%'],

加加载层，会导致点击遮罩层不能关闭bug

//layer.load(1);

#,广西南宁市,2018-01-31,11:52:58,
修复有点击a标签链接图片不放大

if($(this).parent('a').length) return true;//修复链接图片也放大

reply | quote | #¹

Records:1 1/1 «‹1 ›»

lizhenqiu blog

鼠标图片放大插件-JQUERY ZOOM

相关日志

有过 1 条评论 »

留下評論