<!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. RAC NTP/CTSS

    本文總結主要參考: http://blog.itpub.net/23135684/viewspace-759693/ http://www.happyworld.net.cn/post/6.html ...

  2. SQL常见错误及处理方法

    1.情况:数据库引擎安装失败,报类似权限不足的错误 解决:可能由于计算机名和用户名相同导致,更改计算机名,卸载干净重装即可

  3. MicroService/web Service/webAPI/RPC

    [TOC] 微服务 服务拆分,利用轻量化机制(通常为HTTP源API)实现通信,复杂度可控,独立部署,技术选型灵活,容错,扩展. 康威定律的实际体现 微服务架构模式深刻影响了应用和数据库之间的关系,不 ...

  4. SQL单表查询案例

    表(emp)结构 (1)查询部门编号为10中所有经理,部门编号为20中所有销售员,还有即不是经理又不是销售员但其工资大或等于20000的所有员工详细资料. SELECT * FROM emp ; (2 ...

  5. Linux环境下搭建Tomcat+mysql+jdk

    Linux环境 1.下载并安装一个VMware workstation, 这个是虚拟机的平台(自行度娘下载~),虚拟机是在后面要在里面搭建Linux系统. 2.下载一个centos安装包,linux版 ...

  6. EventBus的使用,数据传递

    通常情况下安卓下数据的传递有下面几种方法: 1.通过intent传递,包括显式意图和隐式意图,广播(Broadcast)和服务都能通过Intent传递 传递的数据类型包括8大基本数据类型    实现P ...

  7. 廖雪峰js教程笔记4 sort排序的一些坑

    排序算法 排序也是在程序中经常用到的算法.无论使用冒泡排序还是快速排序,排序的核心是比较两个元素的大小.如果是数字,我们可以直接比较,但如果是字符串或者两个对象呢?直接比较数学上的大小是没有意义的,因 ...

  8. psql-01基本介绍

    安装与启动 安装: apt-get install postgresql / yum install postgresql.XXX; 启动: mac下直接打开 linux service postgr ...

  9. PHP 生成二维码

    利用PHP QRcode生成二维码: php QRcode 官网 http://phpqrcode.sourceforge.net/ 在官网下载 phpqrcode.php就ok啦: 然后,查看自己的 ...

  10. android测试点汇总

    Android的功能测试点 安装\卸载 App具体功能点 联网(默认的联网方式是什么?Wifi orSim卡?网络切换是否有相应的提示说明?飞行模式) 程序进入输入功能时,是否正常弹出键盘;键盘是否遮 ...