首页 » 前端技术 » js实现鼠标移动放大图片功能

js实现鼠标移动放大图片功能

高蒙 2017/02/24 18:06 1.8k浏览 0评论 jQuery/js


在项目需要实现用js实现鼠标移动放大图片功能。如下图:

20170224175443.jpg120170224180321.jpg

通过上图可以发现几个要求:

  • 1、图片始终要贴底边展示。

  • 2、第一张需要向右侧展示,其他则反之。不然会出现撑破浏览器最大的宽度,出现滚动条。

具体的实现代码如下:

样式:

<style>
#tooltip {position: absolute;display: none;width: 550px;height: 550px;background-color: white;box-shadow: 0 0 10px #6d6d6d;}
#tooltip img {width:100%;height:100%;vertical-align: middle;}
</style>

html:

<div class="picture">
    <ul>
        <li>
            <div class="pic" data-index="1">
                <a href="" target="_blank">
                    <img  src="./201702/20170207124643_58995133e7d5f.jpg" data="201702/20170207124643_58995133e7d5f.jpg">
                </a>
            </div>
        </li>
        <li>
            <div class="pic" data-index="2">
                <a href="" target="_blank" >
                    <img  src="./201611/20161121110618_583264aa60359.jpg" data="201611/20161121110618_583264aa60359.jpg">
                </a>
            </div>
        </li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

javascript:

<script>
    // 鼠标跟随放大
    var handler = false;
    var timerIn = null;
    var timerOut = null;
    var x = 10;
    var y = 20;
    $('.picture ul li .pic').mouseover(function (e) {
        timerOut && clearTimeout(timerOut);
        timerIn = setTimeout(function () {
            handler = true;
        }, 200);
        var pic = $(this).find('a img').attr('data');
        var tooltip = "<div id='tooltip'><img src='" + pic + "'></div>";
        $("body").append(tooltip);
        if (handler) {
            $("#tooltip").css({
                "top": (e.pageY + y) + "px",
                "left": (e.pageX + x) + "px"
            });
        }
    }).mouseout(function () {
        timerIn && clearTimeout(timerIn);
        timerOut && clearTimeout(timerOut);
        timerOut = setTimeout(function () {
            handler = false;
        }, 1);
        $("#tooltip").remove();
    }).mousemove(function (e) {
        if (!handler) return false;
        var dataindex = $(this).attr('data-index');
        //获取window可以看到的高度
        var lookheight = $(window).height();
        var scrtop = $(document).scrollTop();
        //可看高度加顶部高度就是总高度;
        var Alltop = lookheight + scrtop;
        // 总高度减去y的高度等于现现在的位置
        var top = Alltop - 570 - 20;
        if (e.pageY > top) {
            e.pageY = top;
        }
        if (dataindex ==1 || dataindex == 5) {
            var leftright = (e.pageX + x) + "px";
        } else {
             var leftright = (e.pageX - 570) + "px";
        }
        $("#tooltip").css({
            "top": (e.pageY + y) + "px",
            "left": leftright
        }).show();
    });
</script>


更新于2017-02-28

通过上面的方法,会出现图片模糊的问题,那么这里将使用js缩小居中,可以完整的展现出图片。

如图:

QQ截图20170228173242.jpg

css替换:

#tooltip{z-index:999;position:absolute;width:550px;height:550px;background:#fff;padding:10px;box-shadow:0 3px 10px rgba(0,0,0,.3)}#tooltip
img{width:100%;height:100%;vertical-align:middle}

js替换:

var tooltip = "<div id='tooltip'><div style='width: 550px;height: 550px;'><img src='" + pic + "' onload=\"ImgPosInitMobs(this,2);\"></div></div>";

新加js方法:

//图片缩放方法
function ImgPosInitMobs(obj, type) {
    var img = $(obj);
    if (typeof obj.naturalWidth != "undefined") {
        var realWidth = obj.naturalWidth;
        var realHeight = obj.naturalHeight;
         var standwidth=$(obj).parent().parent().width();
         var standheight=$(obj).parent().parent().height();
        if (type == 2) {
            if (realWidth/realHeight > standwidth/standheight) {
                var realWidth1 =standwidth;
                var realHeight1=standwidth * realHeight / realWidth;
            }else {
                var realHeight1=standheight;
                var realWidth1=standheight * realWidth / realHeight;
            }
            img.width(realWidth1);
            img.height(realHeight1);
        }
        img.css("margin-top", -(realHeight1 - standheight) / 2);
        img.css("margin-left", -(realWidth1 - standwidth) / 2);
    }else {
        var imageobj = new Image();
        imageobj.onload = function () {
            var realWidth = imageobj.width;
            var realHeight = imageobj.height;
            var standwidth=$(obj).parent().parent().width();
             var standheight=$(obj).parent().parent().height();
            if (type == 2) {
                if (realWidth > realHeight) {
                    var realWidth1 =standwidth;
                    var realHeight1=standwidth * realHeight / realWidth;
                }else {
                    var realHeight1=standheight;
                    var realWidth1=standheight * realWidth / realHeight;
                }
            }
            img.width(realWidth1);
            img.height(realHeight1);
            img.css("margin-top", -(realHeight1 - standheight) / 2);
            img.css("margin-left", -(realWidth1- standwidth) / 2);
        }
        imageobj.src = obj.src;
    }
}





相关文章

我有话说

站长昵称:(*)

输入内容:

选个头像:

评论列表

    ...

    高蒙

    男, PHP程序猿

    文章

    485

    标签

    42

    热度

    10w+

    南京, 江苏, 中国

    人生要是没有理想, 那跟咸鱼有什么分别。