<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin:0;
padding:0;
}
.wrapper{
width: 938px;
height: 128px;
border: 1px solid #d3d3d3;
}
.wrapper li{
width: 156px;
height: 128px;
float:left;
overflow: hidden;
position: relative;
}
.wrapper li a{
display: block;
height: 128px;
width: 156px;
overflow: hidden;
}
.wrapper li a img{
position: absolute;
bottom: 0;
right: 0;
height: 72px;
width: 117px;
}
.wrapper .info{
position: absolute;
top: 0;
left: 0;
width: 136px;

}
.wrapper .info h3{
font-size: 14px;
font-weight: 700;
}
.wrapper .info p{
color:#868686;
font-size: 12px;
height: 22px;
line-height: 22px;
width: 136px;
}
.wrapper .info .price{
font-size: 14px;
font-style: italic;
color: #fa2a5d;
height: 35px;
}
.wrapper .line{
position: absolute;
right: 0;
top: 0;
}
.wrapper .mask{
position: absolute;
top:0;
left: 0;
height: 128px;
width: 156px;
background-color: #CCCCCC;
opacity:0;
}
.wrapper:hover .mask{
opacity: 0.3;
}
.wrapper ul *{
transition: all linear 0.2s;
}
.wrapper li.big, li.big a{
width: 314px;
}
.wrapper li.big img{
width: 196px;
height: 120px;
right: 0;
bottom: 0;
}
.wrapper li.big .info{
width: 290px;
}
.wrapper li.big h3{
font-size: 18px;
}
.wrapper li.big .info{
width: 290px;
}
.wrapper li.big h3{
font-size: 18px;
}
.wrapper li.big p{
font-size: 14px;
width: 166px;
}
.wrapper li.big p.price{
font-size: 16px;
padding-top: 7px;
}
.wrapper li.big a:hover .mask{
opacity: 0;
}
.line{
position: absolute;
right: 0;
width: 0;
height: 128px;
border: 1px dashed #ccc;
}
</style>
<body>
<div id="subject" class="wrapper">
<ul>
<li>
<a href="#">
<img src="img/img/e6657ca7-c4c5-43fc-9bd6-29999102fc61.jpg"/>
<div class="info">
<h3 style="color:#f62368">美妆品牌</h3>
<p>2周年</p>
<p class="price"><strong>1</strong><i>折起</i></p>
</div>
<i class="line"></i>
<i class="mask"></i>
</a>
</li>
<li class="big">
<a href="#">
<img src="img/img/e6657ca7-c4c5-43fc-9bd6-29999102fc61.jpg"/>
<div class="info">
<h3 style="color:#f62368">美妆品牌</h3>
<p>2周年</p>
<p class="price"><strong>1</strong><i>折起</i></p>
</div>
<i class="line"></i>
<i class="mask"></i>
</a>
</li>
<li>
<a href="#">
<img src="img/img/e6657ca7-c4c5-43fc-9bd6-29999102fc61.jpg"/>
<div class="info">
<h3 style="color:#f62368">美妆品牌</h3>
<p>2周年</p>
<p class="price"><strong>1</strong><i>折起</i></p>
</div>
<i class="line"></i>
<i class="mask"></i>
</a>
</li>
<li>
<a href="#">
<img src="img/img/e6657ca7-c4c5-43fc-9bd6-29999102fc61.jpg"/>
<div class="info">
<h3 style="color:#f62368">美妆品牌</h3>
<p>2周年</p>
<p class="price"><strong>1</strong><i>折起</i></p>
</div>
<i class="line"></i>
<i class="mask"></i>
</a>
</li>
<li>
<a href="#">
<img src="img/img/e6657ca7-c4c5-43fc-9bd6-29999102fc61.jpg"/>
<div class="info">
<h3 style="color:#f62368">美妆品牌</h3>
<p>2周年</p>
<p class="price"><strong>1</strong><i>折起</i></p>
</div>
<i class="line"></i>
<i class="mask"></i>
</a>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
window.onload=function() {
initList();
function initList() {
var outer=document.getElementById("subject");
var list=outer.getElementsByTagName('li');
for(var i=0;
i < list.length;
i++) {
bind(list[i], 'mouseover', mouseoverhandler);
}
}
function bind(el, eventType, callback) {
if(typeof el.addEventListener=='function') {
el.addEventListener(eventType, callback, false);
}
else if(typeof el.attachEvent==='function') {
el.attachEvent('on'+ eventType, callback);
}
}
function mouseoverhandler(e) {
var target=e.target || e.srcElement;
var outer=document.getElementById("subject");
var list=outer.getElementsByTagName('li');
for(var i=0;
i < list.length;
i++) {
list[i].className="";
}
while(target.tagName !='LI' || target.tarName=='BODY') {
target=target.parentNode;
}
target.className="big";
}
}
</script>
</html>

JS手风琴特效的更多相关文章

  1. 动漫网站基于jquery的横向手风琴特效

    今天给大家分享一款动漫网站基于jquery的横向手风琴特效.这款手风琴特效适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预 ...

  2. 图片每天换及纯css3手风琴特效

    <a target="_blank" id="a"><img id="img" /></a> <s ...

  3. 未封装的js放大镜特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  4. js手风琴图片切换实现原理及函数分析

    关键词: js手风琴 js百叶窗 js百页窗 实现原理解读 使用两层for循环实现, 第一层有三个功能,分别给第个li: 添加索引 预设位置 添加事件 第二层有两个功能,整理图片位置: 鼠标的li,以 ...

  5. 一款点击图片进行无限循环的jquery手风琴特效

    一款点击图片进行无限循环的jquery手风琴特效,点击手风琴折合点,可以无限循环的点击下去,很炫酷的手风琴哟! 还有每张图片的文字介绍,因为兼容IE6所以找来分享给大家这个jquery特效. 适用浏览 ...

  6. 第五章 JS典型特效

    注意: 1.JS在HTML中从上到下依次执行,所以获取元素的结果与JS的位置有关 <!DOCTYPE html> <html> <head> <title&g ...

  7. Three.js粒子特效，shader渲染初探（一篇非常详细的介绍）

    Three.js粒子特效,shader渲染初探 转载来源:https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序 关于Three.js,网上有不多 ...

  8. js 时钟特效

      时钟特效 CreateTime--2018年2月24日15:11:23 Author:Marydon 实现方式:都是基于HTML5的canvas标签实现的 款式一 借助jQuery插件实现 < ...

  9. 纯js代码实现手风琴特效

    我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型 ...

随机推荐

  1. Azure 虚拟机安全加固整理

    这篇文档不是原创,只是基于Azure官网上的Doc进行了相关链接的整理,从简单层面的安全设置,到更高层面的安全架构考量,以及Azure安全的白皮书及最佳实践,送给需要的你们,定有一款适合你! 做好数据 ...

  2. Monitorix系统和网络监控工具

    Monitorix 系统和网络监控公工具一.monitorixMonitorix是一款功能非常强大的免费开源轻型工具,目的在于监测Linux中的系统和网络资源.它可以定期收集系统和网络数据,并使用自己 ...

  3. Codeforces Round #321 (Div. 2) C Kefa and Park（深搜）

    dfs一遍,维护当前连续遇到的喵的数量,然后剪枝,每个统计孩子数量判断是不是叶子结点. #include<bits/stdc++.h> using namespace std; ; int ...

  4. HDU 5452 Minimum Cut （Spaning Tree）

    生成树的上的一个非根结点对应一条生成树上的边,然后这个结点的子树上连出去的边就对应去掉这条边的割, 然后就可以对树外的边求LCA,在LCA上标记,利用这个信息可以算出有多少条边在子树上,以及有多少条边 ...

  5. 绘制方式和OpenGL枚举对应关系

    绘制方式和OpenGL枚举对应关系 图元类型 OpenGL枚举量 点 GL_POINTS 线 GL_LINES 条带线 GL_LINE_STRIP 循环线 GL_LINE_LOOP 独立三角形 GL_ ...

  6. 【转】Java8学习笔记（1） -- 从函数式接口说起

    http://blog.csdn.net/zxhoo/article/details/38349011 函数式接口 理解Functional Interface(函数式接口,以下简称FI)是学习Jav ...

  7. PMD 编译 语法分析 词法分析 抽象语法树

    编译原理 163 课堂 http://mooc.study.163.com/learn/-1000002001?tid=1000003000#/learn/content?type=detail&am ...

  8. 不安装oracle客户端如何使用plsql连接数据库

    不安装oracle客户端如何使用plsql连接数据库 1. 准备工作 1.1下载plsqldev破解版软件 我这里使用plsqldev715版本 1.2下载instantclient-basic-wi ...

  9. lua调用java过程

    在cocos2dx框架中,有继承好的luaj文件来方便我们去使用lua调用java底层代码,注意:luaj只能使用在安卓平台下,如果在平台下使用,会出错, 所以使用前需要加平台判断,方法 如下: lo ...

  10. 【转】Qt Socket简单通信

    最近要用到Qt的Socket部分,网上关于这部分的资料都比较复杂,我在这总结一下,把Socket的主要部分提取出来,实现TCP和UDP的简单通信. 1.UDP通信 UDP没有特定的server端和cl ...