宝宝该换装了，新品抢购
2.5折起
时尚春装，清新小潮搭配
1折起
补血养颜 就这么简单
2.6折起
最纯正的泰国香米
5折起
对样式进行修改，使其接近淘宝网中的效果，代码如下：
<div class="jb51code">
<pre class="brush:css;">
body,ul,li,p {margin: 0;padding: 0}
ul,ol {list-style: none;}
.home-subjects-v2{height:128px;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border:1px solid #d3d3d3;border-color:rgba(0,.12);overflow:hidden;width:938px;margin-top:12px;background:#fff}
.home-subjects-v2 ul{width:1000px}
.home-subjects-v2 li{width:156px;height:128px;float:left;overflow:hidden;-webkit-transition:all .1s linear;-moz-transition:all .1s linear;-o-transition:all .1s linear;-ms-transition:all .1s linear;transition:all .1s linear}
.home-subjects-v2 li *{-webkit-transition:all .1s linear;-moz-transition:all .1s linear;-o-transition:all .1s linear;-ms-transition:all .1s linear;transition:all .1s linear}
.home-subjects-v2 li a{width:156px;height:128px;display:block;position:relative;cursor:pointer;text-decoration:none;overflow:hidden}
.home-subjects-v2 li a:hover{position:absolute}
.home-subjects-v2 li a:hover .mask{-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;-o-transition:opacity .2s ease-in;-ms-transition:opacity .2s ease-in;transition:opacity .2s ease-in}
.home-subjects-v2 li img{height:72px;width:117px;position:absolute;bottom:0;right:-13px}
.home-subjects-v2 li .line{height:128px;width:0;font-size:0;border-right:1px dashed #cacaca;position:absolute;right:0;top:4px}
.home-subjects-v2 li .info{position:absolute;top:0;left:0;width:136px;padding:4px 10px}
.home-subjects-v2 li .info h3{font-size:14px;font-weight:700}
.home-subjects-v2 li .info p{color:#868686;font-size:12px;overflow:hidden;width:136px;height:22px;line-height:22px}
.home-subjects-v2 li .info p.price{font-size:14px;font-style:italic;color:#fa2a5d;height:35px}
.home-subjects-v2 li .info p.price h3{font-size:22px;font-family:Arial;padding-right:2px}
.home-subjects-v2 li .info p.price i{font-size:14px}
.home-subjects-v2 li .info p.more{display:none}
.home-subjects-v2 .mask{height:128px;width:156px;display:block;position:absolute;top:0;left:0;background:#000;-ms-filter:"alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;-o-transition:opacity .2s ease-in;-ms-transition:opacity .2s ease-in;transition:opacity .2s ease-in;_display:none!important}
.home-subjects-v2 .big{width:314px}
.home-subjects-v2 .big a{width:314px}
.home-subjects-v2 .big img{width:195px;height:120px;right:0;bottom:0}
.home-subjects-v2 .big .info{width:294px}
.home-subjects-v2 .big .info h3{font-size:18px}
.home-subjects-v2 .big .info p{font-size:14px;width:166px}
.home-subjects-v2 .big .info p.price{font-size:16px;padding-top:7px}
.home-subjects-v2 .big .info p.price h3{font-size:28px}
.home-subjects-v2 .big .info p.price i{font-size:16px}
.home-subjects-v2 .big .info p.more{display:block;font-size:12px;color:#ff2a5b}
.home-subjects-v2 .big .mask{width:314px}
.home-subjects-v2:hover .mask{-ms-filter:"alpha(Opacity=15)";filter:alpha(opacity=15);opacity:.15;-webkit-transition:opacity .2s ease-in;-moz-transition:opacity .2s ease-in;-o-transition:opacity .2s ease-in;-ms-transition:opacity .2s ease-in;transition:opacity .2s ease-in}
在这里，我们需要注意的有：
1、超出的部分隐藏（overflow:hidden）、超出的部分显示（overflow:visible）、隐藏元素(display:none)、视觉隐藏元素(visibility:hidden)，我们要区分这几个概念
2、opacity透明度，在标准浏览器和ie浏览器中透明度是不一样的，前面的简单的程序没考虑，但是我们应该时刻有这种意识。
3、虚线的实现方法：.line { position:absolute; right:0px; width:0px;height:128px;border:1px dashed #ccc;}由于只需要虚线边框的效果，故该元素的宽度为0。
4、关于遮罩层。之前想到将整个大容器添加一个遮罩层，这种做法不可取。当鼠标悬停，大容器的遮罩层的透明度不为0，即便此时对单列表容器的遮罩层设置透明度也无法消除大容器的遮罩层所带来的影响。正确的做法应该是，对每个列表使用遮罩层，在鼠标悬停时:.wrap:hover .mask{opacity:0.15}.wrap:hover .mask:hover{opacity:0}这样做就不会出现叠加效应，因为都是对一个样式进行的设置，这里还要对比权值（汲取前面的经验）。
下面我们用原生的Javascript方法来实现：
在写之前，我们先理一下我们的思路，在前面的手风琴效果中我们只需要改变单一的宽度就行了，但是在这里我们的要求就高了很多。在CSS部分，我们已经有了变换效果的雏形，我们将class="big"添加到任意li中，该li就会发生改变。知道这里，我们接下来的做法又变得简单了。如何修改li中的class？我的思路如下：
首先写出一个主函数体获取元素li -》 list，然后list进行for循环，在for循环中进行绑定bind的鼠标点击事件，bind(list[i],"mouSEOver",mouSEOverHandler);（mouSEOverHandler 是mouSEOver的回调……）代码如下：
SEOverHandler);
}
}
然后我们来写事件的绑定，需要判断是标准事件绑定还是ie事件绑定，然后执行不同的操作，代码如下：
然后我们继续写鼠标悬停处理函数，代码如下：
函数
function mou
SEOverHandler(e) {
var target = e.target || e.srcElement;
var list = document.getElementsByTagName("li");
for(var i = 0; i < list.length; i++) {
//清空所有li元素的big
list[i].className = "";
}
//根据事件的冒泡原理，找到需要变更class的li元素
while(target.tagName != "LI" && target.tagName != "BODY") {
target = target.parentNode;
}
//给当前元素
加上class big
target.className = "big";
}
最后我们将所有函数写在window.onload里面，别忘了调用initList();。
最终实现效果如图：
可以点击链接查看，链接：
用Jquery方法来实现我们想要的效果：
从前面Jquery的例子我们可以看出，用Jquery方法要简单些，我们按照Javascript的分析思路，来完成Jquery代码，代码如下：
SEOver(e) {
//
获取到li
标签
var list = $('#subject li');
//
获取到目标li
标签，进行
添加或
删除操作
var target = $(e.target).parents('li');
list.removeClass('big');
target.addClass('big');
}
(function() {
var outer = $('#subject');
outer.find('li').on('mouSEOver',mouSEOver);
})()
最终结果与Javascript方法的结果一样，可以点击链接查看，链接：
用CSS3做书签：
html部分代码：
点
绛
唇
·
花
信
来
时
点绛唇·花信来时
又成春瘦，折断门前柳。
天与多情，不与长相守。
分飞后，泪痕和酒，占了双罗袖。
403_127@译文:应花期而来的风哟，你虽来了，但人已离散去，全不像那花儿依旧。 人到春来瘦，等候着心上人，倚门盼归，折断了门前杨柳。 上天赋予了人多情的心，却不肯给予长相守的机会。自你我分别后，伴随我的，只是相思的泪、浇愁的酒，沾湿了我的双罗袖。
鹧
鸪
天
·
守
得
莲
开
结
伴
游
鹧鸪天·守得莲开结伴游
来时浦口云随棹，采罢江边月满楼。
花不语，水空流，年年拚得为花愁。
明朝万一西风动，争向朱颜不耐秋。
403_127@译文:湖塘中长满了浮萍，姑娘们相约来到湖中，一起拨开浮萍采莲。来时，旭日初升，浦口水面上如烟的水汽，在长桨四周缭绕。采莲后回到岸上，月光已照满了高楼。 好花无语，流水无情，年年都为花落春去而伤愁。明天万一西风骤然强劲，无奈莲花抵抗不住秋寒，很快就会凋落。
凉
州
词
二
首
·
其
一
凉州词二首·其一
欲饮琵琶马上催。
醉卧沙场君莫笑，
古来征战几人回？
403_127@译文:酒筵上甘醇的葡萄美酒盛满在精美的夜光杯之中，歌伎们弹奏起急促欢快的琵琶声助兴催饮，想到即将跨马奔赴沙场杀敌报国，战士们个个豪情满怀。 今日一定要一醉方休，即使醉倒在战场上又何妨？此次出征为国效力，本来就打算马革裹尸，没有准备活着回来。
夜
雨
寄
北
夜雨寄北
巴山夜雨涨秋池。
何当共剪西窗烛，
却话巴山夜雨时。
403_127@译文:您问归期，归期实难说准，巴山连夜暴雨，涨满秋池。何时归去，共剪西窗烛花，当面诉说，巴山夜雨况味。
CSS部分代码：
<div class="jb51code">
<pre class="brush:css;">
html {
background: -webkit-radial-gradient(center,ellipse,#232323 0%,#000 100%);
height: 100%;
}
dise {
width: 1010px;
height: 380px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
background-color: rgba(255,255,0.1);
}
.demo {
position: absolute;
margin-top: 20px;
width: 1040px;
margin-left: auto;
margin-right: auto;
}
.main_promo li {
position: relative;
float: left;
left: 0px;
top: 0px;
padding: 5px 0 5px 6px;
overflow: hidden;
}
.main_promo div {
float: left;
}
.slide a {
position: relative;
z-index: 1;
display: block;
width: 50px;
height: 300px;
border-radius: 0px;
background-color: rgba(255,0.1);
transition: all 1.3s;
}
.slide p {
/设置字体/
position: absolute;
top: 20px;
left: 10px;
color: #A7170A;
height: 20px;
width: 100px;
font-family: 方正启体繁体;
font-size: 20px;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,.8);
word-break: break-all;
/-webkit-transform: rotate(-90deg);/
}
.slide_img {
overflow: hidden;
width: 0;
height: 0;
/此处的长宽设置不能省略，否则不能隐藏/
transition: width 0.7s ease-in-out;
}
input[type="radio"] {
/radio和a重合，达到选择的效果/
position: absolute;
left: 5px;
z-index: 99;
width: 50px;
height: 300px;
opacity: 0;
}
input:checked~ .slide a {
opacity: 1;
background: rgba(255,0.1);
/按钮闪光效果/
}
input:checked~ .slide_img {
width: 692px;
height: 300px;
/此处的长宽必须设置，否则不显示/
margin-left: 8px;
}
/将背景颜色换成图片，并在上面添加书签，设置其css样式/
.slide_img h4 {
font-size: 28px;
font-weight: bold;
background-color: rgba(100,.5);
color: #000080;
}
.slide_img .p1 {
background-color: rgba(255,.5);
color: #000080;
}
.slide_img .p2 {
background-color: rgba(0,.8);
color: #00FFFF;
}
.slide_img .p2 span {
font-size: 40px;
font-weight: bold;
}
具体实现效果截图：
具体案例展示：http://sandBox.runjs.cn/show/u8dyr3hx
后面的话：
在用Javascript方法做仿淘宝手风琴效果是在网上找视频学的，但是最终视频里面的代码与实际运行结果不符，后面又在《Javascript高级程序设计上》专门看关于事件的部分内容，突然间觉得自己前面学习的太浅了，后面要抽时间把这一段给补上。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
原文链接：https://www.f2er.com/js/45188.html
