jQuery：案例11 放大镜效果

栏目: jQuery · 发布时间: 6年前

内容简介：动画：1、鼠标移入显示区图片时，显示选择框；2、放大镜特效，将图片位于选择框内的部分放大显示；

动画：

1、鼠标移入显示区图片时，显示选择框；

2、放大镜特效，将图片位于选择框内的部分放大显示；

3、点击下方小图片和左右移动按钮时正确的显示图片

实现方法：

1、放大效果：放大区的与显示区使用相同的图片，并设置放大区图片的长宽为显示区的二倍；

2、选择框拖动效果：鼠标移动时获得鼠标的坐标，并根据选择框的和图片的offset()属性计算出选择框的新位置。同时修改放大区图片的位置，使其与选择框内的部分对应；

3、点击小图片效果：修改小图片的class改变其样式，同时修改显示区和放大区图片的src显示对应的图片；

4、左移按钮：点击时通过each函数找到当前显示的图片，然后判断是否为第一张图片，如果是第一张图片则将最后一张图片设置为要显示的图片，修改其样式，同时修改显示区和放大区图片的src显示对应的图片。若果不是第一张图片，则将前一张图片设置为要显示的图片，修改其样式，同时修改显示区和放大区图片的src显示对应的图片；

5、右移按钮：原理有左移按钮相同。

（详见下方代码）

动画效果：

jQuery：案例11 放大镜效果 

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <script src="../jquery.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
    <div class="box">
        <div class="normal"><img src="images/1.jpg" alt="图片">
        <div class="kuang"></div>
        </div>
        <div class="small">
            <div class="left"><img src="images/left.gif" alt="left"></div>
            <div class="right"><img src="images/right.gif" alt="right"></div>
            <div class="item">
            <ul>
                <li class="selected"><img src="images/1.jpg" alt="图片"></li>
                <li><img src="images/2.jpg" alt="图片"></li>
                <li><img src="images/3.jpg" alt="图片"></li>
                <li><img src="images/4.jpg" alt="图片"></li>
                <li><img src="images/5.jpg" alt="图片"></li>
            </ul>
            </div>
        </div>
    </div>
    <div class="big"><img src="images/1.jpg" alt="图片"></div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

css代码

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
#container{
    margin: 50px auto;
    width: 1000px;

}
.box{
    position: relative;
    float: left;
    width: 400px;
    height: 380px;
}
.normal{
    position: relative;

    width: 400px;
    height: 300px;
}
.normal img{
    width: 400px;
    height: 300px;
}
.small{
    margin-top: 10px;
    width: 400px;
    height: 60px;

}
.small .left{
    position: relative;
    float: left;
    width: 10px;
    height: 60px;
}
.small .right{
    position: relative;
    float: right;
    width: 10px;
    height: 60px;
}
.item ul li{
    position: relative;
    float: left;
    margin-left: 5px;
    padding: 1px;
    width: 66px;
    height: 40px;
    border: 1px solid #ccc;
}
.item ul li img{

    width: 100%;
    height:100%;
}
.big{
    display: none;
    position: relative;
    float: left;
    margin-left: 20px;
    width: 400px;
    height: 300px;
    overflow: hidden;
}
.big img{
    position: relative;
    left: 0;
    top: 0;
    width: 800px;
    height: 600px;
}
.box .kuang{
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 150px;
    opacity: 0.5;
    background: #00f;
}
.item ul .selected{
    border: 1px solid orange;
}

jQuery代码

$(document).ready(function () {
    //当鼠标进入图片时显示放大框和放大图像
    $(".normal").mouseenter(function () {
        $(".kuang").show();
        $(".big").show();
    })
    //当鼠标离开图片时隐藏放大框和放大图像
    $(".normal").mouseleave(function () {
        $(".kuang").hide();
        $(".big").hide();
    })
    //按下鼠标拖动放大框，右侧放大显示图片位于放大框内的部分
    $(".kuang").mousedown(function (e) {
        x=e.pageX-$(this).offset().left;
        y=e.pageY-$(this).offset().top;
       // console.log($(this).offset().top);
        //console.log(y);
        $(document).on("mousemove",function(e){
             
            var _x=e.pageX-x-$(".box").offset().left;
            var _y=e.pageY-y-$(".box").offset().top;

            //设置_x和_y的范围
            if (_x<0){
                _x=0;
            }else if (_x>200){
                _x=200;
            }
            if (_y<0){
                _y=0;
            } else if(_y>150){
                _y=150;
            }
                $(".kuang").css({"left": _x, "top": _y});
                $(".big img").css({"left":-2*_x,"top":-2*_y});
        })
    })
    //鼠标抬起时停止取消拖动
    $(document).mouseup(function () {
        $(document).off("mousemove");
    })
    //点击左侧下方小图片时，左侧上方显示相应的图片，且左侧放大区也更改为与小图片对应的图片
    $(".item ul li img").click(function () {
        $(this).parent().addClass("selected")
        $(this).parent().siblings().removeClass("selected");
        $(".normal img").attr("src",$(this).attr("src"));
        $(".big img").attr("src",$(this).attr("src"));

    });
    //点击向左按钮，选中当前显示图片的前一张图片，小图片样式做相应的修改。图片显示区和右侧图片放大区都改为前一张图片
    $(".left").click(function () {
        $(".small li").each(function (index,value) {
            if($(value).attr("class")=="selected"){
                //如果当前显示第一张图片，则点击向左按钮时显示最后一张图片
                if(index==0){
                    $(value).removeClass("selected")
                    $(".small li").eq(4).addClass("selected");
                    $(".normal img").attr("src",$(".small li").eq(4).children().eq(0).attr("src"));
                    $(".big img").attr("src",$(".small li").eq(4).children().eq(0).attr("src"));
                    return false;
                }
                if (index>0) {
                    $(value).removeClass("selected").prev().addClass("selected");
                   console.log($(value).prev().children().eq(0).attr("src"));
                    $(".normal img").attr("src",$(value).prev().children().eq(0).attr("src"));
                    $(".big img").attr("src",$(value).prev().children().eq(0).attr("src"));
                }
            }

        })

    });
    //点击向右按钮，选中当前显示图片的下一张图片，小图片样式做相应的修改。图片显示区和右侧图片放大区都改为下一张图片
    $(".right").click(function () {
        $(".small li").each(function (index,value) {
            if($(value).attr("class")=="selected"){
                //如果当前显示最后一张图片，则点击向右按钮时显示第一张按钮
                if(index==4){
                    $(value).removeClass("selected")
                    $(".small li").eq(0).addClass("selected");
                    $(".normal img").attr("src",$(".small li").eq(0).children().eq(0).attr("src"));
                    $(".big img").attr("src",$(".small li").eq(0).children().eq(0).attr("src"));
                    return false;
                }
                if (index<4) {
                    $(value).removeClass("selected").next().addClass("selected");
                    $(".normal img").attr("src",$(value).next().children().eq(0).attr("src"));
                    $(".big img").attr("src",$(value).next().children().eq(0).attr("src"));
                    return false;
                }
            }

        })

    });

})

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

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
Go Web 编程

Go Web 编程

[新加坡]Sau Sheong Chang(郑兆雄) / 黄健宏 / 人民邮电出版社 / 2017-11-22 / 79

《Go Web 编程》原名《Go Web Programming》，原书由新加坡开发者郑兆雄（Sau Sheong Chang）创作、 Manning 出版社出版，人名邮电出版社引进了该书的中文版权，并将其交由黄健宏进行翻译。 《Go Web 编程》一书围绕一个网络论坛 作为例子，教授读者如何使用请求处理器、多路复用器、模板引擎、存储系统等核心组件去构建一个 Go Web 应用，然后在该应用......一起来看看 《Go Web 编程》 这本书的介绍吧!

码农工具
随机密码生成器
随机密码生成器

多种字符组合密码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2025 码农网 粤ICP备17054400号-3