<!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. 【PHP绘图技术&&验证码绘制】

    PHP绘图是比较简单的事情,基本绘图如直线.圆.矩形.弧线.填充矩形.填充扇形.非中文字的打印.中文文字的打印在在下面的代码中会纤细讲解. 需要支持中文的字体,可以到windows自带的字体库中找,并 ...

  2. T-SQL 常用语句

    1. 查看 Table 或者 Column 被那些object(存储过程.函数或View)调用. select a.* from sysobjects a, syscomments b where a ...

  3. slf4i + logback 配置

    一.所需jar包: slf4j-api-1.6.1.jar logback-classic-0.9.24.jar logback-core-0.9.24.jar 二.logback.xml配置示例: ...

  4. ThinkPHP中getField( )和field( )

    做数据库查询的时候,比较经常用到这两个,总是查手册,记不住,现在把它总结下,希望以后用的时候不查手册了. 不管是用select 查询数据集,还是用find 查询数据,常配合连贯操作where.fiel ...

  5. myeclipse+tomcat 工程名改名的问题 ——————完美解决方案

    当建好的工程再重命名之后,发布和访问的时候都还是原来的名字,这个问题纠结了我很久,最好找到解决方法,这里分享一下,希望大家不要再受这种困惑.解决方法: 点击工程右键->properties-&g ...

  6. 在Virtulbox上装Ubuntu

    做个程序员,会用Linux,这应该是最基本的要求吧.可惜本人经常用Windows,只是偶尔去服务器上做些操作的时候才接触到linux.so,我要学Linux.刚学所以还是先装个虚拟机吧,等在虚拟机上用 ...

  7. ML 06、感知机

    机器学习算法 原理.实现与实践  —— 感知机 感知机(perceptron)是二分类的线性分类模型,输入为特征向量,输出为实例的类别,取值+1和-1.感知机学习旨在求出将训练数据进行线性划分的分离超 ...

  8. CoreLocation 下的定位跟踪测速

    #import "ViewController.h" #import <CoreLocation/CoreLocation.h> @interface ViewCont ...

  9. AJAX案例一：发送POST请求

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  10. Linux中查看jdk版本

    linux查看java jdk安装路径和设置环境变量 windows: set java_home:查看JDK安装路径 java -version:查看JDK版本 linux: whereis jav ...