js实现图片局部放大效果

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

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

css怎么让背景图片平铺?

平铺选项是在网页设计中能够经常使用到的一个选项,例如网页中常用的渐变式背景。采用传统方式制作渐变式背景,往往需要宽度为背景进行平铺。

图片的预加载与懒加载

由名字可以知道,图片的预加载->当用户需要查看图片可以直接从本地缓存中取到(提前加载下来的),图片的懒加载->是当用户一次性访问的图片数量比较多的时候,会减少请求的次数或者延迟请求,是一种服务器前端的优化

性感与色情有多远_你不知道的图片鉴黄那些事

图片鉴黄服务市场容量巨大,作为移动互联网行业最为热门的创业领域,移动社交类App每天生产大量图片,并有无数色情图片混杂其中,所以高效准确地鉴别和剔除淫秽色情信息成为一项十分艰巨的任务。此外,移动直播的大热也导致图片鉴黄需求大增,尤其对于中小开发团队而言

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

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

css多个img标签存在间隙的解决方法总汇

在网上整理了一些解决多个img标签存在间隙的方法:多个img标签写在一行、将要闭合标签的地方与开始标签的地方重合、在img标签的父级上写:font-size:0;这个在解决display:inline-block出现的问题也有帮助、使用display:block(img是内联元素)要float一下才行

根据图片url链接判断图片大小

背景:产品需求,input框输入图片链接,点击检测按钮的时候需要判断该图片不超过2M

网页上常用的图片格式及使用场景

jpg:有损压缩格式,靠损失图片本身的质量来减小图片的体积,gif:无损压缩格式,靠损失图片的色彩数量来减小图片的体积,支持透明,支持动画,png:无损压缩格式,适用于颜色数量较少的图像;svg:可缩放矢量图形

图片下载的几种实现

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

js上传图片,利用canvas实现图片压缩

最近项目中的一个基础功能-----手机上传图片:1、利用canvas进行压缩(这个应该都比较熟悉)2、利用exif-js获取照片旋转角度属性,因为有些手机机型会因为拍照时手机的方向使拍的照片带一个旋转角度的属性

css实现图片剪裁居中_利用css属性object-fit

列表显示图片的时候,一般设置图片宽度自适应,那么高度就会根据图片本身的宽高比等比缩放,怎么才能实现图片居中剪切,避免图片变形呢,css属性object-fit就可以实现

点击更多...

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