jQuery模擬手機端屏幕滾動圖文滾動交互式代碼



95 379 127



特效描述:jQuery 模擬手機端 屏幕滾動 圖文滾動 交互式代碼,jQuery模擬手機端屏幕滾動圖文滾動交互式代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/style.css" />

2. 引入JS

<script src="js/jquery.min.js" type="text/javascript"></script>

3. HTML代碼

<div class="xcx_qingqiao">
    <div class="container">
        <div class="xcx_qingqiao_title"><p><span>商城小程序,</span>輕巧的功能依舊強大</p></div>
        <div class="xcx_what_text">是你的第一款微信小程序,具備云起微商城的相同'顏值'商品展示、購買下單、微信<br>支付...同一后臺統一管理,搶占第一波小程序紅利!</div>
        <div class="xcx_dowhat_main">
            <div class="xcx_phone">
                <div class="xcx_phone_main">
                    <ul style="">
                        <li><img src="images/xcx/pic_1.jpg"/></li>
                        <li><img src="images/xcx/pic_2.jpg"/></li>
                        <li><img src="images/xcx/pic_3.jpg"/></li>
                        <li><img src="images/xcx/pic_4.jpg"/></li>
                        <li><img src="images/xcx/pic_5.jpg"/></li>
                        <li><img src="images/xcx/pic_6.jpg"/></li>
                    </ul>
                </div>
            </div>
            <div class="xcx_dowhat_list">
                <ul>
                    <li class="li_left li_1 current"><div class="title">店鋪首頁</div><div class="pic"></div></li>
                    <li class="li_left li_2"><div class="title">商品展示</div><div class="pic"></div></li>
                    <li class="li_left li_3"><div class="title">滿減、送券</div><div class="pic"></div></li>
                    <li class="li_right li_4"><div class="title">購物車</div><div class="pic"></div></li>
                    <li class="li_right li_5"><div class="pic"></div><div class="title">微信支付</div><div class="info">(需綁定微信服務號,沒有服務號請自行申請,或使用小程序打包服務)</div></li>
                    <li class="li_right li_6"><div class="title">訂單查詢</div><div class="pic"></div></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $(".xcx_dowhat_list ul li").hover(function () {
            $(".xcx_dowhat_list ul li").removeClass("current");
            $i = $(this).index();
            $(this).addClass("current");
            top1 = -$i * 364;
            $(".xcx_phone_main ul").stop(true, false).animate({"top": top1});
        });
    });
</script>



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


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 自動滾動圖片輪播 滾動切換 滾動條切換 圖片滾動 圖片滾動條 文字滾動 文字無縫滾動 文字間歇滾動 圖片文字滾動 文字圖片滾動 全屏滾動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

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