放大镜操作

最新推荐文章于 2022-05-03 21:37:38 发布

mystraight

最新推荐文章于 2022-05-03 21:37:38 发布

阅读量287

点赞数

分类专栏： jq实例应用文章标签：放大镜-jq实例应用

本文链接：https://blog.csdn.net/qq_35568483/article/details/52234958

版权

jq实例应用专栏收录该内容

1 篇文章 0 订阅

订阅专栏

放大镜 jq 操作一

//html:内容 图片最好是等比例 图片未上传
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
    <div class="box">
        <div class="smallPic">
            <div class="float"></div>
            <img src="img/simg.jpg" alt="">
        </div>

        <div class="bigPic">
            <img src="img/bimg.jpg" alt="">
        </div>

    </div>
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/changBig.js"></script>
</body>
</html>

//css样式
*{
margin:0;
padding: 0;
}
.box{
margin: 100px auto;
width: 900px;
position: relative;
}
.smallPic{
width: 400px;
height: 400px;
background: #abcdef;
border: 5px solid #ccc;
float: left;
position:relative;
left:0;
top:0;
}
.smallPic img{

width: 400px;
height: 400px;

}
.float{
width: 100px;
height: 100px;
position: absolute;
left: 0;
top:0;
border: 2px solid yellow;
display: none;
background: rgba(255,255,255,0.3);

}
.bigPic{
width: 400px;
height: 400px;
position: absolute;
left:450px;

overflow: hidden;
display: none;

}
.bigPic img{
position: absolute;

}
//jq代码；

var changBig = {

dom:{},

init:function(){
    this.initDom();
    this.bindEvent();
},

initDom:function(){
    var dom = this.dom;
        dom.float    = $('.float');
        dom.smallPic = $('.smallPic');
        dom.bigPic   =$('.bigPic');

},
bindEvent:function(){
    var dom =this.dom;
        //hover() 分别指定鼠标移入、移出元素时的事件处理函数。
        dom.smallPic.hover(function(){
            dom.float.show();
            dom.bigPic.show();
        },function(){
            dom.float.hide();
            dom.bigPic.hide();
        });
        //mousemove事件 一定要在图片的父元素上，否则容易出现移动不畅的情况
        dom.smallPic.mousemove(function(e){
            dom.disx = e.clientX;
            dom.disy = e.clientY;
            //浮动块的高度 跟宽度
            var floatW = dom.float.outerWidth();
            var floatH = dom.float.outerHeight();
            //移动位置 鼠标的位置
            var left = dom.disx - (dom.smallPic.find('img').offset().left + floatW/2)
            var top  = dom.disy - (dom.smallPic.find('img').offset().top + floatH/2)
            //判断右 和下出界所用
            var x = dom.smallPic.find('img').width()-floatW;
            var y = dom.smallPic.find('img').height()-floatH;
            if(left < 0){
                left = 0;
            }

            if(left > x){
                left = x;
            }
            if(top < 0){
                top = 0;
            }
            if(top > y){
                top = y;
            }
            //比例计算 是当前的left值与小块可移动的距离比值
            var percentX = left / x;
            var percentY = top / y;
            //大块可移动的距离 * 每次的比例
            dom.left = percentX *(dom.bigPic.find('img').width() - dom.bigPic.width());
            dom.top = percentY *(dom.bigPic.find('img').height() - dom.bigPic.height());

            dom.float.css({'left':left,'top':top});
            dom.bigPic.find('img').css({'left':-dom.left,'top':-dom.top});
        });
}

};

$(function(){
changBig.init();
});

mystraight

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
放大镜操作

放大镜 jq 操作一//html:内容图片最好是等比例图片未上传<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜</title> <link rel="stylesheet" href="css/style.css"/></head><body> <div c
复制链接

扫一扫