JQ实战天猫淘宝放大镜
这个特效平时生活中很常见,话不多说先上效果图。
首先布局,遮罩层是这个效果中的重点精华,也就是下面代码中的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部分,在实现放大的效果时,小图滑动的比例与大图定位时的相对应的top,left,是效果的关键。
<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实战天猫淘宝放大镜的更多相关文章
- Python天猫淘宝评论爬虫
说明 由于Github 打包的exe某些文件上传被.gitignore了,所以不提供windows二进制包 https://github.com/hunterhug/taobaocomment 一个抓 ...
- js 实现淘宝放大镜功能,可更改配置参数 带完整版解析代码[magnifier.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝放大镜效果 基本功能: 运 ...
- Android自己定义控件实战——仿淘宝商品浏览界面
转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38656929 用手机淘宝浏览商品详情时,商品图片是放在后面的,在第一个Scr ...
- Android自定义控件实战——仿淘宝商品浏览界面
转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38656929 用手机淘宝浏览商品详情时,商品图片是放在后面的,在第一个Scr ...
- jq仿淘宝放大镜插件
html部分 //小图 <div id="photoBox"> <img src="图片路径" width="400" h ...
- 仿天猫淘宝的ShopNC好商城原生Android 客户端源码项目
开发环境:Android Studio 2.0 | Gradle 2.0.0最后更新:2016-04-28 简介:基于好商城V4的Android客户端 目前已完成的功能(概述): 1.启动页 -> ...
- JQ实现仿淘宝条件筛选
首先看下效果: Js代码: <script type="text/javascript"> $(".search_qxxx > ul > li & ...
- python推荐淘宝物美价廉商品 2.0
改动: 新增功能 :可选择只看天猫或淘宝 代码模块化封装,参数配置或输入单独在一个py文件管理,主函数功能只留出参数传入在setting配置的py文件里. main.py代码: # -*- codin ...
- Python爬虫实战八之利用Selenium抓取淘宝匿名旺旺
更新 其实本文的初衷是为了获取淘宝的非匿名旺旺,在淘宝详情页的最下方有相关评论,含有非匿名旺旺号,快一年了淘宝都没有修复这个. 可就在今天,淘宝把所有的账号设置成了匿名显示,SO,获取非匿名旺旺号已经 ...
随机推荐
- phpcms如何做企业站--> 替换首页最初操作
首先用一个静态首页的模板,通过cms进行替换做成一个有后台的 首页的替换流程首先要先把静态网页做出来,拿这个页面去替换 页面所有的文件都在这,做静态页面的文件 现在要做的是把这些文件复制一下拿到php ...
- 纪中集训 Day 6
今天他们回去了,就剩我和DWJ(一位初三大大(后来问云神才知道的ORZ))一起在做题,不得不说他真的是太厉害了,一个升初三大大在各种方面都比我强QAQ 让我突然感觉到自己的高一还是不够努力啊QAQ 连 ...
- 自定义checkbox, radio样式
17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color. ...
- 从SHAttered事件谈安全
大新闻? 在刚刚过去的2017年2月23日,Cryptology Group at Centrum Wiskunde & Informatica (CWI)和Google的研究人员公开了2个P ...
- C#开发step步骤条控件
现在很多的javascript控件,非常的不错,其中step就是一个,如下图所示: 那么如何用C#来实现一个step控件呢? 先定义一个StepEntity类来存储步骤条节点的信息: public c ...
- jquery的ajax提交后,会跳转页面
今天在写代码的时候,遇到一个很奇怪的问题,一个form表单,用的是ajax的方式提交.结果,在服务器端php中,使用exit(),函数后都不能停止,并且继续跳转到本页.请求如下: 第一个请求中,其实我 ...
- 网络信息安全攻防学习平台 上传,解密通关writeup
上传关 [1]查看源代码,发现JS代码.提交时onclick进行过验证.ctrl+shift+i 打开开发者工具,将conclick修改为 return True,即可以上传上传php文件,拿到KEY ...
- 内嵌Tomcat的Connector对象的静态代码块
在排查问题的过程中发现Connector对象有一个静态代码块: static { replacements.put("acceptCount", "backlog&quo ...
- SQL一次查出相关类容避免长时间占用表(下)
/* server: db: EDI */ -- 以下案例多次查询同一张表,仅有Name条件不同 --可以使用一次查出相关类容避免长时间占用表 USE EDI GO DECLARE @FileType ...
- redux三个基本原则
(1)单一数据源:整个应用的state被存储在一棵object tree中,并且这个object tree只存在于唯一一个store中: (2)state是只读的:唯一改变state的方法就是触发ac ...