示例：https://wumaozheng.com/static-pages/image-magnifier.html

 <!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>Image</title>

     <script language="javascript" src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>

     <script language="javascript">

     $(function() {

         var offsetX = 20 - $("#imgtest").offset().left;

         var offsetY = 20 - $("#imgtest").offset().top;

         var size = 1.2 * $('#imgtest ul li img').width();

         $("#imgtest ul li").mouseover(function(event) {

             var $target = $(event.target);

             if ($target.is('img')) {

                 $("<img id='tip' src='" + $target.attr("src") + "'>").css({

                     "height": size,

                     "width": size,

                     "top": event.pageX + offsetX,

                     "left": event.pageY + offsetY,

                 }).appendTo($("#imgtest"));

             }

         }).mouseout(function() {

             $("#tip").remove();

         }).mousemove(function(event) {

             $("#tip").css({

                 "left": event.pageX + offsetX,

                 "top": event.pageY + offsetY

             });

         });

     })

     </script>

     <style type="text/css">

     img {

         cursor: pointer;

         height: 368px;

         width: 368px;

         position: absolute;

     }

     #imgtest {

         height: auto;

         width: auto;

         margin: 30px 60px 0px 60px;

         position: absolute;

     }

     #imgtest ul {

         position: relative;

         width: auto;

         height: auto;

         background: #00F;

     }

     #imgtest ul li {

         position: relative;

         height: 378px;

         width: 378px;

         list-style: none;

         float: left;

         margin: 3px;

     }

     </style>

 </head>

 <body>

     <div id="imgtest">

         <ul>

             <li><img src="http://inbmi.com/image/vp/1f029f78c164f4a9723d9af43fd2febe/5B800E3E/t51.2885-15/e35/31136663_1649816651776613_694881964250890240_n.jpg" /></li>

             <li><img src="http://inbmi.com/image/vp/4c9e38ab5c5d52eb30f671934dcb35bc/5B9AAD80/t51.2885-15/e35/31270267_220885218674663_609168203867750400_n.jpg" /></li>

             <li><img src="http://inbmi.com/image/vp/eba5901d056b5c740d6b671c66ac0137/5B77C34C/t51.2885-15/e35/31364150_1665566736868399_5092204927984336896_n.jpg" /></li>

             <li><img src="http://inbmi.com/image/vp/c82844d3912e0c9685b8a0f79f01caea/5B88819E/t51.2885-15/e35/31490408_366139313900670_1486728493155745792_n.jpg" /></li>

             <li><img src="http://inbmi.com/image/vp/4224804abad8cfbb4da15f8c2363dcae/5B8275CC/t51.2885-15/e35/30920518_160809141256123_1097812066267299840_n.jpg" /></li>

             <li><img src="http://inbmi.com/image/vp/4f90f49ec34f1adaed77e9cb92c7cccc/5B9D254E/t51.2885-15/e35/30591652_1850590825241799_3543379466950541312_n.jpg" /></li>

         </ul>

     </div>

 </body>

 </html>

JS实现图片放大查看的更多相关文章

  1. H5端js实现图片放大查看-插件photoswipe的使用

    这个是一个不知道什么鬼的东西,按照他需求改的,我也不知道对不对...看介绍说是h5把,我这个是用那个插件photoswipe的实现的 demo包地址: https://files-cdn.cnblog ...

  2. H5端js实现图片放大滑动查看-插件photoswipe的使用

    最近在开发项目的时候,遇到一个需求,需要移动端实现放大查看图片的功能,然后我就在网上搜索了一下资料,看到了photoswipe这个插件,后来试了试,确实挺好用的,它可以实现手势放大缩小查看图片,左右滑 ...

  3. js控制图片放大缩小的简易版

    js代码: function bb_img_onmousewheel(e, o) { var zoom = parseInt(o.style.zoom, 10) || 100; zoom += eve ...

  4. 测试cnblogs的代码折叠展开功能和zoom.js实现图片放大缩小冲突的问题

    #!/usr/bin/env python # -*- coding:utf- -*- def test(): print('from the test'

  5. 移动端图片放大滑动查看-插件photoswipe的使用

    最近在开发项目的时候,遇到一个需求,需要移动端实现放大查看图片的功能,然后我就在网上搜索了一下资料,看到了photoswipe这个插件,后来试了试,确实挺好用的,它可以实现手势放大缩小查看图片,左右滑 ...

  6. jQuery点击图片放大拖动查看效果

    效果如图: 放大前: 放大后(可拖动图片浏览): 源码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head& ...

  7. JS点击img图片放大再次点击缩小JS实现 简单实用Ctrl+C+V就可以用

    业务需要,从后台获取的图片列表,用img标签展示,用户需要查看大图.记录下来以便学习和参考.示例图如下: 放大之前: 放大之后: 点击后放大(由于图片高度超出了页面,需要通过overflow:auto ...

  8. (JS+CSS)实现图片放大效果

    代码很简单,在这里就不过多阐述,先上示例图: 实现过程: html部分代码很简单 <div id="outer"> <p>点击图片</p> &l ...

  9. img图片放大控件 lightbox.js

    1.引入相关js,css jquery-1.7.2.min.js,lightbox.css,lightbox.js   2 图片增加<a href="大图片地址" rel=& ...

随机推荐

  1. python - 语言介绍

    python 程序的执行过程 python 的实现 Cpython 原始.标准的实现方式 Jython 用于与Java语言继承的实现 Ironpython 用于与.net框架继承的实现 python ...

  2. C++ operator（重载操作符） 【转】

    转自:http://www.cnblogs.com/xiangxiaodong/archive/2012/02/12/2348144.html operator是C++的关键字,它和运算符一起使用,表 ...

  3. ActiveMQ 动态网络链接

    ActiveMQ的broker-broker方式有两种,一种 静态连接一种是动态连接,一般使用静态连接,动态连接了解就好,没有过多的去测试. 1. 多播协议multicast ActiveMQ使用Mu ...

  4. Debian9 使用 Docker 安装 gitlab完整过程

    一. 安装Docker CE (参考 官网指南) 1. 卸载老版本 sudo apt-get remove docker docker-engine docker.io  2. Update the ...

  5. UVA1660 电视网络 Cable TV Network

    题目地址:UVA1660 电视网络 Cable TV Network 枚举两个不直接连通的点 \(S\) 和 \(T\) ,求在剩余的 \(n-2\) 个节点中最少去掉多少个可以使 \(S\) 和 \ ...

  6. 【转】Python之面向对象与类

    [转]Python之面向对象与类 本节内容 面向对象的概念 类的封装 类的继承 类的多态 静态方法.类方法 和 属性方法 类的特殊成员方法 继承层级关系中子类的实例对象对属性的查找顺序问题 一.面向对 ...

  7. 旷视科技 -- Face++ 世界最大的人脸识别技术平台

    旷视科技 -- Face++ 世界最大的人脸识别技术平台: https://www.megvii.com/

  8. mac技巧之常用的快键键

    1.修改文件名 选中文件按return键即可修改文件名. 2.文件预览 选中文件按照空格键即可实现文件的预览(并不是打开文件) 3.任务之间进行切换 command+tab 4.复制文件 推动文件按照 ...

  9. Linux下的压缩和解压缩命令gzip/gunzip

    作者:邓聪聪 Linux下的压缩和解压缩命令——gzip/gunzip yum -y install zip gzip (--安装压缩工具) gzip命令 gzip命令用来压缩文件.gzip是个使用广 ...

  10. 微信小程序开发记录

    顶栏banner代码 /**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-it ...