<!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. poj 1724:ROADS（DFS + 剪枝）

    ROADS Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 10777   Accepted: 3961 Descriptio ...

  2. hdu 1556:Color the ball（线段树，区间更新，经典题）

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  3. C#在excel中添加超链接

    1.新建一个项目 2.给项目添加引用:Microsoft Excel 12.0 Object Library (2007版本) using Excel = Microsoft.Office.Inter ...

  4. apache https配置步骤

    转自:http://www.cnblogs.com/best-jobs/p/3298258.html 1.  确认是否安装ssl模块 是否有mod_ssl.so文件 2.  生成证书和密钥 linux ...

  5. 为GDI函数增加透明度处理

    用户对客户端的UI的要求越来越高,采用alpha通道对前景背景做混合是提高UI质量的重要手段. UI开发离不开GDI,然后要用传统的GDI函数来处理alpha通道通常是一个恶梦:虽然有AlphaBle ...

  6. iOS 钥匙串 指纹识别 get和Post请求的区别

    01-钥匙串 1. 通过系统提供的钥匙串功能可以在本地保存密码,系统使用AES的方式对密码加密 a. 查看Safari中保存的密码 2. 使用第三方框架SSKeychain把密码保存到钥匙串和获取钥匙 ...

  7. cocos2dx游戏开发——微信打飞机学习笔记（一）——开发准备

    一.环境的搭建 1.Windows开发准备: (1)软件下载及安装 •下载Cocos2d-x 最新版本:http://www.cocos2d-x.org/download 或者从Cocos2d-x G ...

  8. Java中引用类 strong reference .SoftReference 、 WeakReference 和 PhantomReference的区别

      当在 Java 2 平台中首次引入 java.lang.ref 包,其中包含 SoftReference . WeakReference 和 PhantomReference 三个引用类,引用类的 ...

  9. AndroidStudio中创建Assets文件

  10. 关于Vector中的元素中含有指针成员的情况

    对于容器,当容器的各个元素为类类型,且该类类型中含有指针成员时: 如果类类型的析构函数中包含了对指针变量指向内存的释放操作,则在利用clear()函数删除容器所有元素时,会自动调用类的析构函数,自动实 ...