这个特效平时生活中很常见，话不多说先上效果图。

首先布局，遮罩层是这个效果中的重点精华，也就是下面代码中的shade.

<style>

* { margin:0px; padding:0px;}

#box { width:400px; height:400px; border:5px solid #CCC; margin:100px auto; position:relative;}

#box .simg {width:400px; height:400px; position:relative;}

#box .simg span.move { width:150px; height:150px; background:red; position:absolute; top:0; left:0; display:block; filter:alpha(opacity=50); opacity:0.5; display:none;}

#box .simg span.shade { width:100%; height:100%; position:absolute; top:0; left:0;filter:alpha(opacity=40); opacity:0.4;}

#box .bimg { width:300px; height:300px; position:absolute; left:430px; top:50px; overflow:hidden; display:none;}

#box .bimg img { position:absolute;}

</style>

</head>

<body>

<div id="box">

    <div class="simg">

        <img src="data:images/simg.jpg"/>

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

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

    </div>

    <div class="bimg"><img src="data:images/bimg.jpg"/></div>

</div>

接下来是JS部分，在实现放大的效果时，小图滑动的比例与大图定位时的相对应的ｔｏｐ，ｌｅｆｔ，是效果的关键。

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

<script>

    $(function(){

        $(".shade").hover(function(){

            $(".move").show();

            $(".bimg").show();

            },function(){

            $(".move").hide();

            $(".bimg").hide();

                });

        $(".shade").mousemove(function(e){

            var l=e.clientX;

            var t=e.clientY;

            var _top=t-$("#box").offset().top-$(".move").height()/2+"px";

            var _left=l-$("#box").offset().left-$(".move").width()/2+"px";

            //不让从上面和下面出去

            if(parseInt(_top)<0){

                _top=0+'px';

                }else if(parseInt(_top)>parseInt($("#box").height()-$(".move").height())){

                    _top=parseInt($("#box").height()-$(".move").height())+"px";

                    }

            //不让从两边出去

            if(parseInt(_left)<0){

                _left=0+"px";

                }else if(parseInt(_left)>parseInt($("#box").width()-$(".move").width())){_left=parseInt($("#box").width()-$(".move").width())+'px';}

            $(".move").css({top:_top,left:_left});

            //小图可滑动的比例

            var hd_x=parseInt(_left)/parseInt($("#box").width()-$(".move").width());

            var hd_y=parseInt(_top)/parseInt($("#box").height()-$(".move").height());

            //大图对应的top left

            var bm_left=($(".bimg img").width()-$(".bimg").width())*hd_x;

            var bm_top=($(".bimg img").height()-$(".bimg").height())*hd_y;

            $(".bimg img").css({top:-bm_top,left:-bm_left});

            });        

        });

</script>

最后写的有点快，代码不够简洁，注释也挺恶心，有时间修正。

JQ实战天猫淘宝放大镜的更多相关文章

  1. Python天猫淘宝评论爬虫

    说明 由于Github 打包的exe某些文件上传被.gitignore了,所以不提供windows二进制包 https://github.com/hunterhug/taobaocomment 一个抓 ...

  2. js 实现淘宝放大镜功能，可更改配置参数 带完整版解析代码[magnifier.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝放大镜效果 基本功能: 运 ...

  3. Android自己定义控件实战——仿淘宝商品浏览界面

    转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38656929 用手机淘宝浏览商品详情时,商品图片是放在后面的,在第一个Scr ...

  4. Android自定义控件实战——仿淘宝商品浏览界面

    转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38656929 用手机淘宝浏览商品详情时,商品图片是放在后面的,在第一个Scr ...

  5. jq仿淘宝放大镜插件

    html部分 //小图 <div id="photoBox"> <img src="图片路径" width="400" h ...

  6. 仿天猫淘宝的ShopNC好商城原生Android 客户端源码项目

    开发环境:Android Studio 2.0 | Gradle 2.0.0最后更新:2016-04-28 简介:基于好商城V4的Android客户端 目前已完成的功能(概述): 1.启动页 -> ...

  7. JQ实现仿淘宝条件筛选

    首先看下效果: Js代码: <script type="text/javascript"> $(".search_qxxx > ul > li & ...

  8. python推荐淘宝物美价廉商品 2.0

    改动: 新增功能 :可选择只看天猫或淘宝 代码模块化封装,参数配置或输入单独在一个py文件管理,主函数功能只留出参数传入在setting配置的py文件里. main.py代码: # -*- codin ...

  9. Python爬虫实战八之利用Selenium抓取淘宝匿名旺旺

    更新 其实本文的初衷是为了获取淘宝的非匿名旺旺,在淘宝详情页的最下方有相关评论,含有非匿名旺旺号,快一年了淘宝都没有修复这个. 可就在今天,淘宝把所有的账号设置成了匿名显示,SO,获取非匿名旺旺号已经 ...

随机推荐

  1. 读书笔记 effective c++ Item 7 在多态基类中将析构函数声明为虚析构函数

    1. 继承体系中关于对象释放遇到的问题描述 1.1 手动释放 关于时间记录有很多种方法,因此为不同的计时方法创建一个TimeKeeper基类和一些派生类就再合理不过了: class TimeKeepe ...

  2. 智能打印SDK---官方博客

    (开源准备:开源为百度云打包开源,GIT太慢,SVN没有免费的,TFS有免费的也慢的要命) 开源地址:http://pan.baidu.com/s/1miobLoO 电子商务越来越成熟,提供的服务越来 ...

  3. 解决新建maven项目速度慢的问题

    问题描述 通过idea新建maven项目,参数设置好后,idea自动构建maven项目时,速度很慢. 参数设置如图: 执行时间如下图: Total time为8:49,花了将近十分钟时间. 连续尝试了 ...

  4. 文件系统：ext4,zfs测评结果

    测试环境 操作系统:ubuntu16.04 内核版本: 磁盘: 本人使用的是青云的云主机,磁盘使用的其性能型: Cpu信息: 4核 2399MHz 内存:8G 文件系统: 本人使用的是ubuntu16 ...

  5. 2017 3-4/5 两天的学习的REVIEW

    明天就要去面试啦,去感受一下,估计又是一顿虐,蓝瘦-- 3月4日:计算机安全基础技术与原理方面的学习 密码体制(密码)由五个部分组成: 消息空间(m),密文空间(c),密钥空间(k),加密算法(E), ...

  6. 3404: [Usaco2009 Open]Cow Digit Game又见数字游戏

    3404: [Usaco2009 Open]Cow Digit Game又见数字游戏 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 72  Solved ...

  7. 面向对象的全套“企业微信”api接口的代码实现，网上太多“面向过程”微信api接口的代码，这个开源给需要的人用

    有段时间没有写文章了. 一直以来,微信的热门是看得到的,很多人都需要与微信的api对接. 今天我这里就分享全套的企业微信api接口的代码. 关于微信api,网上已经有很多实现的了. 但是我今天之所以还 ...

  8. 深入理解ajax系列第五篇——进度事件

    前面的话 一般地,使用readystatechange事件探测HTTP请求的完成.XHR2规范草案定义了进度事件Progress Events规范,XMLHttpRequest对象在请求的不同阶段触发 ...

  9. 清理浏览器网站缓存的几种方法（meta,form表单，ajax）

    1.meta方法   HTML header中加入 <meta http-equiv="pragma" content="no-cache"> 说明 ...

  10. Postman使用教程——调试网络接口的凶器

    postman是谷歌浏览器的一个插件,干什么用的呢?跟题目一样,就是用来调试网络接口的.在我们程序猿做程序的时候,如果做网络应用的开发,比如一些B/S.C/S,我们总会给别人一些网络接口,也会使用别人 ...