js实现购物网站放大镜功能

本文实例为大家分享了js实现购物网站放大镜功能的具体代码,供大家参考,具体内容如下

首先看效果图:

先是布局,左边一个小图框,包含一个鼠标移动框,右边一个放大框。

<div class="box">
        <div class="small">
            <img src="small3.jpg" alt="">
            <div class="move"></div>
        </div>
        <div class="big">
            <img src="big3.jpg" alt="">
        </div>
</div>

写一下css

.small{
    position: relative;
    float: left;
    width: 450px;
    height: 450px;
    border:1px solid #000;
}
.small .move{
    position: absolute;
    top:0;
    width: 300px;
    height: 300px;
    background-color: rgba(0,0,0,0.4);
    cursor:move;
    display: none;
}
.big{
    position: relative;
    float: left;
    width: 540px;
    height: 540px;
    margin-left: 20px;
    overflow: hidden;
    border:1px solid #000;
    display: none;
}
.big img{
    position: absolute;
    top:0;
    left: 0;
}

js部分:

var box=document.getElementsByClassName('box')[0],small=box.getElementsByClassName('small')[0],move=small.getElementsByClassName('move')[0],smallImg=small.getElementsByTagName('img')[0],big=box.getElementsByClassName('big')[0],bigImg=big.getElementsByTagName('img')[0];
    //首先把需要的元素都获取出来
    small.onmouseover=function(){
        move.style.display='block';
        big.style.display="block";
    };
    small.onmouseout=function(){
        move.style.display='none';
        big.style.display="none";
    };
    small.onmousemove=function(e){
        e=e||window.event;//兼容性考虑
        var x=e.clientX-smallImg.getBoundingClientRect().left-move.offsetWidth/2;
        var y=e.clientY-smallImg.getBoundingClientRect().top-move.offsetHeight/2;
        if(x<0){
            x=0;
        }
        if(x>smallImg.offsetWidth-move.offsetWidth){
            x=smallImg.offsetWidth-move.offsetWidth;
        }
        if(y<0){
            y=0;
        }
        if(y>smallImg.offsetHeight-move.offsetHeight){
            y=smallImg.offsetHeight-move.offsetHeight;
        }
        move.style.left=x+"px";
        move.style.top=y+"px";
        //实现左边move块跟随鼠标移动的代码
        var scale=bigImg.offsetWidth/smallImg.offsetWidth;
        //按照比例放大
        bigImg.style.left='-'+x*scale+'px';
        //因为图片是需要左移和上移的所以要加负号
        bigImg.style.top='-'+y*scale+'px';
    }

放大镜效果就实现啦!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • js放大镜放大图片效果

    我们 js图片放大镜 body { background: #222; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #screen span { position:absolute; overflow:hidden; border:#FFF solid 1px; background:#FFF; } #screen img{ position:absolute; le

  • JS实现电商商品展示放大镜特效

    本文实例为大家分享了JS实现电商商品展示放大镜的具体代码,供大家参考,具体内容如下 知识点 1.使用children获取字标签组 2.求当前鼠标坐标 3.碰撞检测 4.大小盒子通过比例同步 运行效果 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>

  • 原生js实现商品放大镜效果

    实现原理 大图上的放大镜:小图的显示区域=大图片大小:小图片大小=大图片的offsetLeft:小图片的offsetLeft 那么以上的公式中只有大图片的offsetLeft 是未知的,所以大图片的offsetLeft=大图片大小/小图片大小*小图片的offsetLeft 代码中有详细注释 完整代码 注:复制到本地后自行替换图片查看效果 <!DOCTYPE html> <html lang="en"> <head> <meta http-equ

  • 用js实现放大镜的效果的简单实例

    第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容,当然我也会收藏一些我认为好的,不错的文章(其实最主要是我能看懂....).我相信以后自己也能够写出高大上的东西.加油! 废话说的有点多,说正事.前几天看了一段潭州教育的教学视频,其中的老师是用JQuery实现放大镜的效果(老师讲的是在是太慢,各种乱扯,跳着看的).由于我还没有好好的学习过JQuery

  • 用JS实现购物网站商品放大镜效果

    放大镜效果就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大镜</title> <style> *{margin:0;padding: 0;} #warp{widt

  • 基于JavaScript实现购物网站商品放大镜效果

    大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能,就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大镜</title> <style> *{mar

  • js实现淘宝浏览商品放大镜功能

    本文实例为大家分享了js实现淘宝浏览商品放大镜的具体代码,供大家参考,具体内容如下 1.准备两张图片,其中一张图片分辨率为另一张图片的二倍. 2.前端页面布局 //box1位左侧原图,box2为右侧放大图额显示框,son为iv class="box1"> <div class="son"></div> <div class="ceng"></div> </div> <div

  • 原生js仿淘宝网商品放大镜效果

    效果图:(实例图片由自己添加) 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿淘宝放大镜特效</title> <style type="text/css"> *{margin: 0;padding: 0;} #demo{width:350px;height:

  • javascript实现商品图片放大镜

    优化原因 现在的电商商城项目解决的主要是购买商品的问题,那么购买商品主要要看清楚商品表面外形的主要特征和细节,如果图片处理过小,或者细节过于模糊,就需要做一个商品高清图片放大局部的功能. 技术关键点 1.左侧和上侧距离,在一个水平位置和垂直位置中有我们可以挪动的区域,就是原图片区域,鼠标挪动位置是一个块状位置,他的左侧和上侧距离浏览器上侧和左侧分别有一个长度,我们叫它们 ClientX 和 ClientY,而左上侧鼠标没有略过的位置实际上是一个点,我们拖动放大块时,它会由一个点变成一个方块,这个

  • 纯js仿淘宝京东商品放大镜功能

    效果图: 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题</title> <style> *{ margin: 0px; padding: 0px; } .imgContent{ width: 420px; height: 300px; pos

随机推荐