抓取京东的一个js效果

<!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效果)