示例：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. 关于Java 实现抽象类的抽象方法的特性的利用---面向切面

    今天看工作看代码突然有了以下设想: /** * Created by zq on 2017/5/25. * 抽象类 */ public abstract class AbstractC { publi ...

  2. Liunx/RHEL6.5 Oracle11 安装记录

    1.创建用户组 groupadd oinstall #创建用户组oinstall groupadd dba #创建用户组dba useradd -g oinstall -g dba -m oracle ...

  3. CSS3里的瀑布流效果

    页面伸缩之后,内部的布局会自动缩放,高度不同的内容也会自动以垂直瀑布的效果平铺. 下面就是一部分代码: CSS: /*大层*/ .container{width:%;margin: auto;} /* ...

  4. truncate、delete、drop区别

    语法: truncate table 表名 delete from 表名 drop table 表名 应用范围: truncate 只能对表,且不能用于参与了索引的表,不能用于外键约束引用的表 del ...

  5. Fragment和FragmentActivity的使用方法

    认识:首先我们知道Fragment是我们在单个Activity上要切换多个UI界面,显示不同内容.模块化这些UI面板以便提供给其他Acitivity使用便利.同时我们显示的Fragment也会受到当前 ...

  6. [转]python3之paramiko模块（基于ssh连接进行远程登录服务器执行命令和上传下载文件的功能）

    转自:https://www.cnblogs.com/zhangxinqi/p/8372774.html 阅读目录 1.paramiko模块介绍 2.paramiko的使用方法 回到顶部 1.para ...

  7. MySQL入门简介（转载）

    转载链接:https://www.cnblogs.com/webnote/p/5753996.html MySQL的相关概念介绍 MySQL 为关系型数据库(Relational Database M ...

  8. tar.gz压缩，查看，解压

    本次使用的压缩格式是*.tar.gz,用到的命令如下: 压缩: tar -czf jpg.tar.gz *.jpg //将目录里所有jpg文件打包成jpg.tar后,并且将其用gzip压缩,生成一个g ...

  9. Node.js的模块系统

    编写稍大一点的程序时一般都会将代码模块化.Node.js提供了一个简单的模块系统.模块既可能是一个文件,也可能是包含一个或多个文件的目录. 模块的创建  如果模块是个文件,一般将代码合理拆分到不同的J ...

  10. Liunx 网络神器之抓包 --tcpdump

    作者:邓聪聪 简介 用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中 ...