<!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. ios 设置cell的间距

    1.设置假的间距,我们在tableviewcell的contentView上添加一个view,比如让其距离上下左右的距离都是10:这个方法是最容易想到的: 2.用UIContentView来代替tab ...

  2. Linux上通过MySQL命令访问MySQL数据库时常见问题汇总

    Linux上通过mysql命令访问MySQL数据库时常见问题汇总 1)创建登录账号 #创建用户并授权 #允许本地访问 create user 'test'@'localhost' identified ...

  3. Linux之bash shell的学习

    1.什么是bash  shell bash 是Bourne Again Shell的简称,是从unix系统中的sh发展而来,是用户和偶Linux内核交互的工具,用户通过bash操作内核完成系统的使用和 ...

  4. method 'redisConnectionFactory' threw exception; nested exception is java.lang.NoClassDefFoundError

    spring boot 整合redis是报了如下错误 org.springframework.beans.factory.UnsatisfiedDependencyException: Error c ...

  5. 主成分分析法(PCA)答疑

    问:为什么要去均值? 1.我认为归一化的表述并不太准确,按统计的一般说法,叫标准化.数据的标准化过程是减去均值并除以标准差.而归一化仅包含除以标准差的意思或者类似做法.2.做标准化的原因是:减去均值等 ...

  6. Codevs1081 线段树练习 2

    题目描述 Description 给你N个数,有两种操作 1:给区间[a,b]的所有数都增加X 2:询问第i个数是什么? 输入描述 Input Description 第一行一个正整数n,接下来n行n ...

  7. ubuntu ： 无法安全地用该源进行更新，所以默认禁用该源。

    sudo apt update报错: 无法安全地用该源进行更新,所以默认禁用该源. 1.检查是否是网络出了问题,修改DNS:114.114.114.114,8.8.8.8 断开网卡再重新连接,成功! ...

  8. 02Qt信号与槽（1）

    信号与槽 1.概述 ​ 信号和槽机制是 Qt 的核心机制,信号和槽是一种高级接口,应用于对象之间的通信,它是 Qt 的核心特性,也是 Qt 区别于其他工具包的重要地方.信号和槽是 Qt 自行定义的一种 ...

  9. 好久没写了，总结一下lnux常用的命令（基础）

    Linux 1.init 0 关机 2.init 6  重启 3.ls 列出当前目录下的文件 4.cd  切换目录  cd -  切换最近使用的两次目录 5.pwd 查看当前所在的路径 (“-”为用户 ...

  10. python入门：py2.x里面除法或乘法这么写就可以计算小数点后面结果

    #!/usr/bin/env python # -*- coding:utf-8 -*- #py2.x里面除法或乘法这么写就可以计算小数点后面结果,更精确future(未来,译音:非忧车) divis ...