<!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. [转载]Js小技巧||给input type=“password”的输入框赋默认值

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

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

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

  8. Angular.js+Bootstrap实现手风琴菜单

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

  9. js-------》(小效果)实现倒计时及时间对象

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

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

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

随机推荐

  1. Mongo DB Study: first face with mongo DB

    Mongo DB Study: first face with mongo DB 1.  study methods: 1.  Translate: I am the mongo DB organiz ...

  2. 恢复 git reset -hard 的误操作

    有时候使用Git工作得小心翼翼,特别是涉及到一些高级操作,例如 reset, rebase 和 merge.甚至一些很小的操作,例如删除一个分支,我都担心数据丢失. 不 久之前,我在做一些大动作(re ...

  3. <转>FreeMarker内置函数

    一. Sequence的内置函数1. sequence?first 返回sequence的第一个值.2. sequence?last 返回sequence的最后一个值.3. sequence?reve ...

  4. js onclick="return test()"事件返回值，对有些事件，会影响默认动作的执行。如：onclick和onsubmit

    onclick="return test()"事件返回值,对有些事件,会影响默认动作的执行.如:onclick和onsubmit <body> <!--事件返回值 ...

  5. matlab练习程序（简单多边形的核）

    还是计算几何, 多边形的核可以这样理解:这个核为原多边形内部的一个多边形,站在这个叫核的多边形中,我们能看到原多边形的任何一个位置. 算法步骤如下: 1.根据原多边形最大和最小的x,y初始化核多边形, ...

  6. 智能车学习(十六)——CCD学习

    一.使用硬件 1.兰宙CCD四代      优点:可以调节运放来改变放大倍数      缺点:使用软排线(容易坏),CCD容易起灰,需要多次调节   2.野火K60底层     二.CCD硬件电路 ( ...

  7. SQLServer批量创建有规则的数据

    根据需求要生成从kkk001,kkk002开始的100个递增账号 手插要死人的,用SQL脚本轻松完成: declare @a int ) ) begin ) ) end declare:申明变量, @ ...

  8. Java的静态导入

    静态导入作用是可以适当减少代码量,但实际上减少得很有限,实际应用中也用的不多,但是作为Java的特性,我们应该适当了解: //静态导入方法或者常量 import static java.lang.Sy ...

  9. Jmeter之参数化（五）

    Jmeter用函数(__Random)批量添加的用法 首先点击  选项----->函数助手对话框-----> 这个是随机取值的意思 在这边输入取值的范围  然后点生成 即可 例如  从 数 ...

  10. AngularJS学习之表单

    1.HTML控件:以下HTML input元素被称为HTML控件: **input元素 **select元素 **button元素 **textarea元素 2.AngularJS表单实例: < ...