手风琴

手风琴

高端版

在这里插入图片描述

html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<style type="text/css">
		html {
			overflow: hidden;
		}
		body {
			position: absolute;
			margin: 0px;
			padding: 0px;
			background: #111;
			width: 100%;
			height: 100%;
		}
		#center {
			position: absolute;
			left: 50%;
			top:  50%;
		}
		#slider {
			position: absolute;
			width: 820px;
			height: 333px;
			left: -430px;
			top: -186px;
			overflow: hidden;
			background: #000;
			border: 20px solid #000;
		}
		#slider .slide {
			position: absolute;
			top: 0px;
			height: 333px;
			width: 500px;
			background: #000;
			overflow: hidden;
			border-left: #000 solid 1px;
			cursor: default;
		}
		#slider .title   {
			color: #F80;
			font-weight: bold;
			font-size: 1.2em;
			margin-right: 1.5em;
			text-decoration: none;
		}
		#slider .backgroundText {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 100%;
			background: #000;
			filter: alpha(opacity=40);
			opacity: 0.4;
		}
		#slider .text {
			position: absolute;
			top: 1%;
			top: 100%;
			color: #FFF;
			font-family: verdana, arial, Helvetica, sans-serif;
			font-size: 0.9em;
			text-align: justify;
			width: 470px;
			left: 10px;
		}
		#slider .diapo {
			position: absolute;
			filter: alpha(opacity=100);
			opacity: 1;
			visibility: hidden;
		}
	</style>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>纯js带弹性动画的手风琴图片相册特效</h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Accordion/201612074245.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="htmleaf-content">
			<p align="center"></p>
			<p align="center"></p>
			<p align="center"></p>
			<div id="center">
				<div id="slider">
					<div class="slide">
						<img class="diapo" src="images/sf10.jpg" alt="">
						<div class="text">
							  <span class="title">The best</span>
							  The offspring of a customized orbiter, Ostem arose as the best balanced
							  home for our plans. So we submitted to its conditions.
						</div>
					</div>
					<div class="slide">
						<img class="diapo" src="images/sf14.jpg" alt="">
						<div class="text">
							<span class="title">Prototype</span>
							Ostem's deep impulse flow is selectively regulated by a molecule
							originated in the prototype model, that creates its own variational
							principles, as oriented by the first local generation of terminable androids.
						</div>
					</div>
					<div class="slide">
						<img class="diapo" src="images/sf24.jpg" alt="">
						<div class="text">
							  <span class="title">Has been reduced</span>
							  Paired hosts come out nicely after only two cycles now. Their size has been
							  reduced to a half the original as planned, and indeed they show an
							  evolutionary advantage in the process of fixing self-generated instructions.
							  Plus, they are beautiful.
						</div>
					</div>
					<div class="slide">
						<img class="diapo" src="images/sf04.jpg" alt="">
						<div class="text">
							<span class="title">By close-alikes</span>
							Now I have regained hopes in someday finding myself surrounded by
							close-alikes to us. However, they will not be audible, at least not in my
							life span. We resolved the low freq vibration a superior solution for our
							communicational goals ...
						</div>
					</div>
					<div class="slide">
						<img class="diapo" src="images/sf01.jpg" alt="">
						<div class="text">
							  <span class="title">To bear</span>
							  We did not expect their surface to produce such a carbon powder coat, though
							  this is the best model so far. I shall have to bear with the inconveniences.
							  They seem to establish a parallel communication through that carbon coat and
							  I find myself unable to decodify the signal into anything meaningful.
						</div>
					</div>
					<div class="slide">
						<img class="diapo" src="images/sf15.jpg" alt="">
						<div class="text">
							  <span class="title">The zero level</span>
							  Today a set of vibration came up from the zero level;  we expect to launch
							  the transitional program in no longer than five basetime units. Psykesoma?				  
							  galore and we'll betray our very nature into infinite, unending 2D surfaces.
							  We do need that vibration, and we will conquer its source.
						</div>
					</div>
					<div class="slide">
						<img class="diapo" src="images/sf41.jpg" alt="">
						<div class="text">
							  <span class="title">Beautifully</span>
							  To keep my sanity I wear the tactile sensors all the time. They translate
							  beautifully; I can even see distances while still on Psykesoma. This was
							  quite a discovery. We have grown more adaptable than expected.
						</div>
					</div>
					<div class="slide">
						<img class="diapo" src="images/sf26.jpg" alt="">
						<div class="text">
							  <span class="title">Uneasy to match</span>
							  Yewoona had to travel farther and longer than I did. Her base orbiter was
							  set to keep a complex combinational path that made it uneasy to match our
							  circuits. But her nature showed stronger than programmed.
						</div>
					</div>
					<div class="slide">
						<img class="diapo" src="images/sf50.jpg" alt="">
						<div class="text">
							  <span class="title">Adapted to serve</span>
							  Keep feeding them. We will never be this lucky again; an autogenerated
							  species adapted to serve all our needs!
						</div>
					</div>
					<div class="slide">
						<img class="diapo" src="images/sf19.jpg" alt="">
						<div class="text">
							  <a class="title" href="http://www.dhteumeuleu.com">At soonest</a>
							  "Blood is dark red, iron dark blue, this tale is blissful and so are you". I
							  should get to the hotel at soonest. The agency guy must be there already,
							  with some luck we'll have some nice dinner on him. How's that?
						</div>
					</div>
				</div>
			   
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="js/slider.js"></script>
	<script type="text/javascript">
	/* ==== start script ==== */
	slider.init();
	</script>
</body>
</html>

normalize.css

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}

htmleaf-demo.css

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot?rretjt');
	src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),
		url('../fonts/icomoon.woff?rretjt') format('woff'),
		url('../fonts/icomoon.ttf?rretjt') format('truetype'),
		url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body, html { font-size: 100%; 	padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

body{
	background: #494A5F;
	color: #D5D6E2;
	font-weight: 500;
	font-size: 1.05em;
	font-family: "Microsoft YaHei","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif;
}
a{ color: rgba(255, 255, 255, 0.6);outline: none;text-decoration: none;-webkit-transition: 0.2s;transition: 0.2s;}
a:hover,a:focus{color:#74777b;text-decoration: none;}
.htmleaf-container{
	margin: 0 auto;
}

.bgcolor-1 { background: #f0efee; }
.bgcolor-2 { background: #f9f9f9; }
.bgcolor-3 { background: #e8e8e8; }/*light grey*/
.bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/
.bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/
.bgcolor-6 { background: #2fa8ec; }/*sky blue*/
.bgcolor-7 { background: #d0d6d6; }/*White tea*/
.bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/
.bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/
.bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/
.bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/
.bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/
.bgcolor-20{ background: #494A5F;color: #D5D6E2;}
/* Header */
.htmleaf-header{
	padding: 1em 190px 1em;
	letter-spacing: -1px;
	text-align: center;
	background: #66677c;
}
.htmleaf-header h1 {
	color: #D5D6E2;
	font-weight: 600;
	font-size: 2em;
	line-height: 1;
	margin-bottom: 0;
}
.htmleaf-header h1 span {
	display: block;
	font-size: 60%;
	font-weight: 400;
	padding: 0.8em 0 0.5em 0;
	color: #c3c8cd;
}
/*nav*/
.htmleaf-demo a{color: #fff;text-decoration: none;}
.htmleaf-demo{width: 100%;padding-bottom: 1.2em;}
.htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #fff;font-weight: 700;}
.htmleaf-demo a:hover{opacity: 0.6;}
.htmleaf-demo a.current{background:#1d7db1;color: #fff; }
/* Top Navigation Style */
.htmleaf-links {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	font-size: 1.5em;
	text-align: center;
}

.htmleaf-links::after {
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -1px;
	width: 2px;
	height: 100%;
	background: #dbdbdb;
	content: '';
	-webkit-transform: rotate3d(0,0,1,22.5deg);
	transform: rotate3d(0,0,1,22.5deg);
}

.htmleaf-icon {
	display: inline-block;
	margin: 0.5em;
	padding: 0em 0;
	width: 1.5em;
	text-decoration: none;
}

.htmleaf-icon span {
	display: none;
}

.htmleaf-icon:before {
	margin: 0 5px;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'icomoon';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
}
/* footer */
.htmleaf-footer{width: 100%;padding-top: 10px;}
.htmleaf-small{font-size: 0.8em;}
.center{text-align: center;}
/****/
.related {
	color: #fff;
	background: #494A5F;
	text-align: center;
	font-size: 1.25em;
	padding: 0.5em 0;
	overflow: hidden;
}

.related > a {
	vertical-align: top;
	width: calc(100% - 20px);
	max-width: 340px;
	display: inline-block;
	text-align: center;
	margin: 20px 10px;
	padding: 25px;
	font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
.related a {
	display: inline-block;
	text-align: left;
	margin: 20px auto;
	padding: 10px 20px;
	opacity: 0.8;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	-webkit-backface-visibility: hidden;
}

.related a:hover,
.related a:active {
	opacity: 1;
}

.related a img {
	max-width: 100%;
	opacity: 0.8;
	border-radius: 4px;
}
.related a:hover img,
.related a:active img {
	opacity: 1;
}
.related h3{font-family: "Microsoft YaHei", sans-serif;font-size: 1.2em}
.related a h3 {
	font-size: 0.85em;
	font-weight: 300;
	margin-top: 0.15em;
	color: #fff;
}
/* icomoon */
.icon-htmleaf-home-outline:before {
	content: "\e5000";
}

.icon-htmleaf-arrow-forward-outline:before {
	content: "\e5001";
}

@media screen and (max-width: 1024px) {
	.htmleaf-header {
		padding: 2em 10% 2em;
	}
	.htmleaf-header h1 {
        font-size:1.4em;
    }
    .htmleaf-links{font-size: 1.4em}
}

@media screen and (max-width: 960px) {
	.htmleaf-header {
		padding: 2em 10% 2em;
	}
	.htmleaf-header h1 {
        font-size:1.2em;
    }
    .htmleaf-links{font-size: 1.2em}
    .related h3{font-size: 1em;}
	.related a h3 {
		font-size: 0.8em;
	}
}

@media screen and (max-width: 766px) {
	.htmleaf-header h1 {
        font-size:1.3em;
    }
    .htmleaf-links{font-size: 1.3em}
}

@media screen and (max-width: 640px) {
	.htmleaf-header {
		padding: 2em 10% 2em;
	}
	.htmleaf-header h1 {
        font-size:1em;
    }
    .htmleaf-links{font-size: 1em}
    .related h3{font-size: 0.8em;}
	.related a h3 {
		font-size: 0.6em;
	}
}

slider.js

/* ==== slider nameSpace ==== */
var slider = function() {
	/* ==== private methods ==== */
	function getElementsByClass(object, tag, className) {
		var o = object.getElementsByTagName(tag);
		for ( var i = 0, n = o.length, ret = []; i < n; i++) {
			if (o[i].className == className) ret.push(o[i]);
		}
		if (ret.length == 1) ret = ret[0];
		return ret;
	}
	function setOpacity (obj,o) {
		if (obj.filters) obj.filters.alpha.opacity = Math.round(o);
		else obj.style.opacity = o / 100;
	}
	/* ==== Slider Constructor ==== */
	function Slider(oCont, speed, iW, iH, oP) {
		this.slides = [];
		this.over   = false;
		this.S      = this.S0 = speed;
		this.iW     = iW;
		this.iH     = iH;
		this.oP     = oP;
		this.oc     = document.getElementById(oCont);
		this.frm    = getElementsByClass(this.oc, 'div', 'slide');
		this.NF     = this.frm.length;
		this.resize();
		for (var i = 0; i < this.NF; i++) {
			this.slides[i] = new Slide(this, i);
		}
		this.oc.parent = this;
		this.view      = this.slides[0];
		this.Z         = this.mx;
		/* ==== on mouse out event ==== */
		this.oc.onmouseout = function () {
			this.parent.mouseout();
			return false;
		}
	}
	Slider.prototype = {
		/* ==== animation loop ==== */
		run : function () {
			this.Z += this.over ? (this.mn - this.Z) * .5 : (this.mx - this.Z) * .5;
			this.view.calc();
			var i = this.NF;
			while (i--) this.slides[i].move();
		},
		/* ==== resize  ==== */
		resize : function () {
			this.wh = this.oc.clientWidth;
			this.ht = this.oc.clientHeight;
			this.wr = this.wh * this.iW;
			this.r  = this.ht / this.wr;
			this.mx = this.wh / this.NF;
			this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1);
		},
		/* ==== rest  ==== */
		mouseout : function () {
			this.over      = false;
			setOpacity(this.view.img, this.oP);
		}
	}
	/* ==== Slide Constructor ==== */
	Slide = function (parent, N) {
		this.parent = parent;
		this.N      = N;
		this.x0     = this.x1 = N * parent.mx;
		this.v      = 0;
		this.loaded = false;
		this.cpt    = 0;
		this.start  = new Date();
		this.obj    = parent.frm[N];
		this.txt    = getElementsByClass(this.obj, 'div', 'text');
		this.img    = getElementsByClass(this.obj, 'img', 'diapo');
		this.bkg    = document.createElement('div');
		this.bkg.className = 'backgroundText';
		this.obj.insertBefore(this.bkg, this.txt);
		if (N == 0) this.obj.style.borderLeft = 'none';
		this.obj.style.left = Math.floor(this.x0) + 'px';
		setOpacity(this.img, parent.oP);
		/* ==== mouse events ==== */
		this.obj.parent = this;
		this.obj.onmouseover = function() {
			this.parent.over();
			return false;
		}
	}
	Slide.prototype = {
		/* ==== target positions ==== */
		calc : function() {
			var that = this.parent;
			// left slides
			for (var i = 0; i <= this.N; i++) {
				that.slides[i].x1 = i * that.Z;
			}
			// right slides
			for (var i = this.N + 1; i < that.NF; i++) {
				that.slides[i].x1 = that.wh - (that.NF - i) * that.Z;
			}
		},
		/* ==== HTML animation : move slides ==== */
		move : function() {
			var that = this.parent;
			var s = (this.x1 - this.x0) / that.S;
			/* ==== lateral slide ==== */
			if (this.N && Math.abs(s) > .5) {
				this.obj.style.left = Math.floor(this.x0 += s) + 'px';
			}
			/* ==== vertical text ==== */
			var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh - this.x0;
			if (Math.abs(v - this.v) > .5) {
				this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px';
				this.v = v;
				this.cpt++;
			} else {
				if (!this.pro) {
					/* ==== adjust speed ==== */
					this.pro = true;
					var tps = new Date() - this.start;
					if(this.cpt > 1) {
						that.S = Math.max(2, (28 / (tps / this.cpt)) * that.S0);
					}
				}
			}
			if (!this.loaded) {
				if (this.img.complete) {
					this.img.style.visibility = 'visible';
					this.loaded = true;
				}
			}
		},
		/* ==== light ==== */
		over : function () {
			this.parent.resize();
			this.parent.over = true;
			setOpacity(this.parent.view.img, this.parent.oP);
			this.parent.view = this;
			this.start = new Date();
			this.cpt = 0;
			this.pro = false;
			this.calc();
			setOpacity(this.img, 100);
		}
	}
	/* ==== public method - script initialization ==== */
	return {
		init : function() {
			// create instances of sliders here
			// parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio, vertical text ratio, opacity
			this.s1 = new Slider("slider", 12, 1.84/3, 1/3.2, 70);
			setInterval("slider.s1.run();", 16);
		}
	}
}();

在这里插入图片描述

DOM版

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>

    ul {
      list-style: none;
    }

    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 1150px;
      height: 400px;
      margin: 50px auto;
      border: 1px solid red;
      overflow: hidden;
    }

    div li {
      width: 240px;
      height: 400px;
      float: left;
    }

    div ul {
      width: 1300px;
    }


  </style>
</head>
<body>
<div id="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<script>

  //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值
  function getStyle(element, attr) {
    return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0;
  }
  function animate(element, json, fn) {
    clearInterval(element.timeId);//清理定时器
    //定时器,返回的是定时器的id
    element.timeId = setInterval(function () {
      var flag = true;//默认,假设,全部到达目标
      //遍历json对象中的每个属性还有属性对应的目标值
      for (var attr in json) {
        //判断这个属性attr中是不是opacity
        if (attr == "opacity") {
          //获取元素的当前的透明度,当前的透明度放大100倍
          var current = getStyle(element, attr) * 100;
          //目标的透明度放大100倍
          var target = json[attr] * 100;
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移动后的值
          element.style[attr] = current / 100;
        } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex
          //层级改变就是直接改变这个属性的值
          element.style[attr] = json[attr];
        } else {
          //普通的属性
          //获取元素这个属性的当前的值
          var current = parseInt(getStyle(element, attr));
          //当前的属性对应的目标值
          var target = json[attr];
          //移动的步数
          var step = (target - current) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          current += step;//移动后的值
          element.style[attr] = current + "px";
        }
        //是否到达目标
        if (current != target) {
          flag = false;
        }
      }
      if (flag) {
        //清理定时器
        clearInterval(element.timeId);
        //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数
        if (fn) {
          fn();
        }
      }
      //测试代码
      console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step);
    }, 20);
  }

  //先获取所有的li标签
  var list = document.getElementById("box").getElementsByTagName("li");
  for (var i = 0; i < list.length; i++) {
    list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
    //鼠标进入
    list[i].onmouseover = mouseoverHandle;
    //鼠标离开
    list[i].onmouseout = mouseoutHandle;
  }
  //进入
  function mouseoverHandle() {
    for (var j = 0; j < list.length; j++) {
      animate(list[j], {"width": 100});//动画效果
    }
    animate(this, {"width": 800});
  }
  //离开
  function mouseoutHandle() {
    for (var j = 0; j < list.length; j++) {
      animate(list[j], {"width": 240});//动画效果
    }
  }


</script>

</body>
</html>

jQuery版

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    ul {
      list-style: none
    }

    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 1150px;
      height: 400px;
      margin: 50px auto;
      border: 1px solid red;
      overflow: hidden;
    }

    div li {
      width: 240px;
      height: 400px;
      float: left;
    }

    div ul {
      width: 1300px;
    }


  </style>
  <script src="jquery-1.12.2.js"></script>
  <script>

    //页面加载的事件
    $(function () {

      //获取所有的li
      $("#box>ul>li").mouseenter(function () {
        //当前的li宽为800px,其他的li的宽为100px
        $(this).css("width", "800px").siblings("li").css("width", "100px");
      });
      $("#box").mouseleave(function () {
        $("li").css("width", "240px");
      });
    });
  </script>
</head>
<body>
<div id="box">
  <ul>
    <li><img src="images/1.jpg"/></li>
    <li><img src="images/2.jpg"/></li>
    <li><img src="images/3.jpg"/></li>
    <li><img src="images/4.jpg"/></li>
    <li><img src="images/5.jpg"/></li>
  </ul>
</div>

</body>
</html>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值