js-小效果-手风琴

时间：2022-09-15 22:06:31

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
list-style: none;
}
#box{
width:500px;
height:300px;
border: 1px solid #000;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#box li{
width:500px;
height:300px;
position: absolute;
}
#box li img{
width:500px;
height:300px;
}
</style>
<script src="move.js"></script>
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var aLi=oBox.children;
var w=30;
for(var i=1;i<aLi.length;i++){
aLi[i].style.left=oBox.offsetWidth-w*(aLi.length-i)+'px';
}
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
for(var i=0;i<aLi.length;i++){
if(i<=this.index){
move(aLi[i],{left:w*i});
}else{
move(aLi[i],{left:oBox.offsetWidth-w*(aLi.length-i)});
}

}
}
}
}
</script>
</head>
<body>
<ul id="box">
<li><img src="img/banner1.jpg" alt=""/></li>
<li><img src="img/banner2.jpg" alt=""/></li>
<li><img src="img/banner3.jpg" alt=""/></li>
<li><img src="img/banner4.jpg" alt=""/></li>
<li><img src="img/banner5.jpg" alt=""/></li>
</ul>
</body>
</html>

js-小效果-手风琴的更多相关文章

  1. js小效果-轮播图

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  2. js小效果：返回顶部 scrollTop 。 滚屏：animate

    返回顶部: (scroll 滚屏事件,如果超出第一屏,显示返回顶部的按钮) <div id="gotop" onclick="javascript:scroll(0 ...

  3. js小效果-全选

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  4. js小效果-简易计算器

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  5. js小效果-双色球

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  6. &lbrack;转载&rsqb;Js小技巧&vert;&vert;给input type&equals;&OpenCurlyDoubleQuote;password”的输入框赋默认值

    http://www.cnblogs.com/Raywang80s/archive/2012/12/06/2804459.html [转载]Js小技巧||给input type="passw ...

  7. CSS3实现几个常用的网页小效果

    主题 由于最近比较忙,自己也没有很充裕的时间可以去做比较丰富的分享.今晚我挤出时间来制作这几个很常用的CSS3网页小效果.最近写JS的时间比例比较多,不过我还是比较钟情于CSS3.所以我还是坚持分享一 ...

  8. Angular&period;js&plus;Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

  9. js-------》&lpar;小效果&rpar;实现倒计时及时间对象

    js实现倒计时及时间对象 JS实现倒计时效果代码如下: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset ...

  10. JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

随机推荐

  1. mybatis：choose when otherwise标签

    choose标签是按顺序判断其内部when标签中的test条件是否成立,如果有一个成立,则 choose 结束. 当 choose 中所有 when 的条件都不满则时,则执行 otherwise 中的 ...

  2. 对于那本--你必须知道的499个C语言问题--总结

    (1)1.3 (2)1.10没看懂 (3)1.11和1.12都讲到了   静态变量和局部变量,那么这两个是啥啊,我不懂: (4)1.13针对那两个字符串定义为啥有问题,不懂 (5)2.8是做什么的 ( ...

  3. loadrunner个版本历程

    1.工具介绍: LoadRunner是一种预测系统行为和性能的负载测试工具.通过以模拟上千万用户实施并发负载及实时性能监测的方式来确认和查找问题, LoadRunner能够对整个企业架构进行测试.通过 ...

  4. Matlab验证公式取值范围

    一.问题来源 t = 2xy/(x+y);融合相似度和信任度,我需要验证值域是不是[0,1]: 二.求解 clear all; clc; %linspace(0:1,0.1)这样是错的,第三个参数是段 ...

  5. Mybaits&plus;SpringMVC项目（含代码生成工具源码）

       大家下载下来修改数据库配置应该就能运行起来,里面有一个SM的简单案例了,还有说明文件. 运行效果    工具类可以生成Springmvc+mybatis的相关类和配置文件,并具有增删查改的功能, ...

  6. oracle job interval&&num;183&semi;相关事例

    描述 Interval参数值 每天运行一次 'SYSDATE + 1' 每小时运行一次 'SYSDATE + 1/24' 每10分钟运行一次 'SYSDATE + 10/(60*24)' 每30秒运行 ...

  7. 【拓扑】【宽搜】CSU 1084 有向无环图 &lpar;2016湖南省第十二届大学生计算机程序设计竞赛&rpar;

    题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1804 题目大意: 一个有向无环图(DAG),有N个点M条有向边(N,M<=105 ...

  8. JavaScript实现回车键切换输入框焦点

    用JavaScript实现回车键切换输入框焦点的功能,不是回车换行哦,在Textarea中,回车换行是默认功能,不过若要在textarea中使用 回车切换输入框焦点功能的话,回车换行就要失效了,不过i ...

  9. 承载于以太网帧之上的数据包的解析——ARP、IPv4、IPv6

    承接上一博文而来,继续解析网络数据包,对于承载在以太网上的三种协议进行了解析,主要是分为依据RFC定义的标准先解析头部数据,然后得到有效载荷,即为协议包括的实体数据,更上层进行进一步处理. 一.ARP ...

  10. With As 获取 id parentId 递归获取所有

    Declare @Id Int  Set @Id = 5;    ---在此修改父节点    With RootNodeCTE(Id,ParentId)  As  (  Select Id,Paren ...

相关文章