示例：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. 利用ssh操控远程服务器

    这里的”远程”操控的方法实际上也不是真正的远程.,這此操作方法主要是在一个局域网内远程操控电脑 (在一个路由器下).可以把它做成在互联网中的远程操控, 不过技术难度上加了一个等级, 如果你想是想人在公 ...

  2. Linux 查看系统版本和内核

    查看系统内核版本 [root@11e71db4a00e /]# cat /proc/version Linux version -.el7.x86_64 (builder@kbuilder.dev.c ...

  3. luogu P3240 [HNOI2015]实验比较

    传送门 首先根据题目条件,题目中如果是=的点可以缩起来,然后\(a<b\)连边\(a\rightarrow b\),而且所有点入度为最多1,那么判掉有环的不合法情况,题目中的依赖关系就是一颗外向 ...

  4. linux 根据Pid获取 进程内容

    ps -ef | grep 753 | grep -v 'grep' | awk '{print $NF}'

  5. mkyaffs2image 生成不了120M的镜像文件的解决方法

    下载链接:   http://download.csdn.net/download/macrocrazier/3807761 用上述下载的链接会出现Failed to execute /linuxrc ...

  6. Log4Net配置日志

    1.log4net 1)新建一个Net空白项目,在引用出点击管理NuGet程序包,搜索log4net并安装 2)建立log4net.config配置文件 在configuration里面添加如下代码, ...

  7. python编程 之 PyMysql包接口，python中如何使用数据库

    1,环境介绍 要求:使用数据库TESTDB.EMPLOYMENT EMPLOYEE表字段为 FIRST_NAME, LAST_NAME, AGE, SEX 和 INCOME. 2,基本用法: impo ...

  8. 什么是联机分析处理（OLAP）

    OLAP的提出引起了很大的反响,OLAP作为一类产品同联机事务处理 (OLTP) 明显区分开来. 当今的数据处理大致可以分成两大类:联机事务处理OLTP(on-line transaction pro ...

  9. python答题辅助

    最近直播答题app很热门,由于之前看过跳一跳的python脚本(非常棒),于是也想写一个答题的脚本. https://github.com/huanmsf/cai 思路: 1.截图 2.文字识别,提取 ...

  10. C++ Template 编程,泛型编程练习

    #include <iostream> #include <string> #include <deque> #include <stdexcept> ...