课程 \
手风琴效果
4-2 综合实战题
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Accordion</title>
<style>
#imageMenu{width:500px;height:200px;overflow:hidden;}
/*动画样式*/
#imageMenu ul *{transition:all linear 0.2s;}
#imageMenu ul{width:800px;height:200px;padding: 0; margin: 0; list-style: none}
#imageMenu li{float:left;}
#imageMenu ul li a{width: 73px;}
/*放大后的样式*/
#imageMenu ul li.big a {width:200px;}
#imageMenu li a{width:98px;height:200px;display:block;text-indent:9999px;border-right:2px solid #fff;cursor:pointer;overflow:hidden;}
#imageMenu li.landscapes a{background:url(http://img1.sycdn.imooc.com//53451c66000170b503200200.jpg) no-repeat;}
#imageMenu li.people a{background:url(http://img1.sycdn.imooc.com//53451cc900012a0303200200.jpg) no-repeat;}
#imageMenu li.nature a{background:url(http://img1.sycdn.imooc.com//53451d020001336503200200.jpg) no-repeat;}
#imageMenu li.urban a{background:url(http://img1.sycdn.imooc.com//53451d370001d17203200200.jpg) no-repeat;}
#imageMenu li.abstract a{background:url(http://img1.sycdn.imooc.com//53451d5700013fd203200200.jpg) no-repeat;}
</style>
</head>
<body>
<div id="imageMenu">
<ul>
<li class="landscapes">
<a href="#link1">Landscapes</a>
</li>
<li class="people big">
<a href="#link1">People</a>
</li>
<li class="nature">
<a href="#link1">Nature</a>
</li>
<li class="urban">
<a href="#link1">Urban</a>
</li>
<li class="abstract">
<a href="#link1">Abstract</a>
</li>
</ul>
</div>
<script type="text/javascript">
function bind(el, eventType, callback){
if(typeof el.addEventListener === 'function'){
//标准事件绑定方法
el.addEventListener(eventType, callback, false);
}else if(typeof el.attechEvent === 'function'){
//IE事件绑定方法
el.attachEvent('on' + eventType, callback);
}
}
//鼠标悬停的处理函数
//清空所有LI元素的big
for(var i = 0; i < list.length; i++){
list[i].className = list[i].className.replace(/ ?big/g, '');
}
//根据事件的冒泡原理，找到需要变更class 的LI元素
//给当前元素加上class big
target.className += ' big';
}
function initList(){
//取得外部元素
var outer = document.getElementById('imageMenu');
//取得每个列表项
var list = outer.getElementsByTagName('li');
for(var i =0; i < list.length; i++){
//对每个列表绑定鼠标悬停事件的监听
bind(list[i], 'mouseover', mouseoverHandler);
}
}
//执行初始化函数
initList();
</script>
</body>
</html>
2019-04-21
查看完整代码
3-3 实战题
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="demo-css.css">
</head>
<body>
<div id="subject" class="wrapper">
<ul>
<li class="big">
<a href="#link1">
<img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#f62368">聚美妆</h3>
<p>聚美妆1/2周年庆</p>
<p class="price"><strong>1</strong><i>折起</i></p>
</div>
<s class="line"></s>
<i class="mask"></i>
</a>
</li>
<li>
<a href="#link2">
<img src="http://gtms01.alicdn.com/tps/i1/T1qxGLFsVbXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#ff578a">Baby购</h3>
<p>宝宝该换装了，新品抢购</p>
<p class="price"><strong>2.5</strong><i>折起</i></p>
</div>
<s class="line"></s> <i class="mask"></i>
</a>
</li>
<li>
<a href="#link2">
<img src="http://gtms02.alicdn.com/tps/i2/T1KOSNFxXaXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#6d3fa7">时装团</h3>
<p>时尚春装，清新小潮搭配</p>
<p class="price"><strong>1</strong><i>折起</i></p>
</div>
<s class="line"></s> <i class="mask"></i>
</a>
</li>
<li>
<a href="#link3">
<img src="http://gtms04.alicdn.com/tps/i4/T1CCeIFrVbXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#d61939">TV购</h3>
<p>补血养颜 就这么简单</p>
<p class="price"><strong>2.6</strong><i>折起</i></p>
</div>
<s class="line"></s><i class="mask"></i>
</a>
</li>
<li>
<a href="#link4">
<img src="http://gtms01.alicdn.com/tps/i1/T1jmKJFyJbXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#6f9400">聚新鲜</h3>
<p>最纯正的泰国香米</p>
<p class="price"><strong>5</strong><i>折起</i></p>
</div>
<i class="mask"></i>
</a>
</li>
</ul>
</div>
<script type="text/javascript" src="accordin.js"></script>
</body>
</html>
2019-04-21
查看完整代码
2-7 实战题
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="subject" class="wrapper">
<ul>
<li class="big">
<a href="#link1">
<img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#f62368">聚美妆</h3>
<p>聚美妆1/2周年庆</p>
<p class="price"><strong>1</strong><i>折起</i></p>
</div>
<s class="line"></s>
<i class="mask"></i>
</a>
</li>
<li>
<a href="#link1">
<img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#f62368">聚美妆</h3>
<p>聚美妆1/2周年庆</p>
<p class="price"><strong>1</strong><i>折起</i></p>
</div>
<s class="line"></s>
<i class="mask"></i>
</a>
</li>
<li>
<a href="#link1">
<img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#f62368">聚美妆</h3>
<p>聚美妆1/2周年庆</p>
<p class="price"><strong>1</strong><i>折起</i></p>
</div>
<s class="line"></s>
<i class="mask"></i>
</a>
</li>
<li>
<a href="#link1">
<img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#f62368">聚美妆</h3>
<p>聚美妆1/2周年庆</p>
<p class="price"><strong>1</strong><i>折起</i></p>
</div>
<s class="line"></s>
<i class="mask"></i>
</a>
</li>
<li>
<a href="#link1">
<img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#f62368">聚美妆</h3>
<p>聚美妆1/2周年庆</p>
<p class="price"><strong>1</strong><i>折起</i></p>
</div>
<s class="line"></s>
<i class="mask"></i>
</a>
</li>
</ul>
</div>
</body>
</html>
2019-04-21
查看完整代码
2-3 实战题
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="subject" class="wrapper">
<ul>
<li class="big">
<a href="#link1">
<img src="http://gtms01.alicdn.com/tps/i1/T1Lvt3Fv4kXXbA5QAK-195-120.jpg_Q90.jpg">
<div class="info">
<h3 style="color:#f62368">聚美妆</h3>
<p>聚美妆1/2周年庆</p>
<p class="price">？</p>
</div>
<s class="line"></s>
<i class="mask"></i>
</a>
</li>
</ul>
</div>
</body>
</html>
2019-04-21
查看完整代码