js

js中==与===的区别

swiper插件的使用

利用location对象的href属性实现数秒自动跳转功能

放大器效果

说明：1）主要要找4张图片，"../images/1.jpg"
           2）small  middle  large  三个为定义的盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大器效果</title>
    <style>
      .container{
         display:flex;
         margin:200px;
      }
      .small{

}
      .small li{
            padding:0;
            margin-top:0;
            margin-bottom:6px;
            width:45px;
            height:45px;
      }
      .small img{
         padding:0;
         width:100%;
         height:100%
      }
      .active{
       border:1px solid red;!
      }
      .middle{
         display:flex;
         width:200px;
         height:200px;
         border:1px solid #000;
         positon:relative;
      }
      .middle img{
         width:100%;
         height:100%
      }
      .layer{
       width:100px;
       height:100px;
       border:2px solid blue;
       border-radius:50%;

       display:none;
       position:absolute;
      }
      .large{
         margin-left:-45px;
         width:200px;
         height:200px;
         border:1px solid #000;
         display:none;
         background-image: url("../images/1.jpg");
         background-size:400px 400px;
      }

</style>
</head>
<body>
<div class="container">
    <div class="middle" >
        <img src="../images/1.jpg">
        <div class="layer"></div>
    </div>
    <div class="small">
      <ul style="list-style: none;padding:0;margin:0;">
        <li class="active">
         <img src="../images/1.jpg">
        </li>
        <li >
        <img src="../images/2.jpg">
        </li>
        <li >
        <img src="../images/3.jpg">
        </li>
        <li>
        <img src="../images/4.jpg">
        </li>
      </ul>

</div>
    <div class="large">

</div>
</div>
<script>
  //获取标签
  const small=document.querySelector('.small')
  const middle=document.querySelector('.middle')
  const large=document.querySelector('.large')
    //小盒子切换
  small.addEventListener('mouseover',function(e){
    if (e.target.tagName==='IMG'){
       //console.log(111)
       //清空当前所有的‘active’
       this.querySelector('.active').classList.remove('active')
       //给img标签的父节点，也就是li标签，添加‘active’属性
       e.target.parentNode.classList.add('active')
       //获取当前小图片的src

       //更换中盒子中的img的src地址
       middle.querySelector('img').src=e.target.src
       //更换大盒子的背景图片的src地址
       large.style.backgroundImage=`url(${e.target.src})`
    }
  })

//鼠标经过中盒子，大盒子显示
  middle.addEventListener('mouseenter',show)
  middle.addEventListener('mouseleave',hide)
  let timeId=0//定义定时器
  //显示函数
  function show(){
  //先清除定时器
   clearTimeout(timeId)
   large.style.display='block'
  }
  //延迟隐藏函数
  function hide(){
    timeId=setTimeout(function(){
      large.style.display='none'
    },1000)
  }

//鼠标经过大盒子，大盒子保持显示
  large.addEventListener('mouseenter',show)
  large.addEventListener('mouseleave',hide)

//鼠标经过中盒子，选择器显示
  const layer=document.querySelector('.layer')
  middle.addEventListener('mouseenter',function(e){
      layer.style.display='block'

  })
  middle.addEventListener('mouseleave',function(){
     layer.style.display='none'
  })

//放大选择器移动
  middle.addEventListener('mousemove',function(e){
      //鼠标在页面中的坐标

      //middle盒子的坐标

      //当发生想上滚动时，增加滚动量纠偏

let x=e.pageX-50 //将鼠标放在选择器的中间

  let y=e.pageY-50

//以下为设置选择器不出middle边框
  if(x<middle.getBoundingClientRect().left+50){ x=middle.getBoundingClientRect().left }
  if(y<middle.getBoundingClientRect().top+50+document.documentElement.scrollTop){ y=middle.getBoundingClientRect().top+document.documentElement.scrollTop }

if(x>middle.getBoundingClientRect().left+100){ x=middle.getBoundingClientRect().left+100 }
  if(y>middle.getBoundingClientRect().top+100+document.documentElement.scrollTop){ y=middle.getBoundingClientRect().top+100+document.documentElement.scrollTop }

if(x>=middle.getBoundingClientRect().left+50 && x<=middle.getBoundingClientRect().left+100){ x=x}
  if(y>=middle.getBoundingClientRect().left+50+document.documentElement.scrollTop && y<=middle.getBoundingClientRect().top+100+document.documentElement.scrollTop){ y=y}

console.log('x,y',x,y)
  //将坐标值赋给选择器
  layer.style.left=x+'px'
  layer.style.top=y+'px'

//将坐标值放大2倍，赋值给大盒子的背景图片
  large.style.backgroundPositionX=-2*x+'px'
  large.style.backgroundPositionY=-2*y+'px'//背景图片的移动方向刚好时反的，所以用‘-’
  })
</script>
</body>
</html>

关于Lodash，一个一致性、模块化、高性能的 JavaScript 实用工具库。

使用ladash的_.debounce(func, [wait=0], [options=])实现防抖处理

_.debounce(func, [wait=0], [options=])
创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。 debounced（防抖动）函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 options（选项） 对象决定如何调用 func 方法，options.leading 与|或 options.trailing 决定延迟前后如何触发（注：是 先调用后等待 还是 先等待后调用）。 func 调用时会传入最后一次提供给 debounced（防抖动）函数 的参数。 后续调用的 debounced（防抖动）函数返回是最后一次 func 调用的结果。

注意: 如果 leading 和 trailing 选项为 true, 则 func 允许 trailing 方式调用的条件为: 在 wait 期间多次调用防抖方法。

如果 wait 为 0 并且 leading 为 false, func调用将被推迟到下一个点，类似setTimeout为0的超时。

SeeDavid Corbacho's articlefor details over the differences between_.debounce and_.throttle.

添加版本
0.1.0

参数
func (Function): 要防抖动的函数。
[wait=0] (number): 需要延迟的毫秒数。
[options=] (Object): 选项对象。
[options.leading=false] (boolean): 指定在延迟开始前调用。
[options.maxWait] (number): 设置 func 允许被延迟的最大值。
[options.trailing=true] (boolean): 指定在延迟结束后调用。
返回
(Function): 返回新的 debounced（防抖动）函数。