示例：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. luogu 2878 贪心

    其实这题不难,只是想告诉自己:贪心不全是真的脑残拿最大就AC 此题实际上就是比较x,y优先级利用时间计算得到a[i]t/a[i].d(没错时间在上,并非惯性思维的d在上) t*a[x].d+(t+a[ ...

  2. core.net 创建coreclass 项目出现一些问题

    错误如下: Project CoreTest does not have a lock file. Please run "dotnet restore" to generate ...

  3. ue4 笔记

    关卡场景内的模型在运行中,改变构建脚本后无法立即更新模型骨骼中心点碰到物理边缘 physcX会出问题 bug 纹理启用碰撞会与碰撞顶点冲突 造成效果不正确 IsInGameThread() 渲染时 会 ...

  4. CSS面试复习（一）：HTML强化

    1. HTML常见元素和理解 head类 meta:字符集.base:路径. a[href,target] img[src,alt] table td[colspan,rowspan] form[ta ...

  5. call,apply和bind的区别

    call,apply继承并调用该函数,bind继承后未调用函数. var React = require('react'); //核心 var ReactDom = require('react-do ...

  6. C&C++动态分配内存（手动分配内存）三种方式

    1. malloc函数 函数原型:void *malloc(unsigned int size)函数的作用是:在内训的动态存储区开辟一个size个字节的连续空间,返回所分配区域的首字节地址. 可以看到 ...

  7. 阿里巴巴Java开发手册中的DO、DTO、BO、AO、VO、POJO定义

    分层领域模型规约: DO( Data Object):与数据库表结构一一对应,通过DAO层向上传输数据源对象. DTO( Data Transfer Object):数据传输对象,Service或Ma ...

  8. android图片绘制

    1.基本圆角.边框 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android=& ...

  9. SQL Server - 索引详细教程 （聚集索引，非聚集索引）

    转载自:https://www.cnblogs.com/hyd1213126/p/5828937.html 作者:爱不绝迹 (一)必读:深入浅出理解索引结构 实际上,您可以把索引理解为一种特殊的目录. ...

  10. 8.3版本提示未在本地计算机上注册 Microsoft.ACE.OLEDB.12.0 提供程序

    这个原因是8.3版本推出了64位程序,但是Access驱动在64位系统上默认是没有安装的,需要下载一个组件安装即可. 下载2010 Access 驱动程序:数据连接组件安装 http://www.ba ...