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