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

 jQuery/js   高蒙   阅读(1678)   评论(2)   2017-02-24 18:06:39    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;
    }
}





相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

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


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客