js实现图片局部放大效果

更新日期: 2018-04-25阅读量: 3527标签: 图片

图片局部放大效果结合的知识点主要是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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

JavaScript 实现图片等比缩放

在开发网页的时候少不了图片,展示图片时自然会遇到缩放问题。一般情况下只要我们的图片宽高比例差不多时,缩放是没有问题的,展示不太影响美观。但是有一些网页对这个要求比较高,要求图片不能变形

nodejs如何下载图片?

nodejs可以使用request依赖包来下载图片。需要先安装request依赖,然后使用request向网页发出请求,最后将图片下载到本地。request模块让http请求变的更加简单。(作为客户端,去请求、抓取另一个网站的信息)

js实现图片转base64格式,并压缩上传

需要用户上传身份证,并识别身份证的编号存储在后端,这里要求实现图片上传,并转为base64的格式,传给服务器失败图片的身份证号码。由于很多用户用手机拍摄的照片

图片懒加载及异常处理

在日常页面开发中,常常会涉及到图片的展示。有时候当图片资源过多时,我们希望能将图片延迟加载,同时当图片加载失败后,能用一张默认图片去代替其进行展示

图片降级方案原来这么简单?

在做项目优化的时候,发现页面加载很慢。结果一看主要的问题就是就是图片的大小过慢,然后呢准备呢去做优化, 本来想去用webp,去优化的,但是呢这个图片是不是我们就用不了呢,然后看了下业界优化王

使用 AVIF 图片格式

众所周知,一图胜千言,图片对于视觉的冲击效果远大于文字。但对于我们的互联网而言,传输与解析一张图片的代价要远比千言大的多的多(目前上亿像素已经成为主流)。

图片下载的几种实现

通过浏览器自动下载。浏览器接收到二进制文件,自动转码下载。比如:window.open()通过xhr下载。ajax请求得到的是二进制文件,只能手动转码下载。

node.js识别图片类型

通过切文件名称后缀来获得图片格式的方式是不准确的,因为文件后缀是可以被强行更改的,这样一个.gif 图片也可以被保存成.jpg,那么在 Node 上我们如何做文件类型的校验呢?

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

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

vue中使用带隐藏文本信息的图片、图片水印

通过RGB 分量值的小量变动,不影响对图片的识别。因此,我们可以在图片加入文字信息。最终达到如下效果:

点击更多...

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