本篇博文用于简单记录图片放大功能实现,供大家参考,具体内容如下

功能实现还存在一些小漏洞在文章结尾提出,希望各位指正

1、图片放大初考虑将图片转换为字体图片形式,然后进行放大处理,但最终本人技术不过关无法实现,后用width: 200%;进行一般的图片放大,所以当图片越大就存在一些失真;

2、图片放大后的显示为本次实现的关键,通过获取鼠标指针的位置从而获取指针在图片的那一个位置,再以当前位置进行图片放大,放大后将图片进行偏移,偏移量以鼠标指针在原图的位置上获取的left和top值乘以放大倍数就可以显示局部放大的功能了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="https://www.atool.online/js/jquery-1.10.2.js" ></script>
        <style>
            *{margin: 0;padding: 0;}
            .div1{
                width: 450px;
                height: 300px;
                overflow: hidden;
                display: inline-block;
            }
            .div1>img{width: 100%;}
            .div2{
                width: 450px;
                height: 300px;
                border: 1px solid #A9A9A9;
                overflow: hidden;
                display: inline-block;
                position: relative;
            }
            .div2>img{
                position: absolute;
                width: 200%;
                height: 200%;
            }
            .list1{
                width: 70px;
                height: 50px;
                float: left;
                margin-left: 10px;
            }
            .list1>img{width: 100%;}
            #zhezhao{
                width: 100px;
                height: 100px;
                background: #BC8F8F;
                opacity: 0.7;
                display: none;
                position: absolute;
            }
        </style>
    </head>
    <body>
        <div class="div1">
            <img src="https://www.atool.online/img/wall1.jpg" alt="" class="img1" />
            <div id="zhezhao"></div>
        </div>
        <div class="div2"></div>
        <div class="list">
            <div class="list1">
                <img src="https://www.atool.online/img/wall2.jpg" alt="" class="listimg1" />
            </div>    
            <div class="list1">
                <img src="https://www.atool.online/img/wall3.jpg" alt="" class="listimg2" />
            </div>    
            <div class="list1">
                <img src="https://www.atool.online/img/wall4.jpg" alt="" class="listimg3" />
            </div>    
            <div class="list1">
                <img src="https://www.atool.online/img/wall6.jpg" alt="" class="listimg4" />
            </div>    
            <div class="list1">
                <img src="https://www.atool.online/img/wall5.jpg" alt="" class="listimg5" />
            </div>
        </div>
        
        <script>
            $(function(){
                $('.list1').mouseover(function(){
                    $('.div1').children()[0].src = $(this).children()[0].src;
                });
                $('.div1').mousemove(function(e){                    
                    $('#zhezhao').css({
                        left: e.clientX-50+'px',
                        top: e.clientY-50+'px',
                        display: 'block'
                    });
                    var $img = $('.div1').children().eq(0);
                    $('.div2').empty();
                    $('.div2').append($img.clone());
                    $('.img1').css({
                            left: -(e.clientX-50)*2+'px',
                            top: -(e.clientY-50)*2+'px'
                        });
                    if(50>e.clientX||e.clientX>450||50>e.clientY||e.clientY>300) {
                        $('#zhezhao').css({
                            display: 'none'
                        });
                    }else{ //(400<e.clientX&&e.clientX<450||250<e.clientY&&e.clientY<300) 
                        $('#zhezhao').css({
                            left: e.clientX-50+'px',
                            top: e.clientY-50+'px',
                            display: 'block'
                        });
                    }
                });
            });
        </script>
    </body>
</html>

本功能在具体操作上还存在一些问题,当鼠标快速移开原图区域时,无法有效的监听到鼠标移出区域的事件,在考虑使用移出事件时,鼠标悬浮于原图上的遮罩层影响力鼠标在原图上的移出事件,无法很好的解决,希望各位帮忙移出事件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部