效果图：

不废话直接上代码：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>test</title>

     <style type="text/css">

         * {

             padding: 0;

             margin: 0;

         }

         ul{

             position: relative;

             width: 500px;

             /*height: 500px;*/

             margin: 50px;

         }

         li{

             width: 500px;

             height: 500px;

             /*position: absolute;*/

         }

         .div {

             border: 1px solid;

             position: relative;

             /*margin: 50px;*/

             height: 500px;

             width: 500px;

         }

         .div img {

             width: 500px;

             height: 500px;

         }

         .span {

             width: 100px;

             height: 100px;

             position: absolute;

             background: red;

             display: none;

             cursor: all-scroll;

             opacity: 0.1;

         }

         .show {

             height: 550px;

             width: 550px;

             position: relative;

             left: 502px;

             top: -505px;

             overflow: hidden;

             /*display: none;*/

         }

         .show img {

             position: absolute;

             width: 1500px;

             height: 1500px;

         }

     </style>

 </head>

 <body>

 <ul>

     <li >

         <div class="div">

             <img src="sjxq01_boom.jpg">

             <span class="span"></span>

             <div class="show">

                 <img class="show_img" src="sjxq01_boom.jpg">

             </div>

         </div>

     </li>

     <li >

         <div class="div" style="display: none">

             <img src="sjxq3_boom.jpg">

             <span class="span"></span>

             <div class="show">

                 <img class="show_img" src="sjxq3_boom.jpg">

             </div>

         </div>

     </li>

 </ul>

 <script type="text/javascript" src="jquery.min.js"></script><script src="demo.js"></script>

 </body> </html>

js代码：

  $(document).ready(function () {

         (function () {

                      var mouseX,   //鼠标光标X坐标

 　　　　　　　　　　　　 mouseY,

 　　　　　　　　　　　　 divX,   //最外层DIV X坐标

 　　　　　　　　　　　　　divY,

 　　　　　　　　　　　　 spanX,   //放大镜 X坐标

 　　　　　　　　　　　　　spanY,

 　　　　　　　　　　　　　divW,   // 最外层 DIV 宽度

 　　　　　　　　　　　　　divH,　　

 　　　　　　　　　　　　　scrY,  //滚动条卷去的高度

              div = $(".div");

             div.on("mousemove", function (e) {

                 $(this).find(".span").show();

                 $(this).find(".show").show();

                 scrY=document.body.scrollTop||document.documentElement.scrollTop;

                 divW = div.width();

                 divH = div.height();

                 mouseX = e.originalEvent.x || e.originalEvent.layerX || 0;

                 mouseY = e.originalEvent.y || e.originalEvent.layerY || 0;

                 divY = $(this).offset().top;

                 divX = $(this).offset().left;

                 spanX = mouseX - divX - 50;

                 spanY = mouseY - divY - 50+scrY;

                 if ((spanX + 100) > divW) {

                     spanX = 400;

                 }

                 if ((spanY + 100) > divW) {

                     spanY = 400;

                 }

                 if (spanX < 0) {

                     spanX = 0;

                 }

                 if (spanY < 0) {

                     spanY = 0;

                 }

if(mouseX > (divW+divX)){
                     $(this).find(".span").hide();
                     $(this).find(".show").hide();
                  }

                 $(this).find(".span").css('left', spanX).css('top', spanY);

                 $(this).find(".show_img").css("left", -3 * spanX).css('top', -3 * spanY);

             });

             div.on("mouseout", function () {

                 $(this).find(".span").hide();

                 $(this).find(".show").hide();

             });

             div.on("mouseover", function () {

             });

         })();

     });

jQuery实现仿京东商城图片放大镜的更多相关文章

  1. ThinkPHP3.2开发仿京东商城项目实战视频教程

    ThinkPHP3.2仿京东商城视频教程实战课程,ThinkPHP3.2开发大型商城项目实战视频 第一天 1.项目说明 2.时间插件.XSS过滤.在线编辑器使用 3.商品的删除 4.商品的修改完成-一 ...

  2. 完美高仿精仿京东商城手机客户端android版源码

    完美高仿精仿京东商城手机客户端android版源码,是从安卓教程网那边转载过来的,这款应用源码非常不错的,也是一个非常优秀的应用源码的,希望能够帮到学习的朋友. _js_op> <igno ...

  3. 商城项目实战 | 2.2 Android 仿京东商城——自定义 Toolbar (二)

    本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. 上一篇文章<商城项目实战 | 2.1 Android 仿京东商城 ...

  4. 01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建：(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案)

    Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目 功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目 首页布局以及不同 ...

  5. 商城项目实战 | 1.1 Android 仿京东商城底部布局的选择效果 —— Selector 选择器的实现

    前言 本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. 京东商城的底部布局的选择效果看上去很复杂,其实很简单,这主要是要 ...

  6. 商城项目实战 | 2.1 Android 仿京东商城——自定义 Toolbar (一)

    前言 本文为菜鸟窝作者刘婷的连载."商城项目实战"系列来聊聊仿"京东淘宝的购物商城"如何实现. 现在很多的 APP 里面都有自己的自定义风格,特别是京东商城中自 ...

  7. jquery实现仿京东侧边栏

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 18 Flutter仿京东商城项目 商品详情顶部tab切换 顶部下拉菜单 底部浮动导航

    ProductContent.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; ...

  9. 17 Flutter仿京东商城项目 保存历史搜索记录 删除历史记录 清空历史记录 长按删除

    Storage.dart import 'package:shared_preferences/shared_preferences.dart'; class Storage{ static Futu ...

随机推荐

  1. wait();notify();简单例子

    public class Test1{ /** * @param args */ public static void main(String[] args) { new Thread(new Thr ...

  2. mysql 支持四字节设置

    设置文件mysql/bin/my.ini[mac用户在ect文件夹里创建文件my.cnf] 添加以下代码: [mysqld] character-set-server=utf8mb4

  3. react-router-dom和本地服务本地开发 (node、webpack)

    场景 使用react 做开发,避免会使用react-router React Router 已经是V4的版本 React Router 目前已经被划分成了三个包:react-router,react- ...

  4. jquery仿移动端支付宝键盘

    最近做项目时碰到一个需求,就是在移动端支付页面点击支付按钮弹出一个支付键盘,类似于支付宝的那种.由于项目只是单纯的手机网站,而并非app,所以这个功能得由前端来实现.话不多说,先上图看看效果. 尼玛, ...

  5. [].slice.call的理解

    首先要说明[].slice.call()与Array.prototype.slice.call() 有什么区别? [].slice === Array.prototype.slice true []为 ...

  6. 【C】switch-case里面，加或不加break的区别

    int test; test = ; switch(test) { : test++; printf("value = 0"); // 打印printf,后续没有break代码,系 ...

  7. Python学习5——基本格式化输出

    整数的格式化输出 十进制.八进制.十六进制 num01 = 100 print("十进制输出:%d"%num01) print("八进制输出:%o"%num01 ...

  8. centos7 杂记

    yum 源 https://www.cnblogs.com/renpingsheng/p/7845096.html 安装nginx php mysql https://www.cnblogs.com/ ...

  9. 使用bison和yacc制作脚本语言(1)

    使用bison和yacc制作脚本语言(1) 环境: 环境 windows 10 Cygwin64 语言 C 工具 mingw bison flex 主要是使用bison和flex这两个软件,编译器无所 ...

  10. ACM数论-欧几里得与拓展欧几里得

    ACM数论——欧几里得与拓展欧几里得 欧几里得算法: 欧几里德算法又称辗转相除法,用于计算两个整数a,b的最大公约数. 基本算法:设a=qb+r,其中a,b,q,r都是整数,则gcd(a,b)=gcd ...