<!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. 【Unity3D】点击交互——简单工厂

    实现一个很简单的点击小游戏,学习交互相关的内容,在不实时创建销毁的情况下,使用简单工厂创建.管理.回收.复用标记. 游戏概述:点击出现标记,两秒内自动消失 游戏展示: 1.1实现点击效果. 1.1.1 ...

  2. javascript对象的学习

    一.对象的定义: 对象是JavaScript的一个基本数据类型,是一种复合值,它将很多值(原始值或者其他对象)聚合在一起,可通过名字访问这些值.即属性的无序集合. JavaScript 提供多个内建对 ...

  3. 大家一起和snailren学java-(一)对象导论

    OOP,是java语言的特性.面向对象思想贯穿整个java开发. 那什么是面向对象呢?什么是对象? 在面向对象设计语言看来,万事万物都为对象.生活中的一个物体,有自己的属性,有自己的活动.比如一辆汽车 ...

  4. Outlook 客户端无法通过 MAPI over HTTP协议 连接

    随着Exchange 版本更新升级,是否进行验证客户端建立MapiHttp连接所需的服务器设置已正确配置.即使服务器,负载均衡器和反向代理的所有设置都正确,您可能会遇到连接到Exchange Serv ...

  5. python 基础之for循环有限循环

    #  range(3) 表示 >>> range(3) [0, 1, 2] for循环 for i in range(3): print(i) 测试 0 1 2 打印1~100的奇数 ...

  6. fork新建进程

    #include <sys/types.h>#include<sys/wait.h>#include<unistd.h>#include<stdio.h> ...

  7. macbook secureCRT终端中文乱码的问题

    最近mac用crt中文总是显示的是一串串问号, 而用自带的终端软件就不会出现乱码, 经过一番折腾暂时解决了这一问题, 方法如下: 1. 打开终端操作 sudo vim /etc/profile 在最后 ...

  8. javaweb基础(23)_jsp自定义标签

    一.自定义标签的作用 自定义标签主要用于移除Jsp页面中的java代码. 二.自定义标签开发和使用 2.1.自定义标签开发步骤 1.编写一个实现Tag接口的Java类(标签处理器类) 1 packag ...

  9. 【转】PCA算法学习_1(OpenCV中PCA实现人脸降维)

    前言: PCA是大家经常用来减少数据集的维数,同时保留数据集中对方差贡献最大的特征来达到简化数据集的目的.本文通过使用PCA来提取人脸中的特征脸这个例子,来熟悉下在oepncv中怎样使用PCA这个类. ...

  10. 【贪心】bzoj1592: [Usaco2008 Feb]Making the Grade 路面修整

    贪心的经典套路:替换思想:有点抽象 Description FJ打算好好修一下农场中某条凹凸不平的土路.按奶牛们的要求,修好后的路面高度应当单调上升或单调下降,也 就是说,高度上升与高度下降的路段不能 ...