<!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 2524:Ubiquitous Religions（并查集，入门题）

    Ubiquitous Religions Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 23997   Accepted:  ...

  2. forEach 方法 (Array) (JavaScript)

    为数组中的每个元素执行指定操作. 语法 array1.forEach(callbackfn[, thisArg]) 参数 参数 定义 array1 必选.一个数组对象. callbackfn 必选.最 ...

  3. Getting Started with Blocks

    本文来源为:developer.apple.com,仅仅是博主练习排版所用. Getting Started with Blocks The following sections help you t ...

  4. winows下使用ssh服务远程登录vbox中的虚拟机

    1.到http://www.putty.org/下载并安装SSH客户端 2.查看是否安装ssh服务 在ubuntu终端命令界面键入: #ssh localhost 如果出现下面提示则表示还没有安装: ...

  5. loj 1412(树上最长直径的应用)

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1412 思路:好久没写题解了,有点手生,这题从昨天晚上wa到现在终于是过了...思想其实 ...

  6. android应用程序如何调用支付宝接口

    最近在做一个关于购物商城的项目,项目里面付款这块我选的是调用支付宝的接口,因为用的人比较多. 在网上搜索了以下,有很多这方面的教程,但大部分教程过于陈旧,而且描述的过于简单.而且支付宝提供的接口一直在 ...

  7. Liferay 6.2 改造系列之十一：默认关闭CDN动态资源

    在行业客户中,一般无法提供CDN服务,因此默认关闭CDN动态资源功能: 在/portal-master/portal-impl/src/portal.properties文件中,有如下配置: # # ...

  8. js函数和jquery函数详解

    一:函数格式和用法: jQuery中所用到的:匿名函数的执行. (function(){ //这里忽略jQuery所有实现 })(); //the first function function fi ...

  9. 读懂Android项目结构目录

    我们看到下图:当我们创建了第一Android项目的时候有没有被吓到.怎么这么多目录,好头晕啊!没事, 那我们今天就了解一下这些目录是做什么的: src: src 目录是放置我们所有 Java 代码的地 ...

  10. Angular JS学习之指令

    1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...