jquery放大镜效果
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jquery图片放大镜插件 - A5源码</title> <link rel="stylesheet" type="text/css" href="css/zzsc.css"> <script type="text/javascript" class="library" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" class="library" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascript" class="library" src="js/zzsc.js"></script> <body>
<div class="con-FangDa" id="fangdajing">
<div class="con-fangDaIMg">
<!-- 正常显示的图片-->
<img src="data:images/big/1.jpg">
<!-- 滑块-->
<div class="magnifyingBegin"></div>
<!-- 放大镜显示的图片 -->
<div class="magnifyingShow"><img src="data:images/big/1.jpg"></div>
</div> <ul class="con-FangDa-ImgList">
<!-- 图片显示列表 -->
<li class="active"><img src="data:images/thumb/1.jpg" data-bigimg="images/big/1.jpg"></li>
<li><img src="data:images/thumb/2.jpg" data-bigimg="images/big/2.jpg"></li>
<li><img src="data:images/thumb/3.jpg" data-bigimg="images/big/3.jpg"></li>
<li><img src="data:images/thumb/4.jpg" data-bigimg="images/big/4.jpg"></li>
<li><img src="data:images/thumb/5.jpg" data-bigimg="images/big/5.jpg"></li>
</ul>
</div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://down.admin5.com/info/" target="_blank">A5源码</a></p>
</div>
</body>
</html>
css
*{
margin: 0;
padding: 0;
}
/*主容器*/
.con-FangDa{
width: 300px;
height: auto;
margin: 10px auto;
background-color:#fff;
}
/*正常容器*/
.con-fangDaIMg{
width: 300px;
height: 450px;
position: relative;
background-color: #454545;
}
.con-fangDaIMg > img{
width: 100%;
height:100%
}
/*滑块*/
.magnifyingBegin{
width: 150px;
height: 175px;
left: 0;
top: 0;
background-color: #454545;
opacity: 0.5;
filter:alpha(opacity=50);
position: absolute;
cursor: move;
display: none;
}
/*放大镜显示区域*/
.magnifyingShow{
width: 450px;
height: 514px;
display: none;
position: absolute;
right: -470px;
top: 0;
overflow: hidden;
background-color: #454545;
}
.magnifyingShow > img{
width: 900px;
height: 1350px;
margin-left:0;
margin-top: 0;
}
/*设置选择图片容器*/
.con-FangDa-ImgList{
margin-top:10px;
height:54px;
width:320px;
list-style: none;
}
.con-FangDa-ImgList > li{
margin-right:7px;
width: 50px;
height: 50px;
float: left;
cursor: pointer;
border: 2px solid #666;
background-color: #454545;
text-align:center;
}
.con-FangDa-ImgList > li > img{
vertical-align:top;
display:inline;
width:auto;
height:50px;
}
.con-FangDa-ImgList > .active{
border-color:#000;
}
js
$(function(){
$.fn.magnifying = function(){
var that = $(this),
$imgCon = that.find('.con-fangDaIMg'),//正常图片容器
$Img = $imgCon.find('img'),//正常图片，还有放大图片集合
$Drag = that.find('.magnifyingBegin'),//拖动滑动容器
$show = that.find('.magnifyingShow'),//放大镜显示区域
$showIMg = $show.find('img'),//放大镜图片
$ImgList = that.find('.con-FangDa-ImgList > li >img'),
multiple = $show.width()/$Drag.width();
$imgCon.mousemove(function(e){
$Drag.css('display','block');
$show.css('display','block');
//获取坐标的两种方法
// var iX = e.clientX - this.offsetLeft - $Drag.width()/2,
// iY = e.clientY - this.offsetTop - $Drag.height()/2,
var iX = e.pageX - $(this).offset().left - $Drag.width()/2,
iY = e.pageY - $(this).offset().top - $Drag.height()/2,
MaxX = $imgCon.width()-$Drag.width(),
MaxY = $imgCon.height()-$Drag.height();
/*这一部分可代替下面部分，判断最大最小值
var DX = iX < MaxX ? iX > 0 ? iX : 0 : MaxX,
DY = iY < MaxY ? iY > 0 ? iY : 0 : MaxY;
$Drag.css({left:DX+'px',top:DY+'px'});
$showIMg.css({marginLeft:-3*DX+'px',marginTop:-3*DY+'px'});*/
iX = iX > 0 ? iX : 0;
iX = iX < MaxX ? iX : MaxX;
iY = iY > 0 ? iY : 0;
iY = iY < MaxY ? iY : MaxY;
$Drag.css({left:iX+'px',top:iY+'px'});
$showIMg.css({marginLeft:-multiple*iX+'px',marginTop:-multiple*iY+'px'});
//return false;
});
$imgCon.mouseout(function(){
$Drag.css('display','none');
$show.css('display','none');
});
$ImgList.click(function(){
var NowSrc = $(this).data('bigimg');
$Img.attr('src',NowSrc);
$(this).parent().addClass('active').siblings().removeClass('active');
});
}
$("#fangdajing").magnifying();
});
之前看到过用canvas实现类似的放大镜效果，过两天抽时间我会整理下分享上来；
源码来源：A5源码
jquery放大镜效果的更多相关文章
- 关于jQuery中实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
- jQuery实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
- 使用jquery实现放大镜效果
原文:使用jquery实现放大镜效果 实现原理 首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置. 方法二:对原图片进行放大,也就是调整 ...
- jquery+js实现鼠标位移放大镜效果
jQuery实现仿某东商品详情页放大镜效果 用jquery+js实现放大镜效果,效果大概如下图! 效果是不是大家很感兴趣,放大镜查看细节,下边大家可以详细看一看具体是怎么实现的.下边直接看代码! HT ...
- js、jquery实现放大镜效果
在一些电商网站的商品详情页面,都会有放大镜效果,实现起来并不是很困难,今天用了两个小时,写了一个放大镜效果的实例,来分享给大家! 实现的效果大概是这个样子的 预览 先来看一下效果吧,点击下面的链接预览 ...
- [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3
本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...
- 基于Jquery的商城商品图片的放大镜效果(非组件)
在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...
- jQuery实现图片放大镜效果
实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...
- 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果
实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...
随机推荐
- （转）ORA-12519: TNS:no appropriate service handler found 的问题处理。
很多时候出现:ORA-12519: TNS:no appropriate service handler found 都是由于当前的连接数已经超出他能够处理的最大值了. 处理方法如下:摘自网上. se ...
- Linux如何查看与/dev/input目录下的event对应的设备
1.查看当前的设备 dev/input/ 2.查看设备的名称 cat /proc/bus/input/devices
- Android 下拉刷新
以前旧版用的是开源的PullToRefresh第三方库,该库现在已经不再维护了: chrisbanes/Android-PullToRefreshhttps://github.com/chrisban ...
- 【翻译二十三】java-并发程序之随机数和参考资料与问题（本系列完）
Concurrent Random Numbers In JDK 7, java.util.concurrent includes a convenience class, ThreadLocalRa ...
- 无废话ExtJs 入门教程七[登陆窗体Demo：Login]
无废话ExtJs 入门教程七[登陆窗体Demo:Login] extjs技术交流,欢迎加群(201926085) 在这节我们通过前几节讲的内容做一个登陆页面,把前几节讲的内容贯穿一下. 1.代码如下: ...
- ML 06、感知机
机器学习算法 原理.实现与实践 —— 感知机 感知机(perceptron)是二分类的线性分类模型,输入为特征向量,输出为实例的类别,取值+1和-1.感知机学习旨在求出将训练数据进行线性划分的分离超 ...
- python客户端编程
上一篇说了最为底层的用来网络通讯的套接字.有很多基于套接字的一些协议,这些协议构成了当今互联网大多数客户服务器应用的核心 其实这些协议时在套接字上面的进一层封装用来完成特定的应用,这些应用主要包括: ...
- Hibernate一对一映射关联
Hibernate提供了两种一对一映射关联关系的方式: 1)按照外键映射 2)按照主键映射 下面以员工账号表和员工档案表(员工账号和档案表之间是一对一的关系)为例,介绍这两种映射关系,并使用这两种 映 ...
- JSHint配置详解
Also available on Github JSHint配置详解 增强参数(Enforcing Options) 本类参数设为true,JSHint会产生更多告警. bitwise 禁用位运算符 ...
- zookeeper源码分析（一） 工作原理
来自:http://www.codedump.info/?p=207 阅读zookeeper代码一段时间(注:是很长一段时间,断断续续得有半年了吧?)之后,我要开始将一些积累下来的东西写下来了,鉴于我 ...