脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js手风琴效果

js实现简单手风琴效果

 更新时间：2021年09月26日 09:01:39   作者：段嘉许..！  
这篇文章主要为大家详细介绍了js实现简单手风琴效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现手风琴效果的具体代码，供大家参考，具体内容如下

效果：

实现代码：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
   *{
    margin:0;
    padding:0;
   }
   ul,li{
    list-style:none;
   }
   .box{
    width:1200px;
    height:260px;
    margin:50px auto 0;
    overflow: hidden;
   }
   .list{
    width:2000px;
    height:260px;
   }
   .list>li{
    width:200px;
    height:260px;
    float:left;
    background-image:url(images/1.jpg);
    background-position:center center;
    background-repeat:no-repeat;
   }
   .list>li:nth-child(2){
    background-image:url(images/2.jpg);
   }
   .list>li:nth-child(3){
    background-image:url(images/3.jpg);
   }
   .list>li:nth-child(4){
    background-image:url(images/4.jpg);
   }
   .list>li:nth-child(5){
    background-image:url(images/5.jpg);
   }
   .list>li:nth-child(6){
    background-image:url(images/6.jpg);
   }
  </style>
 </head>
 <body>
  
  <div class="box">
   <ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
  </div>
  
  <script src="js/startmove.js"></script>
  <script>
   
   var oLis = document.getElementsByClassName("list")[0].children;
   
   for(var i = 0; i < oLis.length; i++){
    oLis[i].onmouseover = function(){
     for(var j = 0; j < oLis.length; j++){
      startMove(oLis[j],{
       width:160
      },50)
     }
     startMove(this,{
      width:400
     },50)
    }
    oLis[i].onmouseout = function(){
     
     for(var j = 0; j < oLis.length; j++){
      startMove(oLis[j],{
       width:200
      },10)
     }
    }
   }
   
   
  </script>
 </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 判断window.onload是否多次使用的方法

    判断window.onload是否多次使用的方法

    window.onload想必大家都有使用过吧，在窗口加载时执行，如果多次使用window.onload该如何判断呢？下面与大家分享个方法
    2014-09-09
  • 谈谈第三方App接入微信登录 解读

    谈谈第三方App接入微信登录 解读

    本篇文章主要介绍了谈谈第三方App接入微信登录 解读 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧。
    2016-12-12
  • 值得分享的JavaScript实现图片轮播组件

    值得分享的JavaScript实现图片轮播组件

    这篇文章主要为大家详细介绍了JavaScript实现图片轮播组件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • javascript简单实现等比例缩小图片的方法

    javascript简单实现等比例缩小图片的方法

    这篇文章主要介绍了javascript简单实现等比例缩小图片的方法,涉及javascript针对页面元素属性的读取、运算及设置相关技巧,需要的朋友可以参考下
    2016-07-07
  • javascript 必知必会之closure

    javascript 必知必会之closure

    本系列博文主要谈一些在 javascript 使用中经常会混淆的高级应用,包括: prototype, closure, scope, this关键字. 对于一个需要提高自己javascript水平的程序员,这些都是必须要掌握的.
    2009-09-09
  • js实现数组去重方法及效率對比

    js实现数组去重方法及效率對比

    本文主要介绍了js实现数组去重方法及效率對比。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • 获取本机IP地址的实例(JavaScript / Node.js)

    获取本机IP地址的实例(JavaScript / Node.js)

    下面小编就为大家分享一篇使用JavaScript和Node.js获取本机IP地址的实例，具有很好的参考价值，希望对大家有所帮助
    2017-11-11
  • 使用JavaScript平移和缩放图像的示例代码

    使用JavaScript平移和缩放图像的示例代码

    平移和缩放是查看图像时常用的功能,我们可以放大图像以查看更多细节,进行图像编辑,Dynamsoft Document Viewer是一个用于此目的的SDK,它为文档图像提供了一组查看器,在本文中,我们将演示如何使用它来平移和缩放图像,需要的朋友可以参考下
    2024-08-08
  • javascript内嵌式与外链式的基本应用方式

    javascript内嵌式与外链式的基本应用方式

    这篇文章主要介绍了javascript内嵌式与外链式的基本应用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2021-12-12
  • 详解axios跨端架构是如何实现的

    详解axios跨端架构是如何实现的

    我们都知道,axios 是是一个跨平台请求方案,在浏览器端采用 XMLHttpRequest API 进行封装,而在 Node.js 端则采用 http/https 模块进行封装,那么本文,我们将来探讨这个话题：axios 的跨端架构是如何实现的,需要的朋友可以参考下
    2024-04-04

最新评论