效果图：

不废话直接上代码：

 <!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. sort的用法

    早一段时间一直没有理解sort的用法,在早几天终于是研究的明白的,所以就来分享一下,如果你也被这个方法困扰,没懂原理,可以看一下这遍文章,希望有所帮助. 第一种,最简单的排序,纯数字排序: var a ...

  2. Angular.js-2入门

    1.angular与MVC MVC即Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界 ...

  3. 部署laravel项目

    1 先登录到服务器上,将代码克隆下来 git clone 项目地址 2 避免composer太慢,启用本镜像服务 可以先安装 apt-get install zip,unzip,php7.0-zip ...

  4. STM32（10）——窗口看门狗

    简介: 窗口看门狗(WWDG)通常被用来监测由外部干扰或不可预见的逻辑条件造成的应用程序背离正常的运行序列而产生的软件故障.除非递减计数器的值在 T6 位 (WWDG->CR 的第六位)变成 0 ...

  5. Leecode刷题之旅-C语言/python-203移除链表元素

    /* * @lc app=leetcode.cn id=203 lang=c * * [203] 移除链表元素 * * https://leetcode-cn.com/problems/remove- ...

  6. 简单R语言爬虫

    R爬虫实验 R爬虫实验 PeRl 简单的R语言爬虫实验,因为比较懒,在处理javascript翻页上用了取巧的办法. 主要用到的网页相关的R包是: {rvest}. 其余的R包都是常用包. libra ...

  7. R语言爬虫：爬取百度百科词条

    抓取目标:抓取花儿与少年的百度百科中成员信息 url <- "http://baike.baidu.com/item/%E8%8A%B1%E5%84%BF%E4%B8%8E%E5%B0 ...

  8. 北京Uber优步司机奖励政策（4月9日）

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  9. [数据结构]_[C/C++]_[链表的最佳创建方式]

    场景 1.链表在C/C++里使用非常频繁, 因为它非常使用, 可作为天然的可变数组. push到末尾时对前面的链表项不影响. 反观C数组和std::vector, 一个是静态大小, 一个是增加多了会对 ...

  10. VINS（七）estimator_node 数据对齐 imu预积分 vision

    首先通过vins_estimator mode监听几个Topic(频率2000Hz),将imu数据,feature数据,raw_image数据(用于回环检测)通过各自的回调函数封装起来 ros::Su ...