js实现图片局部放大效果

时间: 2018-04-25阅读: 3418标签: 图片

图片局部放大效果结合的知识点主要是DOM的操作,以及事件的应用,所以首先要对DOM的操作有一定了解,其次能对事件的应用有一定的累积。 


如上图,可以看到,这是放大镜的基本效果,主要分成左右两个部分。左边分成一张大图,和一个导航栏,在右边则是一个放大镜放大后的图片。因此,我在画页面的时候,大体的html结构如下: 

<body>
    <div class="choose">
        <div class="content">
            <img src="images/small1.jpg" id = "small">
            <div class="shadow"></div>
        </div>
        <ul id = "listshow">
            <li class="selected">
                <img src="images/small1.jpg" data-img = "images/big1.jpg" alt="">
            </li>
            <li>
                <img src="images/small2.jpg" data-img = "images/big2.jpg" alt="">
            </li>
            <li>
                <img src="images/small3.jpg" data-img = "images/big3.jpg" alt="">
            </li>
            <li>
                <img src="images/small4.jpg" data-img = "images/big4.jpg" alt="">
            </li>
        </ul>
    </div>
    <div class="larger">
        <img src="images/big1.jpg" id = "big">
    </div>
</body>


在这个时候,将静态页面按常规方式进行布局,给予css样式如下:  

<style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .choose{
            width: 400px;
            height: 600px;
            float: left;
            margin:50px 0 0 50px;
        }
        .content{
            width: 400px;
            height: 400px;
            position: relative;
        }

        .content img {
            width: 400px;
            height: 400px;
        }
        #listshow{
            width: 400px;
            height: 100px;
            margin-top: 20px;
        }
        #listshow li{
            width: 98px;
            height: 100px;
            float: left;
            border:1px solid #666;
        }
        #listshow li img{
            width: 98px;
            height: 100px;
        }
        #listshow .selected{
            border-color: brown;
        }
        .larger{
            width: 400px;
            height: 400px;
            position: absolute;
            top: 50px;
            left: 500px;
            float: left;
            overflow: hidden;
            display: none;
        }
        #big{
            width: 800px;
            height: 800px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .shadow{
            width: 200px;
            height: 200px;
            background-color: rgba(145,200,200,.4);
            position: absolute;
            left: 0;
            top: 0;
            z-index: 10;
            display: none;
        }
    </style>


那么这个时候,开始写js样式,分布书写的话,第一步要考虑到左边的选项卡。选项卡我采用直接使用src赋值的方法,将滑过的图片对应的src给大图,代码呈现:  

for(var i = 0;i<showli.length;i++){
        var showitem = showli[i];
        showitem.onmouseover =showitem.onclick =  function(e){
            let evt = window.event||e;
            for(var j =0;j<showli.length;j++){
                showli[j].className = "";
            }
            var showimg = this.getElementsByTagName("img")[0];
            var imgsrc = showimg.src;
            small.src = imgsrc;
            var bigsrc = showimg.getAttribute("data-img");
            big.src = bigsrc;
            this.className = "selected";
        }
    }


这样就可以成功实现选项卡功能,比较简单粗暴的一种方式,当然,大家使用selected结合点击下标和大图下标相等的这一点,也一样可以做出来。

接下来要考虑到,鼠标在大图上移动时,遮罩层的移动效果。值得一提的时候,这个地方其实存在一个视觉上的误区,看起来是在滑动遮罩层,其实是鼠标的滑动,而遮罩层通过获取鼠标的clientX,clientY来确定自己的位置,遮罩层位置获取代码

content.onmousemove = function (e) {
        var evt = window.event||e;

        larger.style.display = "block";
        shadow.style.display = "block";
        var clientX = evt.clientX;
        var clientY = evt.clientY;

        var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
        var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

        var X = clientX+scrollLeft-chooseMarginL-shadowW/2;
        var Y = clientY+scrollTop-chooseMarginT-shadowH/2;

        if(X<=0){
            X = 0;
        }
        if(X>=maxX){
            X = maxX;
        }
        if(Y<=0){
            Y = 0;
        }
        if(Y>=maxY){
            Y = maxY;
        }
//        防止遮罩层粘滞,跟随鼠标一起滑出大图位置
        var bigX = X*bigW/contentW;
        var bigY = Y*bigH/contentH;
//  bigX / bigW = X / contentW,主图和遮罩层之间存在两倍关系,放大图和原图之间也有两倍关系
        shadow.style.left = X+"px";
        shadow.style.top = Y+"px";

        big.style.left = -bigX+"px";
        big.style.top = -bigY+"px";

    }


在这里,计算较多,尤其要注意遮罩层阴影,主图以及放大图之间的倍数关系。到这里,基本功能就实现了,这里面涉及的计算可以适当配图理解,尤其注意点击位置的获取。

转载:https://www.cnblogs.com/galio/archive/2018/04/24/8933964.html

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/707

用padding-top实现图片的自适应展示

要使图片等比例展示,需要将图片宽度和高度以一个基准来计算。 padding-top用%单位时,表示占父元素宽度的百分比。基于此,将一个元素的高度用padding-top %表示时,就可以等比例展示一个元素

css怎么设置图片平铺方式?

background-repeat属性是用来设置背景图像如何平铺的。默认地,背景图像在水平和垂直方向上重复,背景图像的位置是根据 background-position 属性设置的

nodejs实现二维码生成及图片合成

前端需要做分享功能。生成二维码后 在指定的图片上添加二维码和邀请码生成新的图片。1.使用 qr-code生成二维码;2.使用 text-to-svg 生成邀请码图片,字符转图片;3.使用gm工具合成图片

前端解决第三方图片防盗链的办法 - html referrer 访问图片资源403问题

笔者网站的图片都是上传到第三方网站上的,比如 简书、掘金、七牛云上的,但是最近简书和掘金都开启了 防盗链,防止其他网站访问他们网站上的图片了,导致笔者的网站存在他们网站上的图片全挂了

javascript如何实现图片隐藏?

javascript中可以通过将图片display属性设置为none实现图片隐藏。display属性设置元素如何显示,其语法为Object.style.display=value。

谈谈 Web 图片浏览体验与优化

图片,在一张网页上起到了相当大的作用。一个充满艺术的网站,它们的排版往往十分简洁、大方,整张网页的美感全体现在了一张背景图和产品图=== 而在浏览这样的网页时,其响应速度决定了用户体验。如果你正在打开一个自己比较感兴趣的网站

css实现不定宽高的图片img居中裁剪_类似微信朋友圈图片效果

前端需要显示矩形的缩略图,接口返回的图片尺寸大小不一,宽高不相等,需要前端来处理并显示成正方形,类似微信朋友圈图片的效果。那么使用纯css该如何实现不定宽高的图片居中裁剪呢?

js处理img标签加载图片失败,显示默认图片

如果已经引入了jquery插件,就很好办。没有的话,如果实在需要,可以附上代码,如果img标签是少量的话,可以用这个 img的onerror事件:

JS实现图片放大镜功能

将一个小图放置在一个小盒子里,当鼠标在小盒子里移动时,出现一个移动块,右侧出现一个大盒子,显示出小盒子中移动块所在区域的等比例放大的图片内容。基本实现思路为:右侧大盒子为一个可视区域,有左侧小盒子中的图片的等比例放大图片,通过计算图片需要移动的距离来显示出想要放大的内容,超出部分设置为隐藏。

HTML img src图片路径不存在,则显示一张默认图片的方法

我们一般会给图片设置 alt 属性,当图片路径不存在时可以显示提示文字。但是这样很不好看,如果用在文章列表,我们可以给 img 标签设置一个 onerror 属性,可以在 src 路径不存在时显示指定的默认图片

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!