手风琴轮播图

最新推荐文章于 2024-10-12 11:19:47 发布

原创最新推荐文章于 2024-10-12 11:19:47 发布 · 933 阅读

5 ·

CC 4.0 BY-SA版权

网页小功能专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用CSS和JavaScript结合的方式，实现图片列表在鼠标悬停时宽度动态变化的效果，通过自定义函数获取元素样式，利用变速动画更改元素宽度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

<style>
  ul {
    list-style: none;
  }
  * {
    margin: 0;
    padding: 0;
  }

  div {
    width: 1150px;
    height: 400px;
    margin: 50px auto;
    border: 1px solid red;
    overflow: hidden;
  }

  div li {
    width: 240px;
    height: 400px;
    float: left;
  }

  div ul {
    width: 1300px;
  }
</style>  
<div id="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<script src="common.js"></script>
<script>
  //获取样式
  function getStyle(element,attr) {
    return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0;
  }
  //变速动画 更改多个属性的值
  function animate(element,json,fn) {
    clearInterval(element.timeId);
    element.timeId=setInterval(function () {
      var flag=true;
      for(var attr in json){
        var current=parseInt(getStyle(element,attr));
        var target=json[attr];
        var step=(target-current)/10;
        step=step>0?Math.ceil(step):Math.floor(step);
        current+=step;
        element.style[attr]=current+"px";
        if(current!=target){
          flag=false;
        }
      }
      if(flag){
        clearInterval(element.timeId);
        if(fn){
          fn();
        }
      }
    },20);
  }

  var liObjs=document.getElementById("box").children[0].children;
  for(var i=0;i<liObjs.length;i++){
    liObjs[i].style.backgroundImage="url(images/"+(i+1)+".jpg)";
    liObjs[i].onmouseover=mouseoverHandle;
    liObjs[i].onmouseout=mouseoutHandle;
  }
  function mouseoverHandle(){
    for(var i=0;i<liObjs.length;i++) {
      animate(liObjs[i], {"width": 100});
    }
      animate(this,{"width":800});
  }
  function mouseoutHandle(){
    for(var i=0;i<liObjs.length;i++){
      animate(liObjs[i],{"width":240});
    }
  }
</script>