jQuery放大镜

最新推荐文章于 2023-01-14 21:47:59 发布

zhrookie

最新推荐文章于 2023-01-14 21:47:59 发布

阅读量427

点赞数 1

分类专栏： jquery 文章标签： jq实际应用

本文链接：https://blog.csdn.net/zhrookie/article/details/69261751

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery版的放大镜，这里就直接贴上源码好了，主要还是对于事件和选择器的理解和掌握，有问题希望大家能够提出来，本博主菜鸟一个。望大神们体谅：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .magnify{
            width: 200px;
            margin: 50px auto;
            position: relative;
        }
        /*创建玻璃放大镜的效果*/
        .large{
            width: 175px;
            height: 175px;
            position: absolute;
            border-radius: 100%;
            /*处理放大镜的玻璃效果和阴影效果*/
            box-shadow: 0 0 0 7px rgba(255,255,255,0.85),0 0 7px rgba(0,0,0,0.25),inset 0 0 40px 2px rgba(0,0,0,0.25);
            /*载入大图*/
            background: url(img/iphone.jpg) no-repeat;
            /*默认不显示*/
            display: none;
        }
        /*显示*/
        .small{
            display: block;
        }
    </style>
    <script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<div class="magnify">
    <div class="large"></div>
    <img class="small" src="img/iphone.jpg" width="200" alt="iPhone" />
</div>
<script>
    /*图像初始宽高*/
    var native_width = 0;
    var native_height = 0;
    $(".magnify").mousemove(function (e) {
        /*判断图像宽高不为0*/
        if(!native_width&&!native_height){
            //创建一个新的图像对象，并将小图像的url赋值给对象从而获取小图片的宽高
            var image_obj=new Image();
            image_obj.src=$(".small").attr("src");
            /*console.log(image_obj);*/
            //将新建的图片对象的宽高设置为全局变量
            native_width=image_obj.width;
            native_height=image_obj.height;
        }else{
            //返回当前鼠标相对于窗口xy轴的位置，并处理放大镜跟随鼠标事件
            var magnify_offset=$(this).offset();
            var mx=e.pageX-magnify_offset.left;
            var my=e.pageY-magnify_offset.top;
            //判断鼠标是否在容器之外
            if(mx<$(this).width()&&my<$(this).height()&&mx>0&&my>0)
            {
                $(".large").fadeIn(100);
            }
            else
            {
                $(".large").fadeOut(100);
            }
            if($(".large").is(":visible"))  //如果.large元素可见
            {
                //通过鼠标在小图像上的位置变化，改变大图像背景的位置。计算出鼠标的像素比例，按照比例调整大图像的位置
                var rx=Math.round(mx/$(".small").width()*native_width-$(".large").width()/2)*-1;
                var ry=Math.round(my/$(".small").height()*native_height-$(".large").height()/2)*-1;
                var bgp=rx+"px "+ry+"px";
                //鼠标移动放大镜的参数
                var px=mx-$(".large").width()/2;
                var py=my-$(".large").height()/2;
                //鼠标移动放大镜时，需要扣除一半的放大镜高宽，才能保持鼠标处于放大镜的中间
                //将计算结果输出到html中，实现移动放大镜
                $(".large").css({
                    left: px,
                    top: py,
                    backgroundPosition: bgp
                })

            }
        }
    })
</script>
</body>
</html>

zhrookie

关注

1
点赞
踩
0

收藏

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

jQuery版的放大镜，这里就直接贴上源码好了，主要还是对于事件和选择器的理解和掌握，有问题希望大家能够提出来，本博主菜鸟一个。望大神们体谅：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>放大镜</title> <style> *{ margi
复制链接

扫一扫