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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 Javascript
JS随机数产生代码分享
Feb 24 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
vue实现图片上传预览功能
Dec 23 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获得文件扩展名三法
2006/11/25 PHP
dedecms中常见问题修改方法总结
2007/03/21 PHP
在服务端进行目录建立、删除,文件上传、删除的过程的php代码
2008/09/10 PHP
PHP中include()与require()的区别说明
2010/03/10 PHP
dojo 之基础篇(三)之向服务器发送数据
2007/03/24 Javascript
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
2013/05/19 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
2017/03/08 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
jQuery实现的简单歌词滚动功能示例
2019/01/07 jQuery
vue实现移动端拖动排序
2020/08/21 Javascript
python模块restful使用方法实例
2013/12/10 Python
python判断windows隐藏文件的方法
2014/03/21 Python
python抓取网页图片示例(python爬虫)
2014/04/27 Python
Python日志模块logging简介
2015/04/13 Python
python抓取百度首页的方法
2015/05/19 Python
Python算法应用实战之栈详解
2017/02/04 Python
Python中生成Epoch的方法
2017/04/26 Python
使用Python3 poplib模块删除服务器多天前的邮件实现代码
2020/04/24 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
python如何将图片转换素描画
2020/09/08 Python
HTML5网页音乐播放器的示例代码
2017/11/09 HTML / CSS
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
应届护士求职信范文
2014/01/26 职场文书
车辆工程专业求职信
2014/06/14 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL