原生js实现手风琴效果

论坛 › 期权论坛 › 期权     
五分Yo闲   2019-7-13 18:34   1460   0
效果图：
鼠标在移出及没点到li区域时


鼠标放在第一张图片时


鼠标放在第三张图片时

代码如下：
css部分
  1.     *{
复制代码
  1.     margin:0;
复制代码
  1.     padding:0;
复制代码
  1.     }
复制代码
  1.     #box{
复制代码
  1.     width:800px;
复制代码
  1.     height:502px;
复制代码
  1.     margin:20px auto;
复制代码
  1.     border:1px solid red;
复制代码
  1.     overflow:hidden;
复制代码
  1.    
复制代码
  1.     }
复制代码
  1.     #box ul{
复制代码
  1.     list-style:none;
复制代码
  1.     width:800px;
复制代码
  1.     border:1px solid red;
复制代码
  1.     }
复制代码
  1.     #box ul li{
复制代码
  1.     width:160px;
复制代码
  1.     height:502px;
复制代码
  1.     //border: 1px solid #000000;
复制代码
  1.    
复制代码
  1.     float:left;
复制代码
  1.    
复制代码
  1.     }
复制代码
html & js部分
  1. [/code][code]
复制代码
  1.   
复制代码
  1.    
复制代码
  1.    
复制代码
  1.    
复制代码
  1.   
复制代码
  1.   
复制代码
  1.    
复制代码
  1.    
复制代码
  1.       1
复制代码
  1.       2
复制代码
  1.       3
复制代码
  1.       4
复制代码
  1.       5
复制代码
  1.    
复制代码
  1.   
复制代码
  1.   
复制代码
  1. [/code][code]
复制代码
  1.   var box=document.querySelector("#box");
复制代码
  1.   var ul=document.querySelector("#box ul");
复制代码
  1.   var li=document.querySelectorAll("#box ul li");
复制代码
  1.   //循环遍历给每个li绑定背景图片
复制代码
[code]  for(var i=0;i
回复
分享到 :
0 人收藏
返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

2级吧友
五分Yo闲

积分:10
帖子:2
精华:0
+ 关注 私信
期权论坛 期权论坛
期权网络科技版权所有
关于我们
联系我们
加入我们
反馈问题
免责声明
积分充值
统一社会信用代码
积分规则
网站地图
爱文库
下属网站
官方
新浪微博
微信公众号
◆
下载
表情包
App下载
期权论坛 期权论坛

QQ咨询|关于我们|Archiver|手机版|小黑屋|( 辽ICP备15012455号-4 ) Powered by 期权论坛 X3.2 © 2001-2016 期权工具网&期权论坛 Inc.

发布
内容

下载期权论坛手机APP