jQuery实现天猫商品放大镜效果

本文实例为大家分享了jQuery实现天猫商品放大镜效果的具体代码，供大家参考，具体内容如下

思路：

1、分四部分：产品主图，用来定位的小框，放大图，和产品不同侧面的小图
2、定位的小框定位在产品主图元素上，放大图定位在右侧，当鼠标进入产品主图时小框和放大图显示出来。
3、放大图元素大小应与产品主图大小一样，设置放大图图片大小为主图大小的放大倍数，小框跟随鼠标移动，小框偏移地址多少，放大图偏移地址应是其负数，只显示小框区域的图片。
4、使小框跟随鼠标移动而移动，即获取鼠标当前位置，计算小框定位的top 、left值，并判断范围使其不超出主图元素大小。
5、将小框的top、left值获取给放大图，使其显示小框所在范围，注意！！放大图是主图的几倍top、left值也扩大相应倍数，并且值应是负数，小框右移，放大图图片应该左移，从而达到效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>产品页面</title>
<script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" > 
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" rel="external nofollow" >
<style type="text/css">
*{
margin:0;
padding:0;
}
.product{
margin-left:50px;
width:400px;
}
.product-img{
margin:20px auto;
text-align:center;
}
.showimg{
position:relative;
width:400px;
height:400px;
border:1px solid #f5f5f5;
}
.show{
width:400px;
height:400px;
}
.product-img img{
margin:0 3px;
width:60px;
height:60px;
border:2px solid #FFF;
}
.showbox{
position:absolute;
top:0;
left:0;
opacity:0.5;
cursor:move;
width:200px;
height:200px;
background-color:lightblue;
display:none;
}
.showlarge{
position:absolute;
overflow:hidden;
top:0;
left:420px;
width:400px;
height:400px;
border:1px solid #f5f5f5;
display:none;
}
.showlarge img{
width:800px;
height:800px;
position:absolute;
}
</style>
<script>

$(function() {
    //鼠标移入产品小图事件
    $(".product-img img").mouseenter(function(){//鼠标悬浮在不同的产品小图片时外加黑色边框并且主图将其显示出来
        $(".product-img img").css({"border":"2px solid #FFF"});
        $(this).css({"border":"2px solid #000"});//this获取的是当前鼠标移入的元素，设置黑色边框
        var imgsrc=$(this).attr("src");//获取当前鼠标移入元素的src属性值将其赋值给主图元素
        $(".show").attr("src",imgsrc);
        $(".showlarge img").attr("src",imgsrc);//将鼠标选中的图传给放大图元素的src属性
    });
    //鼠标移入产品主图时出现放大的细节图和小框 
    $(".showimg").mouseenter(function(){
        $(".showbox").show();
        $(".showlarge").show();
    });
    //鼠标在产品主图移动事件
    $(".showimg").mousemove(function(e){
        var mousex=e.clientX;//获取鼠标当前对于浏览器可视区的X坐标
        var mousey=e.clientY;
        var imgx=$(".showimg").offset().left;//获得产品主图对于文档的偏移坐标
        var imgy=$(".showimg").offset().top;
        //小框的left值是鼠标位移减去产品图元素偏移坐标减去小框宽度的一半，使鼠标保持位于小框的中间
        var boxleft=mousex-imgx-$(".showbox").width()/2;//计算小框对于产品主图元素的距离用来定位
        var boxtop=mousey-imgy-$(".showbox").height()/2;
        //鼠标移动小框位置跟着变化
        $(".showbox").css({"top":boxtop,"left":boxleft});
        //计算小框移动的最大范围
        var maxtop=$(".showimg").height()-$(".showbox").height();
        var maxleft=$(".showimg").width()-$(".showbox").width();
        //判断小框移动的边界
        if(boxtop<=0){
            $(".showbox").css("top","0");
        }else if(boxtop>maxtop){
            $(".showbox").css("top",maxtop);
        }
        if(boxleft<=0){
            $(".showbox").css("left","0");
        }else if(boxleft>maxleft){
            $(".showbox").css("left",maxleft);
        }
        //设置放大图的位置偏移量，获取小框偏移量乘放大倍数，注意！！！放大图偏移量应设置为负值
        var showleft=-$(".showbox").position().left*2;//position()方法返回当前元素相对于父元素的位置（偏移）
        var showtop=-$(".showbox").position().top*2;
        //此处获取小框偏移量不应该使用前面计算出来的boxtop和boxleft值，因可能会出现超出移动的边界
        $(".showlarge img").css({"left":showleft,"top":showtop});
    });
    //鼠标离开产品主图元素事件，此处使用mouseleave事件只有在鼠标指针离开被选元素时才会触发，mouseout鼠标指针离开被选元素和其任何子元素都会触发。
    $(".showimg").mouseleave(function(){
        $(".showbox").hide();//小框隐藏
        $(".showlarge").hide();//放大图隐藏
    });
    
});
</script>
</head>
<body>
<div class="product">
<div class="showimg">
<img class="show" src="images/product3.png">
<div class="showbox"></div>
<div class="showlarge">
<img src="images/product3.png">
</div>
</div>
<div class="product-img">
<img src="images/product3.png">
<img src="images/product3-2.png">
<img src="images/product3-3.png">
<img src="images/product3-2.png">
<img src="images/product3-3.png">
</div>
</div>
</body>
</html>

效果如图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 用JQuery模仿淘宝的图片放大镜显示效果

    用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放大镜效果超漂亮噢

    jquery放大镜效果超漂亮噢

    这个放大镜的代码挺简单滴效果也不错. 复制代码 代码如下: <script> //QQ:496928838 微凉 $(function(){ $("#demo").enlarge( { // 鼠标遮罩层样式 shadecolor: "#FFD24D", shadeborder: "#FF8000", shadeopacity: 0.4, cursor: "move", // 大图外层样式 layerwidth: 4

  • 基于jquery的商品展示放大镜

    直接上代码吧(一共也才100来行,小东西) 复制代码 代码如下: $(document).ready(function() { _el("biggerPic").style.marginLeft = (0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) + "px"; _el(&

  • 基于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; //移动的X百分比 var perY = 0; //移动的Y百分比 var bigLeft

  • jquery图片放大镜功能的实例代码

    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插件开发之图片放大镜效果(仿淘宝)

    基于Jquery插件开发之图片放大镜效果(仿淘宝)

    需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部分大! 思索:为了考虑开发速度,最先考虑的是想使用网络上的现成代码!但是大致搜索了一下,网上可用的代码并不多,而且部分效果并不理想!而且有些代码,估计阅读下来比自己写一个成本还要高,于是产生了自己写一个jquery的插件的想法! 原理:最起考虑的原理是,两张图片,一张小图,一张大图,先获取鼠标在小图上面的坐标,然后以一个div来显示大图,并根据小图的坐标乘以大图除以小图得到的倍数定位!开始是把大图设为平铺不重复北景,然后使用背景的p

  • 使用jquery实现放大镜效果

    实现原理 首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置. 方法二:对原图片进行放大,也就是调整原图的长和宽. 上面我们介绍了通过两种方式实现放大镜效果,接下来,我们将以上的两种方式应用到我们的jQuery插件中. 首先,我们需要一个img元素显示原图对象,还需要一个容器作为显示框:显示框里面存放大图对象.当鼠标移动到原图上时,通过对大图进行绝对定位来显示对应的部位,实现类似放大镜的效果. 接下来,让我们定义Index.html页

  • 关于Jqzoom的使用心得 jquery放大镜效果插件

    下面是完整的代码 jqzoom打包下载地址 复制代码 代码如下: <html> <head> <title>JQzoom Demo</title> <script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="../js/jqzoom.pack.1.0.1.js"

  • Jquery实现图片放大镜效果的思路及代码(自写)

    Jquery实现图片放大镜效果的思路及代码(自写)

    网上一大堆限制多,文档也难看懂,而且麻烦~自己写了个.大笑 算法: 第一步: 放大图片的位置=鼠标所在的容器的宽或者高除以容器自身的高度和宽度,求出鼠标在容器中移动的百分比 第二部: 得到百分比之后 x=-(x百分比*图片的宽度-显示容器的宽度/2); y=-(y百分比*图片的高度-显示容器的高度/2); 两个参数,x和y,就是大图的位置了,后面加了个显示容器的大小/2 是为了保证图片显示在中间. 效果图:  代码: 复制代码 代码如下: <!DOCTYPE HTML> <html>

  • jQuery实现放大镜效果实例代码

    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; //移动的

随机推荐