jQuery全屏单页滚动特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

15 59 20



特效描述:全屏单页滚动。jQuery制作手机软件下载页面全屏滚动展示特效代码。这是一款简单的软件下载页面布局代码。

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript" src="js/scroll.js" ></script>
<script type="text/javascript" src="js/jquery.mousewheel.js" ></script>

3. HTML代码

<div class="weixin">
  <a target="_blank" href="http://www.51qianduan.com/pins/32661.html"></a>
  <div class="weiimg img123"></div>
</div>
<script type="text/javascript">
  $(".weixin a").hover(function(){
	     $(".weiimg").show();
         },
		 function(){
	     $(".weiimg").hide();
         })
</script>
<div class="topmenu" >
  <a target="_blank" href="http://www.51qianduan.com/pins/32661.html" class="logo"><img src="images/y_03.png" class="img123" width="142" height="47" /></a>
  <ul>
    <li><a target="_blank" href="#" class="aclicked">首页</a></li>
    <li><a target="_blank" href="#">资讯</a></li>
    <li><a target="_blank" href="#">关于</a></li>
    <li><a target="_blank" href="#">加入</a></li>
    <li><a target="_blank" href="#">微考圈</a></li>
  </ul>                                                            
</div>
<div class="fixed_r">
  <ul>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
  </ul>
</div>
<div class="num_box">
  <div class="num" id="num_0">
    <div class="screenone">
      <img src="images/y_07.jpg" width="474" height="489"/>
      <div class="tworight commontext">
         <h1>考神驾到,轻松驾考!</h1>
         <span>每周同步各地题库,保证题库总是最新APP、客户端、web三端数据同步免费必过攻略分享,微社区随时互动!</span>  
         <a target="_blank" href="http://www.51qianduan.com/pins/32661.html"class="andriod_link img123">Android下载</a><a  target="_blank" class="pc_link img123"  href="http://www.51qianduan.com/pins/32661.html">PC端下载</a>
      </div>
    </div>
  </div>
  <div class="num" id="num_1">
    <div class="screentwo">
      <div class="oneleft commontext">
         <h1>题库最新</h1>  
         <span>每周同步各地题库,真实还原交管局考题难度;<br />支持小车、客车和货车。</span>
          <a target="_blank" href="http://www.51qianduan.com/pins/32661.html"class="andriod_link img123">Android下载</a><a  target="_blank" class="pc_link img123"  href="http://www.51qianduan.com/pins/32661.html">PC端下载</a>
      </div>
      <img src="images/y_18.jpg" width="489" height="303" />
    </div>
  </div>
  <div class="num" id="num_2">
    <div class="screenthree">
      <img src="images/y_22.jpg" width="425" height="353"/>
      <div class="threeright commontext">
         <h1>三端同步</h1>
         <span>实现APP、客户端、web三端数据同步 <br />同步个人信息,给您最佳体验!</span>
         <a target="_blank" href="http://www.51qianduan.com/pins/32661.html"class="andriod_link img123">Android下载</a><a  target="_blank" class="pc_link img123"  href="http://www.51qianduan.com/pins/32661.html">PC端下载</a>
      </div>
    </div>
  </div>
  <div class="num" id="num_3">
    <div class="screenfour">
      <div class="fourleft commontext">
         <h1>必过攻略</h1>
         <span>分块练习,实时模拟,图文并茂;<br />易混交规、错题收藏,口诀记忆 。</span>
         <a target="_blank" href="http://www.51qianduan.com/pins/32661.html"class="andriod_link img123">Android下载</a><a  target="_blank" class="pc_link img123"  href="http://www.51qianduan.com/pins/32661.html">PC端下载</a>
      </div>
      <img src="images/y_68.jpg" width="431" height="420"/>
    </div>
  </div>
  <div class="num" id="num_4">
    <div class="screenfive">
      <img src="images/y_41.jpg" width="558" height="447"/>
      <div class="fiveright commontext">
         <h1>随时互动——微考圈</h1>
         <span>轻点右上角,随时和大家一起讨论交流学车中遇到的各种问题。</span>
         <a target="_blank" href="http://www.51qianduan.com/pins/32661.html"class="andriod_link img123">Android下载</a><a  target="_blank" class="pc_link img123"  href="http://www.51qianduan.com/pins/32661.html">PC端下载</a>
      </div>
    </div>
  </div>
  <div class="num" id="num_5">
    <div class="screensix">
        <div class="sixtwocon">
           <h1>根据设备,选择免费下载</h1>   
             <div class="equipment_con">
                <a target="_blank" href="http://www.51qianduan.com/pins/32661.html">
                  <img src="images/foor03.png" class="img123" />
                  <span>PC客户端</span>
                </a>
                <a target="_blank" href="http://www.51qianduan.com/pins/32661.html">
                  <img src="images/fooy_09.png" class="img123" />
                  <span>Andriod</span>
                </a>
               <img src="images/foor_03.jpg" class="weiscan" />
           </div> 
           <div class="downloadmore">
          <div class="downtitle"><span>还可以通过以下方式下载</span></div>
          <div class="downmore">
           <div class="softa"><a target="_blank" href="http://www.51qianduan.com/pins/32661.html"><img src="images/foor_15.jpg" /></a><a target="_blank" href="http://www.51qianduan.com/pins/32661.html"><img src="images/foor_17.jpg" /></a><a target="_blank" href="http://www.51qianduan.com/pins/32661.html"><img src="images/foor_19.jpg" /></a><a target="_blank" href="http://www.51qianduan.com/pins/32661.html"><img src="images/foor_21.jpg" /></a><div class="clear"></div>
           </div>
        </div>
        </div>
        </div>
        <div class="sixfooter">
         <div class="sixone">
            <div class="partnerlink">合作伙伴:<div class="linkbotonm"> <span class="fl"> < </span>
                 <div id="demoa">
                 <div id="demo1a">
                   <div class="gundong">
                   <a target="_blank" href="http://www.51qianduan.com/pins/32661.html">91手机助手</a> / <a target="_blank" href="http://www.51qianduan.com/pins/32661.html">360手机助手</a> / <a target="_blank" href="http://www.51qianduan.com/pins/32661.html">豌豆荚</a> / <a target="_blank" href="http://www.51qianduan.com/pins/32661.html">机锋网</a> / <a target="_blank" href="http://www.51qianduan.com/pins/32661.html">安卓市场</a> / <a target="_blank" href="http://www.51qianduan.com/pins/32661.html">掌上应用</a> / <a target="_blank" href="http://www.51qianduan.com/pins/32661.html">木蚂蚁</a> / <a target="_blank" href="http://www.51qianduan.com/pins/32661.html">掌上应用</a> / <a target="_blank" href="http://www.51qianduan.com/pins/32661.html">木蚂蚁</a> / <a target="_blank" href="http://www.51qianduan.com/pins/32661.html">CC下载站</a> / <a target="_blank" href="http://www.51qianduan.com/pins/32661.html">系统之家</a> / <a target="_blank" href="http://www.51qianduan.com/pins/32661.html">华彩软件站</a>
                   </div>
                   </div>
    <div id="demo2a"></div>
    </div>
    <script type="text/javascript">
    <!--
    var speeda=50; //数字越大速度越慢
    var taba=document.getElementById("demoa");
    var tab1a=document.getElementById("demo1a");
    var tab2a=document.getElementById("demo2a");
    tab2a.innerHTML=tab1a.innerHTML; //克隆demo1为demo2
    function Marqueea(){
    if(tab2a.offsetHeight-taba.scrollTop<=0)//当滚动至demo1与demo2交界时
    taba.scrollTop-=tab1a.offsetHeight //demo跳到最顶端
    else{
    taba.scrollTop++
    }
    }
    var MyMara=setInterval(Marqueea,speeda);
    taba.onmouseover=function() {clearInterval(MyMara)};//鼠标移上时清除定时器达到滚动停止的目的
    taba.onmouseout=function() {MyMara=setInterval(Marqueea,speeda)};//鼠标移开时重设定时器
    -->
    </script>
                 <span class="fr"> > </span> 
                 </div> 
               </div>
            <div class="sixthree">CopyRight ©考神驾到 | 客服热线:021-0000 | 客服邮箱:[email protected]</div>
         </div>
         </div>  
    </div>
  </div>
</div>
<input type="hidden" value="0" class="ddw"/>
<input type="hidden" value="0" class="ddw2"/>
<script type="text/javascript" src="js/scroll.js" ></script> 



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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