jQuery实现的放大镜效果示例
本文实例讲述了jQuery实现的放大镜效果。分享给大家供大家参考，具体如下：
zoom.css：
*{
padding: 0;
margin: 0;
}
li{
list-style-type: none;
}
.zoom{
margin: 50px;
position: relative;
}
.zoomMiddle{
border: 1px solid #ccc;
width: 300px;
height: 300px;
margin-bottom: 3px;
position: relative;
}
.zoomMiddle img{
width: 300px;
height: 300px;
}
.mask{
width: 100px;
height: 100px;
background: #abcdef;
opacity:0.4;
position: absolute;
left: 0;
top: 0;
display: none;
}
.zoomSmall{
-overflow: hidden;
width: 302px;
height: 54px;
}
.zoomSmall span{
float: left;
height: 52px;
line-height: 52px;
width: 10px;
text-align: center;
border: 1px solid #ccc;
cursor: pointer;
}
.zoomSmall span.disable{
cursor: default;
background: #ccc;
}
.wrapSmallImg{
float: left;
height: 54px;
width: 232px;
/*background: #f00;*/
position: relative;
overflow: hidden;
}
.wrapSmallImg ul{
width: 348px;
/*background: #f00;*/
position: absolute;
left: 0;
top: 0;
}
.wrapSmallImg ul li{
float: left;
width: 50px;
height: 50px;
border: 2px solid #ccc;
margin: 0 2px;
_display: inline;
cursor: pointer;
}
.wrapSmallImg ul li.current{
border: 2px solid orange;
}
.wrapSmallImg ul li img{
width: 50px;
height: 50px;
}
.zoomLarge{
width: 350px;
height: 350px;
border: 1px solid #ccc;
position: absolute;
top: 0;
left: 320px;
overflow: hidden;
display:none;
}
.zoomLarge img{
width: 600px;
height:600px;
position: absolute;
left: 0;
top: 0;
}
zoom.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜</title>
<link rel="stylesheet" href="zoom.css">
</head>
<body>
<input type="text" name="" id="">
<div class="zoom">
<div class="zoomMiddle">
<img src="1.jpg" alt="">
<div class="mask"></div>
</div>
<div class="zoomSmall">
<span class="left disable"><</span>
<div class="wrapSmallImg">
<ul>
<li class="current"><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="6.jpg" alt=""></li>
</ul>
</div>
<span class="right">></span>
</div>
<div class="zoomLarge"><img src="1.jpg" alt=""></div>
</div>
<script src="jquery.js"></script>
<script src="zoom.js"></script>
</body>
</html>
zoom.js：
$(function(){
var smallImgLi = $('.wrapSmallImg ul li');
var smallImgLiLength = smallImgLi.size();
var smallImgLiWidth = smallImgLi.outerWidth(true);
var smallImgUl = $('.wrapSmallImg ul');
var leftBtn = $('span.left');
var rightBtn = $('span.right');
var now = 0;
var zoomMiddleDiv = $('.zoomMiddle');
smallImgLi.mouseover(function(){
$(this).addClass('current').siblings().removeClass('current');
var thisSrc = $(this).children('img').attr('src');
$('.zoomMiddle img').attr('src',thisSrc);
$('.zoomLarge img').attr('src',thisSrc);
});
rightBtn.click(function(){
//当now=2的时候，我们不希望再让他滚动了
leftBtn.removeClass('disable');
if(now>=smallImgLiLength-4){
$(this).addClass('disable');
now = smallImgLiLength-4;
}else{
now++;
smallImgUl.animate({'left':-now*smallImgLiWidth},300);
}
});
leftBtn.click(function(){
if(now==0){
now=0;
}else{
now--;
smallImgUl.animate({'left':'+='+smallImgLiWidth},300);
}
});
zoomMiddleDiv.mousemove(function(e){
$('.mask').show();
$('.zoomLarge').show();
zoomMiddleDivOffset = zoomMiddleDiv.offset();
var x = e.pageX - zoomMiddleDivOffset.left - $('.mask').width()/2;
var y = e.pageY - zoomMiddleDivOffset.top - $('.mask').height()/2;
if(x<=0){
x=0;
}else if(x>=zoomMiddleDiv.width()-$('.mask').width()){
x = zoomMiddleDiv.width()-$('.mask').width();
}
if(y<=0){
y=0;
}else if(y>=zoomMiddleDiv.height()-$('.mask').height()){
y = zoomMiddleDiv.height()-$('.mask').height();
}
var percentageX = x/(zoomMiddleDiv.width()-$('.mask').width());
var percentageY = y/(zoomMiddleDiv.height()-$('.mask').height());
$('.zoomLarge img').css({
left:-percentageX*(600-$('.zoomLarge').width()),
top:-percentageY*(600-$('.zoomLarge').height())
});
$('input').val(percentageX+','+percentageY)
$('.mask').css({
'left':x+'px',
'top':y+'px'
});
});
zoomMiddleDiv.mouseout(function(){
$('.mask').hide();
$('.zoomLarge').hide();
});
});
效果图如下：
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
基于Jquery插件开发之图片放大镜效果(仿淘宝)
需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大! 思索:为了考虑开发速度,最先考虑的是想使用网络上的现成代码!但是大致搜索了一下,网上可用的代码并不多,而且部分效果并不理想!而且有些代码,估计阅读下来比自己写一个成本还要高,于是产生了自己写一个jquery的插件的想法! 原理:最起考虑的原理是,两张图片,一张小图,一张大图,先获取鼠标在小图上面的坐标,然后以一个div来显示大图,并根据小图的坐标乘以大图除以小图得到的倍数定位!开始是把大图设为平铺不重复北景,然后使用背景的p
-
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
1. jquery.jqzoom.js //************************************************************** // jQZoom allows you to realize a small magnifier window,close // to the image or images on your web page easily. // // jqZoom version 2.2 // Author Doc. Ing. Renzi
-
基于jquery的商品展示放大镜
直接上代码吧(一共也才100来行,小东西) 复制代码 代码如下: $(document).ready(function() { _el("biggerPic").style.marginLeft = (0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) + "px"; _el(&
-
用JQuery模仿淘宝的图片放大镜显示效果
如图 今天我做的是利用JQuery模拟这个效果 源码如下 复制代码 代码如下: <head> <script type="text/javascript" src="Js/jquery-1.4.1.js"></script> <script type="text/javascript"> //假设data是从数据库取到的数据 var data = {"images/1_small.jpg&
-
jQuery实现图片局部放大镜效果
下图只是给大家举个例子,类似于这种效果图: 具体实现过程请看下文代码: css .zoomPad{ position:relative; float:left; z-index:99; cursor:crosshair; } .zoomPreload{ -moz-opacity:0.8; opacity: 0.8; filter: alpha(opacity = 80); color: #333; font-size: 12px; font-family: Tahoma; text-decora
-
jquery图片放大镜功能的实例代码
复制代码 代码如下: /*放大镜*/ .ZoomMain {margin:100px;width:395px;height:460px;float:left;position:relative;} .ZoomMain .zoom {height:393px;width:393px;position:relative;border: 1px solid #dcdddd;} .ZoomMain .zoom .move{position:absolute;left:0; top:0;display:n
-
基于jQuery仿淘宝产品图片放大镜特效
在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jquery.zoom等 这些组件大同小异. 大家感兴趣的话可以去百度一下. 本文主要是使用非组件方法来做放大镜效果. 每一张图片都要生成三种尺寸,否则放大镜的效果不会太明显,这里是 54X54 320X320 800X800. 首先看效果:鼠标经过小图时,大图随之切换. 首先是html <div c
-
jQuery实现放大镜效果实例代码
在没给大家做详细文字说明之前,先给大家分享一段简单的jquery实现放大镜效果代码,需要的朋友可以直接拿去代码. $(function(){ var mouseX = 0; //鼠标移动的位置X var mouseY = 0; //鼠标移动的位置Y var maxLeft = 0; //最右边 var maxTop = 0; //最下边 var markLeft = 0; //放大镜移动的左部距离 var markTop = 0; //放大镜移动的顶部距离 var perX = 0; //移动的
-
jquery放大镜效果超漂亮噢
这个放大镜的代码挺简单滴效果也不错. 复制代码 代码如下: <script> //QQ:496928838 微凉 $(function(){ $("#demo").enlarge( { // 鼠标遮罩层样式 shadecolor: "#FFD24D", shadeborder: "#FF8000", shadeopacity: 0.4, cursor: "move", // 大图外层样式 layerwidth: 4
-
基于jQuery仿淘宝产品图片放大镜代码分享
这篇文章主要介绍了jQuery淘宝产品图片放大镜特效,鼠标点击图片,图片放大,特别适合图片细节展示,感兴趣的小伙伴可以参考下. (1)html代码: <div class="box"> <div class="tb-booth tb-pic tb-s310"> <a href="images/01.jpg"> <img src="images/01_mid.jpg" alt="