点击缩略图显示大图支持左右切换及缩放拖拽

最新推荐文章于 2021-07-03 09:22:08 发布
最新推荐文章于 2021-07-03 09:22:08 发布
阅读量345 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/fss226/p/5431511.html
版权

 

1. css

body{
    font-family: "Microsoft YaHei";
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
*{padding: 0;margin: 0;list-style-type:none}
.main-content{
    width: 820px;
    height: 2000px;
    margin: 0 auto;
    border: solid 2px #FEE853;
    background: #cccccc;
}

.main-content ul{
    padding-bottom: 20px;
}

.main-content ul li{
    float: left;
}

.main-content ul li a{
    display: inline-block;
    width: 200px;
    height: 150px;
    border: solid 1px #FF3300;
    overflow: hidden;
}

.main-content ul li a img{
    width: 100%;
}


.facebox{
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background:rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
}


#btnleft{
    position: fixed;
    top: 50%;
    left: 20px;
    margin-top: -15px;
    z-index: 1001;
    width: 60px;
    height: 60px;
    border-radius: 50px;
    text-align: center;
    line-height: 60px;
    font-size: 50px;
    font-weight: bold;
    background: #cccccc;
    color: #000;
    cursor: pointer;
}


#btnright{
    position: fixed;
    top: 50%;
    right: 20px;
    margin-top: -15px;
    z-index: 1001;
    width: 60px;
    height: 60px;
    border-radius: 50px;
    text-align: center;
    line-height: 60px;
    font-size: 50px;
    font-weight: bold;
    background: #cccccc;
    color: #000;
    cursor: pointer;
}

#btnclose{
    width: 30px;
    height: 30px;
    font-size: 22px;
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 1000;
    background: #cccccc;
    cursor: pointer;
    text-align: center;
    line-height: 30px;
    color: #000;
    border-radius: 30px;
}

.img-box{
    position: relative;
    width: 100%;
    height: 100%;
}

#bigImg{
    position: absolute;
}

 

2.html

<div class="details_body">
<div class="main-content ">
    <ul class="imgUl_pic0001 clearfix">
        <li><a href="javascript:void(0)" class="zoom-img" srcurl="img1.jpg"><img src="img1.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)" class="zoom-img" srcurl="img2.png"><img src="img2.png" alt=""/></a></li>
        <li><a href="javascript:void(0)" class="zoom-img" srcurl="img3.jpg"><img src="img3.jpg" alt=""/></a></li>
        <li><a href="javascript:void(0)" class="zoom-img" srcurl="img4.jpg"><img src="img4.jpg" alt=""/></a></li>
    </ul>
   <ul class="imgUl_pic0001 clearfix">
       <li><a href="javascript:void(0)" class="zoom-img" srcurl="img3.jpg"><img src="img3.jpg" alt=""/></a></li>
       <li><a href="javascript:void(0)" class="zoom-img" srcurl="img1.jpg"><img src="img1.jpg" alt=""/></a></li>
       <li><a href="javascript:void(0)" class="zoom-img" srcurl="img2.png"><img src="img2.png" alt=""/></a></li>
       <li><a href="javascript:void(0)" class="zoom-img" srcurl="img4.jpg"><img src="img4.jpg" alt=""/></a></li>
   </ul>
</div>
</div>
<div class="facebox">
    <span id="btnleft"><</span>
    <span id="btnright">></span>
    <span id="btnclose">x</span>
    <div class="img-box" id="map">
        <img id="bigImg"  src="" alt=""/>
    </div>
</div>

 

3.js　　

<script src="jquery-1.8.3.min.js"></script>
$(function() {
   var d = document;
   var isRun,
      startX,
      startY,
      endX,
      endY,
      rX,
      rY,
      $b = d.getElementById("map");
      WinW=$(window).width(),
      WinH=$(window).height(),
      ww = WinW,
      wh = WinH,
      i = $b.getElementsByTagName('img')[0],
      img = i.style,
      scaleSize = 1,
      //大图循环数组
      imgArr=[];
   var imgw,
      imgh,
      bgX,
      bgY;
   var _ZoomFn = {
      //点击小图
      _zoomclickFn : function() {
         //点击显示大图
         $('.zoom-img').on('click', function() {
            //获取屏幕可见宽度和高度
            var height = $(window).height();
            var width = $(window).width();
            var _this = $(this);
            var _eq = _this.parent('li').index();
            var _imgSrc = _this.attr('srcurl');
            $('#bigImg').attr('src', _imgSrc);
            _ZoomFn._leftFn(_this);
            _ZoomFn.bigloadFn(width, height)
         });
         //关闭
         $('#btnclose').on('click', function() {
            $('.facebox').fadeOut(200);
            scaleSize=1;
            //清空img大图数组
         });
         _ZoomFn.on($b,{"mousedown" : function(e) {
               //按中建快速还原大小
               if (e.which === 2) {
                  _ZoomFn.rs();
               }
               if (e.which === 1 && e.target && (e.target === i || e.target === $b)) {
                  isRun = true;
                  startX = e.pageX;
                  startY = e.pageY;
                  e.preventDefault();
               }
            },
            "mouseup" : function(e) {
               if (e.which !== 1) {
                  return;
               }
               img.cursor = "default";
               isRun = false;
               bgX = rX;
               bgY = rY;
               e.preventDefault();
            },
            "mousemove" : function(e) {
               if (e.which !== 1) {
                  return;
               }
               if (isRun) {
                  e.preventDefault();
                  img.cursor = "move";
                  endX = e.pageX;
                  endY = e.pageY;
                  rX = bgX + endX - startX;
                  rY = bgY + endY - startY;
                  img.left = rX + "px";
                  img.top = rY + "px";
               }
            },
            //以鼠标为中心缩放，同时进行位置调整
            "mousewheel" : function(e) {
               var deltaY = 0;
               var x = e.pageX;
               var y = e.pageY;
               e.preventDefault();
               if (e.target && (e.target === i)) {
                  var l = _ZoomFn.getOffset($b);
                  x = x - l.left;
                  y = y - l.top;
                  var p = (e.wheelDelta) / 1200||(-e.detail)/30;
                  var ns = scaleSize;
                  ns += p;
                  ns = ns < 0.1 ? 0.1 : (ns > 5 ? 5 : ns); //可以缩小到0.1,放大到5倍
                  //计算位置，以鼠标所在位置为中心
                  //以每个点的x、y位置，计算其相对于图片的位置，再计算其相对放大后的图片的位置
                  bgX = bgX - (x - bgX) * (ns - scaleSize) / (scaleSize);
                  bgY = bgY - (y - bgY) * (ns - scaleSize) / (scaleSize);
                  scaleSize = ns; //更新倍率
                  img.width = imgw * ns + "px";
                  img.height = imgh * ns + "px";
                  img.top = bgY + "px";
                  img.left = bgX + "px";
               }
            }
         });
      },

      //大图加载
      bigloadFn : function(_width, _height) {
         $('#bigImg').load(function() {
            _ZoomFn._imgbigFn(this, _width, _height, true);
         });
         scaleSize=1;
      },
      //大图左右切换
      _leftFn : function(_tarGet) {
         var imgUrl = $('#bigImg').attr('src');
         var imgUrls = _tarGet.parents('.imgUl_pic0001').find('a').each(function(i) {
            imgArr[i] = $(this).attr('srcurl');
         });

         //上一张
         $('.details_body').on('click', '#btnleft', function() {
            for (var j = imgArr.length; j > 0; j--) {
               if (imgUrl == imgArr[j]) {
                  j--;
                  $('#bigImg').attr('src', imgArr[j]);
                  imgUrl = $('#bigImg').attr('src');
               }
               scaleSize = 1;
            }
         });
         //下一张
         $('.details_body').on('click', '#btnright', function() {
            for (var j = 0; j < imgArr.length; j++) {
               if (imgUrl == imgArr[j]) {
                  j++;
                  $('#bigImg').attr('src', imgArr[j]);
                  imgUrl = $('#bigImg').attr('src');
               }
               scaleSize = 1;
            }
         });
      },
      _imgbigFn : function(dom, width, height, flag, noReplay) {
         //大图的父级盒子是隐藏的状态，浏览器高宽为0
         if ($(dom).parents(":hidden").length > 0 && height == 0 && width == 0) {
            return;
         }
         noReplay = noReplay || "yes";
         var $dom = $(dom);
         var simg = new Image();
         simg.src = dom.src;
         var _thisH = $dom.height();//当前大图高
         var _thisW = $dom.width();//当前大图宽
         var _SimgH = simg.height;//Image高
         var _SimgW = simg.width;//Image高
         //当前大图高不为0
         if (_thisH && _thisH != _SimgH) {
            _thisH = _thisH;
         } else {
            _thisH = $dom.parent().parent().height()
         }
         if (_thisW && _thisW != _SimgW) {
            _thisW = _thisW;
         } else {
            _thisW = $dom.parent().parent().width();
         }
         if (!height) {
            height = _thisH;
         }
         if (_SimgH > 0 && _SimgW > 0) {
            if ((_SimgH <= height && _SimgW <= width) || (_SimgW <= width && noReplay == "no")) {
               $dom.width(_SimgW);
               $dom.height(_SimgH);
               if (flag) {
                  $dom.css({
                     'left':(width-_SimgW)/2,
                     'top':(height - _SimgH)/2
                  });
               }
               bgX=(width-_SimgW)/2;
               bgY=(height - _SimgH)/2;
               imgw=_SimgW;
               imgh=_SimgH;
            } else {
               var bh = (height-40) / _SimgH;
               var bw = (width*0.8) / _SimgW;
               var b = (noReplay == "no" ? bw : (bh < bw ? bh : bw));
               $dom.width(_SimgW * b);
               $dom.height(_SimgH * b);
               if (flag) {
                  var pt = (height - _SimgH * b) / 2,
                     pl = (width - _SimgW * b) / 2;
                  pt = (pt >= 1 ? pt : 0);
                  pl = (pl >= 1 ? pl : 0);
                  $dom.css({
                     'left':pl,
                     'top':pt
                  })
               }
               imgw = _SimgW * b;
               imgh = _SimgH * b;
               bgX=pl;
               bgY=pt;
            }
         }

         $('.img-box').show();
         $('.facebox').show();
         $dom = null;


      },

      evnt:function (event) {
         var evn = event,
            eventDoc, doc, body,
            button = evn.button
            evn.target = evn.target || evn.srcElement;

         // Calculate pageX/Y if missing and clientX/Y available
         if (evn.pageX == null && evn.clientX != null) {
            eventDoc = evn.target.ownerDocument || document;
            doc = eventDoc.documentElement;
            body = eventDoc.body;
            evn.pageX = evn.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
            (doc && doc.clientLeft || body && body.clientLeft || 0);
            evn.pageY = evn.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) -
            (doc && doc.clientTop || body && body.clientTop || 0);
         }
         if (!evn.preventDefault) {
            evn.preventDefault = function() {
               this.returnValue = false;
            }
         }
         if (!evn.stopPropagation) {
            evn.stopPropagation = function() {
               this.cancelBubble = true;
            }
         }
         if (evn.which == null && (evn.charCode != null || evn.keyCode != null)) {
            evn.which = evn.charCode != null ? evn.charCode : evn.keyCode;
         }
         // Add which for click: 1 === left; 2 === middle; 3 === right
         // Note: button is not normalized, so don't use it
         if (!evn.which && button !== undefined) {
            evn.which = (button & 1 ? 1 : (button & 2 ? 3 : (button & 4 ? 2 : 0)));
         }
         return evn
      },
      getOffset:function(o) {
         var left = 0,
            top = 0;
         while (o != null && o != document.body) {
            top += o.offsetTop;
            left += o.offsetLeft;
            o = o.offsetParent;
         }
         return {
            left : left,
            top : top
         };
      },
      bind:function(b, a, c) {
         if(b.addEventListener){
            //mousewheel在火狐兼容判断
            if (a === "mousewheel" && document.mozHidden !== undefined) {
                   a = "DOMMouseScroll";
               }
               b.addEventListener(a, function(event) {
               c.call(b, _ZoomFn.evnt(event));
            }, false);
         }else{
            b.attachEvent("on" + a, function(event) {
               c.call(b, _ZoomFn.evnt(window.event));
            });
         }
      },
      //取消事件兼容
      unbind:function(obj,type,fn){
         if (obj.removeEventListener)
               obj.removeEventListener( type, fn, false );
           else if (obj.detachEvent) {
               obj.detachEvent(  "on" +type, obj["e"+type+fn] );
               obj["e"+type+fn] = null;
           }
      },
      //循环绑定事件
      on : function(b, o) {
         for (var a in o) {
            _ZoomFn.bind(b, a, o[a]);
         }
      },
      //循环解绑事件
      del:function(dom,o){
         for(var a in o){
            _ZoomFn.unbind(dom,a,o[a]);
         }
      }
};
   _ZoomFn._zoomclickFn();

});


 

转载于:https://www.cnblogs.com/fss226/p/5431511.html

weixin_30699443
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自定义vue图片预览缩放组件
锦瑟年华的博客
03-31 460
<template> <div id='zoompic'> <div class="zoom-img"> <img ref="Img" :src="imgurl" @mousedown="move"> <span class="closeIcon" @click="clos...
移动端图片预览功能（放大和左右滑动）
trigger的博客
07-03 1943
1.分享一个好用的h5移动端图片预览插件，直接上代码：在你的项目中引入imageReview.js文件，如下： var reviewHtml='<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">'+ '<div class="pswp__bg"></div>'+ '<div class="pswp__scroll-wrap">'+ '<di
点击放大图片，滑动可放大缩小
09-14
点击图片放大，滚动鼠标图片可放大缩小，适应pc和移动端
缩略图点击图片放大并且可以轮播
qq_40002311的博客
09-10 2092
缩略图点击图片放大并且可以轮播（使用baguetteBox） 效果： 引用baguetteBox.min.css和baguetteBox.min.js 下载地址： 代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here<...
jq写的缩略图点击显示大图且可实现透明原图切换（简单法）
DZY_hungry的博客
08-13 402
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片显示</title> <script type="text/javascript" src="jquery.js"></script> <style> body,html{ height: 100%; width: 100%; }
jQuery产品图片缩放切换代码
04-07
主图片区域通常包含一个大图和一个用于拖动的容器，缩略图列表包含多个可点击的缩略图。 ```html <div id="zoomed-image"></div> <li><img src="thumbnail1.jpg" data-fullsrc="full1.jpg"> <li><img ...
非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等.zip
08-12
jQuery实现拖动滚动条的缩略图排列插件下载 jQuery实现焦点图片Flash自动平滑渐变效果 jQuery实现鼠标移到链接提示显示图片功能插件 jquery实现鼠标经过链接放大图片特效代码 jquery实用Banner大图片横向切换效果 ...
图像缩略图
12-07
【图像缩略图】开发是基于MFC框架的图像浏览器应用，主要目的是实现图像的查看、放大、缩小以及拖拽功能。MFC（Microsoft Foundation Classes）是微软提供的一套面向对象的C++类库，用于简化Windows应用程序的开发。...
Android-PhotoBrowse是一个Android图片浏览器支持拉下拖动关闭
08-13
为了提升用户体验，该组件可能支持常见的手势操作，如双击放大、单指滑动切换图片、两指捏合缩放等。这些手势操作使得用户可以更加自然地与图片进行互动。 5. **图片展示**： 高质量的图片展示是必不可少的，...
jQuery产品图片缩放切换代码.zip
07-04
这个代码库旨在提供一种交互式的用户体验，允许用户点击缩略图来查看大图，并且在查看大图时能够通过鼠标拖动来平移图像。这一功能在电子商务网站、产品展示页面或任何需要强调图片细节的场合都非常实用。下面将详细...
jquery缩略图和大图滚动切换预览特效
06-01
基于jquery加css相框图片预览，侧边缩略图点击展示相应的大图效果。这是一款常用的缩略图和大图结合切换预览特效。
jQuery实现可左右切换点击缩略图展示原图相册源码
08-26
带左右切换箭头，带缩略图，可左右切换，点击缩略图展示原图。
带缩略图轮播效果（全屏切换）
12-17
插件描述：点击缩略图或点击缩略图左右按钮进行切换. 参考示例：http://www.jq22.com/jquery-info5141
jQuery点击缩略图切换大图代码
05-01
jQuery点击缩略图切换大图代码基于jquery.1.3.2.min.js制作，简单图片查看器，点击左边小图，右边大图切换显示。
html5点击缩略看原图,PPT如何实现点小图看大图点击缩略图效果
weixin_35943493的博客
07-03 710
为了展示某品牌汽车，需要做PPT幻灯片给大客户演示该品牌各种型号的汽车和内部结构图，具体的需求是这样的：在PowerPoint中先展示各种汽车的省略小图片，如果客户对哪款汽车有意向，则点击该小缩略图则可以看到大图片。面对这个问题，下面给出了不错的解决方案，有类似需求的朋友可以参考下。PPT实现点小图看大图点击缩略图效果简述首先在幻灯片页面中插入一个新的演示文稿，并填充图片，可以不用考虑图片的原始大...
ASP.NET onkeyup 添加GridView行
weixin_33859504的博客
02-25 128
HTML <table class="borderedTable" cellspacing="0" rules="all" border="1" id="tblInspectionResult" style="width: 99%; border-collapse: collapse;"> <tr> ...
qt实现缩略图
小蜗牛的专栏
06-01 5386
qt目前用于界面开发很多，qt3中许多控件在qt4以后都被集成在一起，今天来说说缩略图模式 使用QListWidget便可实现，QListWidget继承自QListView，很多朋友喜欢QListView，没有别的原因，就是QListView好看，哈哈 主要代码如下 listWidget->setIconSize(QSize(50,50));         //设置QL
js实现点击图片放大效果,以及懒加载图片
weixin_38546942的博客
11-18 1718
js实现点击图片放大效果,以及懒加载图片 近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观 存在两个问题 1、点击查看后，电子照片会变形，不易查看 2、没有小图可浏览，都需要点击查看方能查看； 按照需求,最简单的实现就是再加上时把所有的图片获取,缩略图展示,点击弹出展示大图即可,但是会在多图的情况下,会加载很慢,一个图最大2M,10张图就将近20M,会很影响页面的加载. 所以要实现两个功能 缩略图点击放大展示. 图片延迟加载. js
实现图片切换效果，单机缩略图时显示大图片
最新发布
06-06
最后，需要使用JavaScript实现缩略图的交互效果，即点击缩略图时显示对应的大图片。例如： ```javascript const thumbnails = document.querySelectorAll('.thumbnails img'); const mainImage = document....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值