<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
html, body { min-width: 1200px; font-family: 'Microsoft Yahei', '\5FAE\8F6F\96C5\9ED1', Arial, 'Hiragino Sans GB', '\5B8B\4F53'; margin: 0; padding: 0; font-size: 12px; color: #5e5e5e; background-color: #f0f0f0; }
div, form, img, ul, ol, li, th, td, dl, dt, dd, button, input, p { margin: 0; padding: 0; border: 0 }
li { list-style-type: none }
h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-size: 14px; font-weight: 500 }
a { cursor: pointer; outline: none }
a:link, a:visited { text-decoration: none }
a:hover { text-decoration: none }
.white { color: #fff }
.red1 { color: #ea544a }
.blue1 { color: #474e5d }
.blue2 { color: #8cb5de }
.grey1 { color: #a5a5a5 }
.grey2 { color: #5e5e5e }
.grey3 { color: #323232 }
.pink1 { color: #f3a6a2 }
.pink2 { color: #fce5e4 }
.size12 { font-size: 12px }
.size14 { font-size: 14px }
.size16 { font-size: 16px }
.size18 { font-size: 18px }
.size20 { font-size: 20px }
.size24 { font-size: 24px }
.size30 { font-size: 30px }
.size36 { font-size: 36px }
.size40 { font-size: 40px }
.size48 { font-size: 48px }
.fl { float: left }
.clearfix { display: inline-table; display: block; zoom: 1 }
.clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden }
/***********************************************************************************************/
.cont-box { width: 100%; margin-bottom: 8px }
.cont-box .cont-box-title { color: #474e5d; padding: 15px 0 5px 0 }
.cont-box .cont-box-title span { margin-right: 10px; float: left; line-height: 24px }
.cont-box .cont-box-title span.title { font-size: 24px; margin-right: 10px }
.cont-box .cont-box-title span.red-line { font-size: 20px; color: #ea544a; font-weight: bold }
.cont-box .cont-box-title span.title-info { color: #5e5e5e; font-size: 12px; line-height: 28px }
.cont-box .cont-box-title a.more-link { float: right; font-size: 12px; line-height: 30px; margin-right: 25px }
.cont-box .cont-box-title a.more-link:hover { color: #ea544a }
.pro-box { width: 100%; background: #fff; height: 240px; margin-bottom: 10px; position: relative; border: 1px solid #e6e6e6 }
.pro-box:hover { -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, .2); -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, .2); box-shadow: 2px 2px 8px rgba(0, 0, 0, .2); border-color: #d6d6d6 }
.pro-img { width: 315px; height: 100% }
.pro-info-box { width: 505px; height: 100%; position: relative }
.pro-title-box { padding: 20px 0 0 20px; height: 60px; overflow: hidden }
.pro-title-box .pro-type-icon { width: 35px; height: 35px; margin-right: 10px }
.pro-title-box .pro-title { font-size: 18px; line-height: 35px; color: #5e5e5e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; width: 425px }
.pro-title-box .pro-title:hover { color: #ea544a }
.pro-title-box .pro-title a { color: #323232 }
.pro-title-box .pro-title a:hover { color: #ea544a }
.pro-title-box .pro-sub-title { font-size: 14px; position: relative; color: #a5a5a5; display: block; width: 425px; clear: both; left: 45px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pro-detail-box { padding-left: 65px; position: relative }
.pro-detail-box .pro-detail-box-right { height: 135px; width: 250px; position: relative; }
.pro-detail-box .pro-detail-box-right img { height: 135px }
.pro-detail-box .pro-detail-box-right2 { height: 125px; width: 250px; margin-top: 10px; position: relative; }
.pro-detail-box .pro-detail-box-right2 .flash-buy-info h6 { margin-bottom: 10px; }
.pro-detail-box .pro-detail-box-right2 .bill-raise-wrap{height: 60px; line-height: 60px; color: #4dd9ce; font-size: 12px; border-left: 1px dashed #e6e6e6; padding-left: 30px;}
.pro-detail-box .pro-detail-box-right2 .bill-raise-process{width: 70px; height: 70px; position: relative; float: left;}
.pro-detail-box .pro-detail-box-right2 .bill-raise-process .bill-raise-con{position: absolute; margin: -5px 0 0 10px; height: 70px;}
.pro-detail-box .pro-detail-box-right2 .bill-raise-process .bill-raise-num{position: absolute; width: 68px; left: 0; top:0; text-align: center; margin-left: 10px; font-size: 18px; font-family: arial, "microsoft yahei";}
.pro-detail-box .pro-detail-box-right2 .bill-limited{clear: both; padding: 10px 0 0 30px; margin-top: 20px;}
.pro-detail-box .income { width: 165px; height: 85px; margin-bottom: 5px; }
.pro-detail-box .income2 { width: 165px; height: 75px; margin-bottom: 5px; margin-top: 10px; }
.pro-detail-box .income2 .pub-income h6 { margin-bottom: 0; }
.pro-box .pro-box-maskLayer { position: absolute; left: 0; top: 0; height: 100%; width: 100%; z-index: 10; overflow: hidden }
.pro-box .pro-box-maskLayer .mask { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: #000; opacity: .5; filter: alpha(opacity:50); z-index: 1 }
.pro-box .pro-box-maskLayer .sell-out { position: absolute; width: 185px; height: 185px; background-image: url(sprite/container.png); background-position: -268px 0; z-index: 2; left: -25px; top: -25px }
.pro-box .pro-box-maskLayer .order { position: absolute; z-index: 2; top: 50px; left: 40px }
.pro-box .pro-box-maskLayer .order .order-input { width: 275px; height: 30px; position: relative; top: 20px; border-radius: 3px; overflow: hidden }
.pro-box .pro-box-maskLayer .order .order-input input { padding: 8px; height: 14px; width: 180px }
.pro-box .pro-box-maskLayer .order .order-input .order-btn { position: absolute; right: 0; top: 0; background: #ea544a; width: 80px; height: 30px; color: #fff; line-height: 30px; text-align: center; cursor: pointer }
.pro-box .pub-income h6 { margin-bottom: 5px }
.pro-box .sell-out-pic { width: 100px; height: 86px; background: url(i/sell-out-pic.png); position: absolute; bottom: -25px; left: 150px; z-index: 10; }
.pro-box .sell-out-pic-kick { background: url(i/sell-out-pic-kick.png) }
.pro-box .daishou { background: url(i/daishou.png) }
.pro-type1 .pro-title-box .pro-type-icon { background-image: url(http://jr.jd.com/resources/superstar/css/slice/pro-type-icon-01.png); }
.pro-type2 .pro-title-box .pro-type-icon { background-image: url(http://jr.jd.com/resources/superstar/csscss/slice/pro-type-icon-02.png); }
.pro-type3 .pro-title-box .pro-type-icon { background-image: url(http://jr.jd.com/resources/superstar/csscss/slice/pro-type-icon-03.png); }
.pro-type5 .pro-title-box .pro-type-icon { background-image: url(http://jr.jd.com/resources/superstar/csscss/slice/pro-type-icon-05.png); }
.pro-type6 .pro-title-box .pro-type-icon { background-image: url(http://jr.jd.com/resources/superstar/csscss/slice/pro-type-icon-07.png); }
.pro-type4 .pro-title-box .pro-type-icon span { width: 22px; height: 52px; display: block; position: absolute; left: 0; top: 0; background-image: url(http://jr.jd.com/resources/superstar/csscss/slice/pro-type-icon-04.png); text-align: center; font-size: 12px; color: #fff; line-height: 14px; padding-top: 2px; }
.pro-type4 .pro-title-box .pro-type-icon span.icon-long { height: 65px; background-image: url(http://jr.jd.com/resources/superstar/csscss/slice/pro-type-icon-04-long.png); }
.pro-right-extendInfo { position: absolute; bottom: 15px; left: 30px; color: #ea544a; font-size: 16px }
.pro-progress-box { height: 95px; position: relative; width: 390px; }
.pro-progress-box .progress-money { padding-top: 10px; font-size: 14px; position: relative; }
.pro-progress-box .progress-bar { width: 100%; height: 10px; position: relative; background-color: #f0f0f0; border-radius: 10px; top: 5px; overflow: hidden; }
.pro-progress-box .scroll-cent { position: absolute; top: 30px; right: 0; color: #5e5e5e; font-size: 18px; font-weight: bold }
.pro-progress-box .progress-bar .scroll-bar { height: 100%; position: absolute; left: 0; top: 0; border-radius: 10px; background-color: #90cb7e; max-width: 100%; }
.pro-time-info { position: absolute; bottom: -30px; right: 20px; }
.fundImageDisp { position: relative; width: 200px !important; left: 25px; }
.pro-type4 .pro-title-box .pro-title { font-size: 16px }
.pro-type4 .pro-title-box .pro-type-icon { width: 20px }
.pro-type4 .pro-detail-box { padding-left: 50px; float: left; width: 500px }
.pro-type4 .pro-detail-box .income { width: 145px }
.pro-type4 .pro-detail-box .time-box { line-height: 40px; color: #a5a5a5; clear: both }
.pro-type5 .pro-right-extendInfo { position: absolute; bottom: 15px; left: 30px; color: #ea544a; font-size: 16px }
.kickStar-box { position: relative; height: 260px; overflow: hidden; border: 1px solid #e6e6e6 }
.kickStar-box:hover { -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, .2); -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, .2); box-shadow: 2px 2px 8px rgba(0, 0, 0, .2); border-color: #d6d6d6 }
.kickStar-box .pro-box { height: 260px; left: 0; position: absolute; top: 0; border: none }
.kickStar-box .pro-img { width: 400px; height: 220px; margin: 20px 10px 10px 20px; *-margin-left: 10px; overflow: hidden }
.kickStar-box .pro-img img { width: 400px; height: 220px }
.kickStar-box .pro-info-box { width: 275px }
.kickStar-box .pro-info-box .pro-title-box { height: 80px }
.kickStar-box .pro-info-box .pro-title-box .pro-sub-title { line-height: 20px; display: block; font-size: 12px; left: 0; white-space: normal; height: 40px }
.kickStar-box .pro-info-box .pro-title a { color: #5e5e5e; display: block; height: 35px; overflow: hidden }
.kickStar-box .pro-progress-box { width: 240px; height: 78px }
.kickStar-box .pro-progress-box .scroll-cent { font-size: 14px; font-weight: normal; top: 22px }
.kickStar-box .pro-detail-box { padding-left: 20px; width: 255px }
.kickStar-box .kickStar-info ul { width: 500px }
.kickStar-box .kickStar-info ul li { float: left; margin-right: 10px; padding-top: 10px }
.kickStar-box .kickStar-info .icon18 { float: left; position: relative; top: 1px; margin-right: 5px }
.kickStar-box .kickStar-info .icon-support { background-image: url(sprite/container.png); background-position: -248px -226px }
.kickStar-box .kickStar-info .icon-focus { background-image: url(sprite/container.png); background-position: -248px -245px }
.kickStar-box .kickStar-info .icon-praise { background-image: url(sprite/container.png); background-position: -248px -264px }
.kickStar-box .pro-title { width: 260px }
.kickStar-box .pro-title span { width: 260px; display: block }
.kickStar-table { width: 90px; height: 220px; position: absolute; right: 0; top: 20px; z-index: 5; border-left: 2px solid #e6e6e6 }
.kickStar-table ul li { height: 55px; text-indent: 15px; position: relative; left: -2px; border-left: 2px solid #e6e6e6 }
.kickStar-table ul li a { height: 30px; display: block; color: #474e5d; cursor: pointer; position: relative; line-height: 30px; top: 12px; text-overflow: ellipsis; overflow: hidden; padding-right: 6px; white-space: nowrap }
.kickStar-table ul li a:hover { color: #ea544a }
.kickStar-table ul .current { border-left: 2px solid #ea544a }
.kickStar-table ul .current a { color: #ea544a }
.kickStar-box .pro-info-box .pro-title a:hover { color: #ea544a }
</style>
</head>
<body>
<div style="width:850px;">
<div class="cont-box">
<h6 class="cont-box-title clearfix">
<span class="title">众筹</span>
<span class="red-line">|</span>
<span class="title-info">创意无限，收获梦想</span>
<a class="more-link grey1" href="http://z.jd.com" clstag="jr|keycount|jr_shouye|zcmore" target="_blank">更多></a>
</h6>
<div class="kickStar-box" id="kickStarBox">
<div class="kickStar-table">
<ul id="kickStarTable">
<li class="current"><a>汇清全智能桌面空气净化机</a></li>
<li class=""><a>Fitband让你睡得更好</a></li>
<li class=""><a>智能家用卡片式心电仪</a></li>
<li class=""><a>全球首款智能随身检测净化器</a></li>
</ul>
</div>
<div class="pro-box pro-type4 " style="z-index: 2; top: 0px;">
<div class="left-shadow"></div>
<div class="pro-img fl">
<a href="http://z.jd.com/project/details/488.html?from=jrindex" target="_blank" clstag="jr|keycount|jr_shouye|zcimg1"><img class="lazyEle" data-src="http://img30.360buyimg.com/jr_image/jfs/t187/162/2775038083/29674/39e08a27/53d9b2deN782a0dc1.jpg" src="http://img30.360buyimg.com/jr_image/jfs/t187/162/2775038083/29674/39e08a27/53d9b2deN782a0dc1.jpg" alt=""> </a>
</div>
<div class="pro-info-box fl">
<div class="pro-title-box clearfix">
<h6 class="pro-title fl">
<a href="http://z.jd.com/project/details/488.html?from=jrindex" target="_blank" clstag="jr|keycount|jr_shouye|zcname1">汇清全智能桌面空气净化机</a>
<span class="pro-sub-title">国内首款360°涡轮风机净化，全智能桌面空气净化机，完美解决风量噪音问题，附带加湿模式、睡眠模式及APP智能控制功能，让你净享健康深呼吸！</span></h6>
</div>
<div class="pro-detail-box clearfix">
<div class="pro-progress-box clearfix" kickid="488">
<p class="progress-money">
<span class="size24 font-bold red1">71634</span>
<span class="red1">元</span>
<span class="grey1">（已筹集）</span>
</p>
<div class="scroll-cent">358%</div>
<div class="progress-bar">
<div style="width: 358%;" class="scroll-bar"></div>
</div>
<p class="time-box">
剩余 <span class="day font-en">29</span> 天 <span class="hour font-en">2</span> 小时
<span class="min font-en">28</span> 分 <span class="second font-en">27</span> 秒
</p>
<div class="kickStar-info">
<ul>
<li><i class="icon18 icon-support"></i>支持 <span>185</span></li>
<li><i class="icon18 icon-focus"></i>关注 <span>13002</span></li>
<li><i class="icon18 icon-praise"></i>赞 <span>3649</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="pro-box pro-type4 " style="top: 260px; z-index: 2;">
<div class="left-shadow"></div>
<div class="pro-img fl">
<a href="http://z.jd.com/project/details/578.html?from=jrindex" target="_blank" clstag="jr|keycount|jr_shouye|zcimg2"><img class="lazyEle" data-src="http://img30.360buyimg.com/jr_image/jfs/t238/207/18958243/25416/da60d1b7/53e33b20N2ef71d37.jpg" src="http://img30.360buyimg.com/jr_image/jfs/t238/207/18958243/25416/da60d1b7/53e33b20N2ef71d37.jpg" alt=""> </a>
</div>
<div class="pro-info-box fl">
<div class="pro-title-box clearfix">
<h6 class="pro-title fl">
<a href="http://z.jd.com/project/details/578.html?from=jrindex" target="_blank" clstag="jr|keycount|jr_shouye|zcname2">Fitband让你睡得更好</a>
<span class="pro-sub-title">Fitband是一款专注于睡眠的手环，采用全球首创的多维度检测睡眠的核心算法，应用了智能音乐助眠与有氧运动助眠的双重助眠模式，让你睡得更好。</span></h6>
</div>
<div class="pro-detail-box clearfix">
<div class="pro-progress-box clearfix" kickid="578">
<p class="progress-money">
<span class="size24 font-bold red1">174347</span>
<span class="red1">元</span>
<span class="grey1">（已筹集）</span>
</p>
<div class="scroll-cent">1743%</div>
<div class="progress-bar">
<div style="width: 1743%;" class="scroll-bar"></div>
</div>
<p class="time-box">
剩余 <span class="day font-en">31</span> 天 <span class="hour font-en">18</span> 小时
<span class="min font-en">56</span> 分 <span class="second font-en">52</span> 秒
</p>
<div class="kickStar-info">
<ul>
<li><i class="icon18 icon-support"></i>支持 <span>360</span></li>
<li><i class="icon18 icon-focus"></i>关注 <span>474</span></li>
<li><i class="icon18 icon-praise"></i>赞 <span>626</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="pro-box pro-type4 " style="top: 260px; z-index: 2;">
<div class="left-shadow"></div>
<div class="pro-img fl">
<a href="http://z.jd.com/project/details/374.html?from=jrindex" target="_blank" clstag="jr|keycount|jr_shouye|zcimg3"><img class="lazyEle" data-src="http://img30.360buyimg.com/jr_image/jfs/t193/108/2878464603/36500/4c737853/53d9bc43N79a7d1ef.jpg" src="http://img30.360buyimg.com/jr_image/jfs/t193/108/2878464603/36500/4c737853/53d9bc43N79a7d1ef.jpg" alt=""> </a>
</div>
<div class="pro-info-box fl">
<div class="pro-title-box clearfix">
<h6 class="pro-title fl">
<a href="http://z.jd.com/project/details/374.html?from=jrindex" target="_blank" clstag="jr|keycount|jr_shouye|zcname3">智能家用卡片式心电仪</a>
<span class="pro-sub-title">据统计，中国现有2.5亿心脏病及相关病患者，平均每10秒就有1人死于心脏病变，我们打造出一款测量精确、使用方便心电仪产品。</span>
</h6>
</div>
<div class="pro-detail-box clearfix">
<div class="pro-progress-box clearfix" kickid="374">
<p class="progress-money">
<span class="size24 font-bold red1">42583</span>
<span class="red1">元</span>
<span class="grey1">（已筹集）</span>
</p>
<div class="scroll-cent">426%</div>
<div class="progress-bar">
<div style="width: 426%;" class="scroll-bar"></div>
</div>
<p class="time-box">
剩余 <span class="day font-en">23</span> 天 <span class="hour font-en">16</span> 小时
<span class="min font-en">23</span> 分 <span class="second font-en">35</span> 秒
</p>
<div class="kickStar-info">
<ul>
<li><i class="icon18 icon-support"></i>支持 <span>161</span></li>
<li><i class="icon18 icon-focus"></i>关注 <span>219</span></li>
<li><i class="icon18 icon-praise"></i>赞 <span>989</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="pro-box pro-type4 " style="top: 260px; z-index: 2;">
<div class="left-shadow"></div>
<div class="pro-img fl">
<a href="http://z.jd.com/project/details/449.html?from=jrindex" target="_blank" clstag="jr|keycount|jr_shouye|zcimg4"><img class="lazyEle" data-src="http://img30.360buyimg.com/jr_image/jfs/t199/242/2839664746/329892/ef225e41/53d9cb96Nc5715c6f.jpg" src="http://img30.360buyimg.com/jr_image/jfs/t199/242/2839664746/329892/ef225e41/53d9cb96Nc5715c6f.jpg" alt=""> </a>
</div>
<div class="pro-info-box fl">
<div class="pro-title-box clearfix">
<h6 class="pro-title fl">
<a href="http://z.jd.com/project/details/449.html?from=jrindex" target="_blank" clstag="jr|keycount|jr_shouye|zcname4">全球首款智能随身检测净化器</a>
<span class="pro-sub-title">SANYUKI CAR手机APP智能管理高效去除车内甲醛PM2.5有机物，分享环境参数，净化历史可查，耗材状态可追踪等，成为出行必备安心管家</span></h6>
</div>
<div class="pro-detail-box clearfix">
<div class="pro-progress-box clearfix" kickid="449">
<p class="progress-money">
<span class="size24 font-bold red1">24111</span>
<span class="red1">元</span>
<span class="grey1">（已筹集）</span>
</p>
<div class="scroll-cent">241%</div>
<div class="progress-bar">
<div style="width: 241%;" class="scroll-bar"></div>
</div>
<p class="time-box">
剩余 <span class="day font-en">26</span> 天 <span class="hour font-en">8</span> 小时
<span class="min font-en">23</span> 分 <span class="second font-en">34</span> 秒
</p>
<div class="kickStar-info">
<ul>
<li><i class="icon18 icon-support"></i>支持 <span>89</span></li>
<li><i class="icon18 icon-focus"></i>关注 <span>110</span></li>
<li><i class="icon18 icon-praise"></i>赞 <span>238</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://static.360buyimg.com/finance/js/jquery.js"></script>
<script type="text/javascript">
$(function () {
/*kickStar-box*/
(function () {
var $kickStarBox = $("#kickStarBox");
var $contBox = $kickStarBox.children(".pro-box")
var $tableBox = $("#kickStarTable").children("li");
var current = $contBox.eq(0);
var currentIndex = 0;
var target = null;
var targetIndex = 0;
var moveRange = current.height();
var direction = 1;
var speed = 300;
$tableBox.bind("mouseenter", function () {
$(this).addClass("current").siblings().removeClass("current");
targetIndex = $(this).index();
if (targetIndex == currentIndex)return false;
direction = (targetIndex - currentIndex) > 0 ? -1 : 1;
target = $contBox.eq(targetIndex);
current.css({"top": 0, "zIndex": "2"});
target.css({"top": -direction * moveRange + "px", "zIndex": "2"});
current.stop().animate({
top: direction * moveRange + "px"
}, speed);
target.stop().animate({
top: 0 + "px"
}, speed);
current = target;
currentIndex = targetIndex;
})
})();
/*众筹ajax*/
(function () {
var $kickStarBox = $(".pro-progress-box");
ajaxKickStarData($kickStarBox);
function ajaxKickStarData(obj) {
var idAry = [];
obj.each(function () {
idAry.push($(this).attr("kickid"));
})
var idList = idAry.join(",");
$.ajax({
url: "http://cf.jr.jd.com/find_project_info.action",
type: "get",
data: {"pids": idList},
dataType: "jsonp",
success: function (data) {
for (var i = 0; i < obj.length; i++) {
if (!data[i])continue;
var $scrollCent = obj.eq(i).find(".scroll-cent");
var $scrollBar = obj.eq(i).find(".scroll-bar");
var $money = obj.eq(i).find(".progress-money").children("span").eq(0);
var $day = obj.eq(i).find(".day");
var $hour = obj.eq(i).find(".hour");
var $min = obj.eq(i).find(".min");
var $second = obj.eq(i).find(".second");
var $kickStarInfo = obj.eq(i).find(".kickStar-info")
var cent = data[i].progress;
var totalSecond = data[i].second;
var moneyNum = data[i].collectedAmount;
$scrollCent.html(cent + "%");
$scrollBar.css("width", cent + "%");
$money.html(moneyNum);
if ($kickStarInfo[0]) {
var $infoSpan = $kickStarInfo.find("span");
$infoSpan.eq(0).html(data[i].supports);
$infoSpan.eq(1).html(data[i].focus);
$infoSpan.eq(2).html(data[i].praise);
}
new CountDown({
$day: $day,
$hour: $hour,
$min: $min,
$second: $second,
totalSecond: totalSecond,
endFn: function () {
if (obj.eq(i).siblings(".pub-btn")[0]) {
obj.eq(i).siblings(".pub-btn").addClass("btn-disable").find("a").attr("href", "javascript:;").html("已结束");
obj.eq(i).parent().append('<div class="sell-out-pic sell-out-pic-kick"></div>');
}
}
});
}
}
})
}
})();
});
/*****************************************************************************************/
/**
* 轮播插件[支持渐隐和直接切换]
* 2014-7-7 :完成添加动态banner支持
*/
function ScrollBar(settings) {
this.leftBtn = settings.leftBtn || null; //向左
this.rightBtn = settings.rightBtn || null; //向右
this.scrollBody = settings.scrollBody; //轮播的整体区域
this.holder = settings.holder; //轮播的图片层
this.indexBtn = settings.indexBtn || null; //快捷跳转按钮
this.indexBtnClass = settings.indexBtnClass || null; //快捷跳转按钮class
this._autoPlay = settings._autoPlay || false; //是否自动播放
this.scrollType = settings.scrollType || "opacity"; //滚动方式 默认为渐隐
this.css3Animate = settings.css3Animate || false;
this._init().bindEvent();
}
ScrollBar.prototype = {
_init: function () {
this.currentIndex = 0; //当前轮播到第几张图
this.targetIndex = 0; //当前轮播图要到第几张去
this.itemNum = this.holder.length; //一共几张图
this.scrollSpeed = 500; //过渡动画速度
if (this.css3Animate)this.checkPicLoaded(this.holder.eq(this.currentIndex).show());
if (this._autoPlay) { //是否自动播放
this.autoPlayLag = 10000; //自动播放间隔
this.autoPlay();
}
return this;
},
bindEvent: function () {
var self = this;
this.leftBtn && this.leftBtn.bind("click", function () { //左翻
self.targetIndex--;
if (self.targetIndex < 0)self.targetIndex = self.itemNum - 1;
self.scroll("left");
})
this.rightBtn && this.rightBtn.bind("click", function () { //右翻
self.targetIndex++;
if (self.targetIndex >= self.itemNum)self.targetIndex = 0;
self.scroll("right");
})
this.indexBtn && this.indexBtn.bind("click", function () { //直接跳转
if ($(this).index() > self.targetIndex) {
self.targetIndex = $(this).index();
self.scroll("right");
} else if ($(this).index() < self.targetIndex) {
self.targetIndex = $(this).index();
self.scroll("left");
}
})
this._autoPlay && this.scrollBody.bind("mouseenter", function () {
clearInterval(self.timer);
self.leftBtn.show();
self.rightBtn.show();
}).bind("mouseleave", function () {
self.autoPlay();
self.leftBtn.hide();
self.rightBtn.hide();
})
return this;
},
scroll: function (type) {
var self = this;
this.indexBtn.removeClass(this.indexBtnClass).eq(this.targetIndex).addClass(this.indexBtnClass)
var $current = this.holder.eq(this.currentIndex).show();
if (this.css3Animate)self.resetLayer($current)
var $target = this.holder.eq(this.targetIndex).show();
if (this.title) {
this.title.eq(this.currentIndex).hide();
this.title.eq(this.targetIndex).show();
}
if (self.css3Animate)self.checkPicLoaded($target)
switch (this.scrollType) {
case "opacity":
$target.css("opacity", 0)
$current.stop().animate({
opacity: 0
}, self.scrollSpeed, function () {
$current.hide();
})
$target.stop().animate({
opacity: 1
}, self.scrollSpeed, function () {
})
break;
}
this.currentIndex = this.targetIndex;
},
autoPlay: function () {
var self = this;
if (this.timer)clearInterval(this.timer)
this.timer = setInterval(function () {
self.targetIndex++;
if (self.targetIndex >= self.itemNum)self.targetIndex = 0;
self.scroll("right");
}, self.autoPlayLag);
},
checkPicLoaded: function (currentLayer) {
var self = this;
var $animateLayer = currentLayer.children("div");
var length = $animateLayer.length;
var loadedNum = 0;
for (var i = 0; i < length; i++) {
var _img = new Image();
_img.src = $animateLayer.eq(i).attr("data-bkg");
_img.onload = function () {
loadedNum++;
if (loadedNum == length) {
currentLayer.css("backgroundImage", "none");
self.animateLayer(currentLayer);
}
}
}
},
resetLayer: function (currentLayer) {
var $animateLayer = currentLayer.children("div");
$animateLayer.each(function () {
$(this).removeClass($(this).attr("data-type"));
if (!$(this).attr("data-isBg"))$(this).hide();
})
},
animateLayer: function (currentLayer) {
var self = this;
var $animateLayer = currentLayer.children("div");
var currentAnimateIndex = 0;
var layerAry = [];
var stepAry = [];
$animateLayer.each(function () {
layerAry.push($(this));
$(this).removeClass($(this).attr("data-type"));
var step = $(this).attr("data-delay");
if (stepAry[step - 1]) {
stepAry[step - 1].push($(this));
} else {
stepAry[step - 1] = [$(this)];
}
});
clearInterval(this.animateTimer)
this.animateTimer = setInterval(function () {
if (stepAry[currentAnimateIndex]) {
for (var i = 0; i < stepAry[currentAnimateIndex].length; i++) {
var target = stepAry[currentAnimateIndex][i];
target.css("backgroundImage", "url(" + target.attr("data-bkg") + ")").show().addClass(target.attr("data-type"));
}
}
if (currentAnimateIndex > stepAry.length) {
clearTimeout(self.animateTimer)
}
currentAnimateIndex++;
}, 100)
}
};
/**
* 倒计时插件
*/
function CountDown(settings) {
this.$day = settings.$day;
this.$hour = settings.$hour;
this.$min = settings.$min;
this.$second = settings.$second || null;
this.totalSecond = settings.totalSecond;
this.timeCent = settings.timeCent || 1
this.endFn = settings.endFn || null;
this.init();
}
CountDown.prototype = {
init: function () {
this.refreshLag = this.$second ? 1000 : 60000;
this.totalSecond = this.totalSecond / this.timeCent;
if (this.totalSecond == 0 && this.endFn) {
this.endFn()
}
this.getFormatTime(this.totalSecond).refreshTime().upDataTime()
},
getFormatTime: function (totalSecond) {
this.timeInfo = {
day: totalSecond / 86400 | 0,
hour: (totalSecond % 86400) / 3600 | 0,
minutes: (totalSecond % 3600) / 60 | 0,
second: totalSecond % 60
}
return this;
},
upDataTime: function () {
var self = this;
self.timer = setInterval(function () {
self.totalSecond -= (self.refreshLag / 1000);
self.getFormatTime(self.totalSecond);
self.refreshTime();
if (self.totalSecond <= 0) {
clearInterval(self.timer);
self.endFn && self.endFn()
}
}, this.refreshLag);
return this;
},
refreshTime: function () {
this.$day && this.$day.html(this.timeInfo.day);
this.$hour && this.$hour.html(this.timeInfo.hour);
this.$min && this.$min.html(this.timeInfo.minutes);
this.$second && this.$second.html(Math.max(0, this.timeInfo.second));
return this;
}
};
</script>
</body>
</html>抓取京东的一个js效果
最新推荐文章于 2023-03-18 23:18:12 发布
675
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
