js实现图片局部放大效果详解


Posted in Javascript onMarch 18, 2019

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

js实现图片局部放大效果详解

如上图,可以看到,这是放大镜的基本效果,主要分成左右两个部分。左边分成一张大图,和一个导航栏,在右边则是一个放大镜放大后的图片。因此,我在画页面的时候,大体的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";

  }

在这里,计算较多,尤其要注意遮罩层阴影,主图以及放大图之间的倍数关系。

到这里,基本功能就实现了,这里面涉及的计算可以适当配图理解,尤其注意点击位置的获取。

以上所述是小编给大家介绍的js实现图片局部放大效果详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
js url传值中文乱码之解决之道
Nov 20 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 Javascript
js二维数组定义和初始化的三种方法总结
Mar 03 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
js 获取元素在页面上的偏移量的方法汇总
Apr 13 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 #Javascript
vue动画效果实现方法示例
Mar 18 #Javascript
node.js实现微信开发之获取用户授权
Mar 18 #Javascript
学习node.js 断言的使用详解
Mar 18 #Javascript
React 使用Hooks简化受控组件的状态绑定
Mar 18 #Javascript
JavaScript显式数据类型转换详解
Mar 18 #Javascript
浅谈js中的bind
Mar 18 #Javascript
You might like
PHP clearstatcache()函数详解
2010/03/02 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
2014/11/24 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
jQuery插件实现静态HTML验证码校验
2015/11/06 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
2017/12/26 Javascript
JS实现的字符串数组去重功能小结
2019/06/17 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
[47:55]Ti4第二日主赛事败者组 NaVi vs EG 1
2014/07/20 DOTA
Python中join函数简单代码示例
2018/01/09 Python
Python中单例模式总结
2018/02/20 Python
Python全栈之列表数据类型详解
2019/10/01 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
django rest framework 自定义返回方式
2020/07/12 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
青安岗事迹材料
2014/05/14 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
死亡诗社观后感
2015/06/05 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android