jQuery模拟手机端屏幕滚动图文滚动交互式代码



91 360 121



特效描述: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

加群请备注:从官网了解到