<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery手风琴带玻璃流光质感 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel='stylesheet prefetch' href='http://libs.useso.com/js/font-awesome/4.2.0/css/font-awesome.min.css'>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<section class="strips">
<article class="strips__strip">
<div class="strip__content">
<h1 class="strip__title" data-name="Lorem">Awesome</h1>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<h1 class="strip__title" data-name="Ipsum">Words</h1>
<div class="strip__inner-text">
<h2>Ettrics</h2>
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
<p>
<a href="#" target="_blank"><i class="fa fa-qq"></i></a>
</p>
</div>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<h1 class="strip__title" data-name="Dolor">Go</h1>
<div class="strip__inner-text">
<h2>Ettrics</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p>
<p>
<a href="#" target="_blank"><i class="fa fa-weibo"></i></a>
</p>
</div>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<h1 class="strip__title" data-name="Sit">Inside</h1>
<div class="strip__inner-text">
<h2>Ettrics</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p>
<p>
<a href="#" target="_blank"><i class="fa fa-weixin"></i></a>
</p>
</div>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<h1 class="strip__title" data-name="Amet">Here</h1>
<div class="strip__inner-text">
<h2>Ettrics</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p>
<p>
<a href="#" target="_blank"><i class="fa fa-leaf"></i></a>
</p>
</div>
</div>
</article>
<i class="fa fa-close strip__close"></i>
</section>
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
var Expand = function () {
var tile = $('.strips__strip');
var tileLink = $('.strips__strip > .strip__content');
var tileText = tileLink.find('.strip__inner-text');
var stripClose = $('.strip__close');
var expanded = false;
var open = function () {
var tile = $(this).parent();
if (!expanded) {
tile.addClass('strips__strip--expanded');
tileText.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
stripClose.addClass('strip__close--show');
stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
expanded = true;
}
};
var close = function () {
if (expanded) {
tile.removeClass('strips__strip--expanded');
tileText.css('transition', 'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)');
stripClose.removeClass('strip__close--show');
stripClose.css('transition', 'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)');
expanded = false;
}
};
var bindActions = function () {
tileLink.on('click', open);
stripClose.on('click', close);
};
var init = function () {
bindActions();
};
return { init: init };
}();
Expand.init();
</script>
</body>
</html>
jQuery手风琴带玻璃流光质感特效.zip
版权申诉
114 浏览量
2022-11-21
11:33:17
上传
评论
收藏 56KB ZIP 举报
jQuery手风琴带玻璃流光质感特效.zip （9个子文件） 
jQuery手风琴带玻璃流光质感特效 jiaoben3581 css 
default.css 6KB styles.css 9KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 4KB js jquery-1.8.3.min.js 91KB
jQuery手风琴带玻璃流光质感特效.jpg 20KB资源评论
