jquery仿百度經驗頁面滾動顯示第幾步效果代碼



114 454 152



特效描述:頁面滾動顯示 第幾步效果,仿百度經驗滾動條監聽,顯示第幾步

代碼結構

1. 引入JS

<script src="js/jquery-1.7.2.js"></script>
<script src="js/waypoints.min.js"></script>

2. HTML代碼

        <div style="height: 180px"></div>
        <div style="width: 1000px;margin: auto;padding-top:16px; ">
            <ul id="step" style="float: right; width: 968px;margin: 0;padding: 0">
                <li>
                    <div class="circle">1</div>
                    <div style="background-color:#00bfff;height:400px;margin-left:20px;">第1步</div>
                </li>
                <li>
                    <div class="circle">2</div>
                    <div style="background-color:#00ced1;height:400px;margin-left:20px;">第2步</div>
                </li>
                <li>
                    <div class="circle">3</div>
                    <div style="background-color: #00ffff;height:400px;margin-left:20px;">第3步</div>
                </li>
                <li>
                    <div class="circle">4</div>
                    <div style="background-color: #00fa9a;height:400px;margin-left:20px;">第4步</div>
                </li>
                <li>
                    <div class="circle">5</div>
                    <div style="background-color: #00ff00;height:400px;margin-left:20px;">第5步</div>
                </li>
            </ul>
            <div id="ico-group" style="width: 32px;position: fixed;top: 16px;">
                <div class="circle" style="visibility: hidden">1</div>
                <div class="circle" style="visibility: hidden">2</div>
                <div class="circle" style="visibility: hidden">3</div>
                <div class="circle" style="visibility: hidden">4</div>
                <div class="circle" style="visibility: hidden">5</div>
            </div>
        </div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 文字切換 文字選項卡
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表