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;
                }
            }

        })

    });

})

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

查看所有标签

猜你喜欢:

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

码农书籍
Introduction to Linear Optimization

Introduction to Linear Optimization

Dimitris Bertsimas、John N. Tsitsiklis / Athena Scientific / 1997-02-01 / USD 89.00

"The true merit of this book, however, lies in its pedagogical qualities which are so impressive..." "Throughout the book, the authors make serious efforts to give geometric and intuitive explanations......一起来看看 《Introduction to Linear Optimization》 这本书的介绍吧!

码农工具
URL 编码/解码
URL 编码/解码

URL 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

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