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 相关文章推荐
js 解决“options为空或不是对象”
Dec 22 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
Dec 24 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
浅析Vue 生命周期
Jun 21 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
node.js基础知识汇总
Aug 25 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学习笔记之 函数声明
2011/06/09 PHP
php使用百度天气接口示例
2014/04/22 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
php操作mongoDB实例分析
2014/12/29 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
event.srcElement 用法笔记e.target
2009/12/18 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
常见的原始JS选择器使用方法总结
2014/04/09 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
JS实现n秒后自动跳转的两种方法
2020/11/30 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
新手快速上手webpack4打包工具的使用详解
2019/01/28 Javascript
如何解决js函数防抖、节流出现的问题
2019/06/17 Javascript
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
python pyheatmap包绘制热力图
2018/11/09 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
scrapy-splash简单使用详解
2021/02/21 Python
详解移动端Html5页面中1px边框的几种解决方法
2018/07/24 HTML / CSS
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
荷兰最大的鞋子、服装和运动折扣店:Bristol
2021/01/07 全球购物
写自荐信的七个技巧
2013/10/15 职场文书
求职毕业生自荐书
2014/02/08 职场文书
教师年度考核评语
2014/04/28 职场文书
倡议书范文格式
2014/05/12 职场文书
消防志愿者活动方案
2014/08/23 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
python如何读取.mtx文件
2021/04/22 Python
浅谈react useEffect闭包的坑
2021/06/08 Javascript