效果图：

不废话直接上代码：

 <!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. 使用WIn10自带的Linux子系统

    最近一直有安装虚拟机的想法,今天刚刚知道win10有自带的Linux子系统,就准备试一下: 首先要保证自己的电脑处于开发者选项: 然后就要在控制面板的程序和功能页面点击“启用或者关闭WIndows功能 ...

  2. 一道关于js正则表达式的面试题

    这道面试题明显是要用到正则表达式来解决的,由于太久没有写正则表达式了,一时之间竟然写不出来,所以记录一下笔记,下面直接上代码: function parseUrl(str) { // 判断是否传入参数 ...

  3. vue组件间传值详解

    1.父传子----传值要点: <1> 在组件注册的时候必须要使用 return 去返回 data对象;

  4. WEB中需求分析应该考虑的问题

    一． 针对用户群体要考虑因素 1.用户年龄 2.选择素材 3.网站布局 4.颜色搭配 5. 用户体验及动效 6.功能便捷 用户需求.用户兴趣爱好.性格.职业.教育水平高低.消费观念.PC端和移动端哪一 ...

  5. company.scss

    .company{ @extend .layout; width:100%; h3{ display: block; margin: 20px 0; text-align: left; } .comp ...

  6. idea配置SpringBoot热部署之自动Build

    一.pom.xml文件导入所需依赖文件 SpringBoot热部署插件 <dependency> <groupId>org.springframework.boot</g ...

  7. s3c2440系统时钟详解

    一.S3C2440系统时钟体系 S3C2440的时钟控制逻辑可以外接晶振,然后通过内部电路产生时钟源:也可以直接使用内部提供的时钟源,他们通过引脚的设置来选择.时钟逻辑给整个芯片提供了3中时钟:FCL ...

  8. Home Assistant系列美化篇——替换天气 UI

    替换天气组件 weather 的默认 UI,生成美观大方的气象卡片. Home Assistant 原生的天气平台不少,国内用户常用的有雅虎天气和 Darksky.其他论坛和社区也有分享自制的和风.彩 ...

  9. Python学习：11.Python装饰器讲解（二）

    回顾 上一节我们进行了Python简单装饰器的讲解,但是python的装饰器还有一部分高级的使用方式,这一节就针对python装饰器高级部分进行讲解. 为一个函数添加多个装饰器 今天,老板又交给你一个 ...

  10. telnet 批处理

    **** 需要确认多台服务器端口是否打开,如果一个一个telnet会非常麻烦,通过百度,写了两个BAT,基本能做工作需要. ***start.bat start "" " ...