示例：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. hashMap源码解析（四）

    ---恢复内容开始--- 在上文中讲到了putval这个方法,这里继续: final V putVal(int hash, K key, V value, boolean onlyIfAbsent, ...

  2. DNN-HMM

    <<DNN-HMM.docx>>

  3. 彻底解决CDH5.12安装过程中 Error: JAVA_HOME is not set and Java could not be found

    1 详细报错 + cat+======================================================================+| Error: JAVA_HO ...

  4. 【Thymeleaf】Thymeleaf模板对没有结束符的HTML5标签解析出错的解决办法

    解决方案 spring: thymeleaf: mode: LEGACYHTML5 <dependency> <groupId>net.sourceforge.nekohtml ...

  5. DedeCMS找后台目录漏洞

    参考文章 https://xianzhi.aliyun.com/forum/topic/2064 近期,学习的先知社区<解决DEDECMS历史难题--找后台目录>的内容,记录一下. 利用限 ...

  6. php编程 之 php基础二

    1,if...else...语句 规则简介: if 语句 - 在条件成立时执行代码 if...else 语句 - 在条件成立时执行一块代码,条件不成立时执行另一块代码 if...elseif....e ...

  7. Log4j日志根据配置输出到多个自定义文件

    最近工作中遇到所有日志需要记录到一个文件,而错误的sql执行记录到另一个文件中,查询了一些资料搞定,记录下来.顺便吐槽下公司限制印象笔记的使用. ##log4j.rootLogger=INFO, CO ...

  8. SLAM数据集整理

    New College Dataset :: Main / Downloads Autonomous Space Robotics Lab: Devon Island Rover Navigation ...

  9. 2018牛客暑期ACM多校训练营第二场（有坑未填）

    第二场终于等来学弟 开始(被队友带飞)的开心(被虐)多校之旅 A   run A题是一个递推(dp?)+前缀和 因为看数据量比较大 就直接上前缀和了 一个比较简单的递推 没有太多难点 签到题 需要注意 ...

  10. Linker Scripts3--简单的链接脚本命令2-Assigning Values to Symbols

    1.前言 本章继续讲述简单脚本命令的后半部分 2.Assigning Values to Symbols 你可以给一个符号(symbol)赋值,它会把这些定义的符号放入全局符号表(symbols ta ...