精品久久亚洲_69pao在线成人免费视频_黄色三级网络_亚洲国产精品激情在线观看

您的位置: 首頁 > 源碼資料

ScrollTo：平滑滾動到頁面指定位置

源碼資料　時間:2014-02-19　作者/發布人:科杰在線　點擊:4519

　　ScrollTo是一款基于jQuery的滾動插件，當點擊頁面的鏈接時，可以平滑地滾動到頁面指定的位置，而不是像原來那種錨點形式，點擊直接跳到指定地點。適用在一些頁面內容比較多，頁面長度有好幾屏的場合。

　　當點擊導航按鈕時，觸發scrollTo方法，$.scrollTo帶有兩個參數，第一個是指定要滾動的目的ID，第二個參數是滾動時間間隔，以毫秒為單位。在本例中，只應用了scrollTo的基本方法。其實scrollTo還可以指定橫向縱向滾動，緩沖效果等。

　　具體可以參照官方網站的例子：http://demos.flesler.com/jquery/scrollTo/

使用方法
1、準備jQuery庫和scrollTo.js插件 (點此下載http://yunpan.cn/QphJcYUbX69cd）

2、將下面代碼存為html文件，并將壓縮包中的JS文件夾放置在該html同目錄中即可。

更多美化工作就靠自己啦！！

+++++++++++代碼部分+++++++++++++

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ScrollTo：平滑滾動到頁面指定位置 :: 科杰在線www.yeewaa.com</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>
<script type="text/javascript">
$(function(){
 $(".nav_home").click(function(){
  $.scrollTo('#home',300);
 });
 $(".nav_pro").click(function(){
  $.scrollTo('#pro',500);
 });
 $(".nav_news").click(function(){
  $.scrollTo('#news',800);
 });
 $(".nav_ser").click(function(){
  $.scrollTo('#ser',1000);
 });
 $(".nav_con").click(function(){
  $.scrollTo('#con',1200);
 });
 $(".nav_job").click(function(){
  $.scrollTo('#job',1500);
 });
});
</script>
<style type="text/css">
.nav{width:700px;margin:10px auto;}
.nav li{float:left; width:100px; height:24px; line-height:24px}
.box{height:500px}
.box h3{height:32px; line-height:32px; padding-left:20px; font-size:14px}
#pro,#ser{background:#FCF}
#home,#news,#con{background:#efefef}
.clear{clear:both}
</style>
</head>

<body>
<ul class="nav">
   <li><a href="#" class="nav_home">首頁</a></li>
   <li><a href="#" class="nav_pro">產品展示</a></li>
   <li><a href="#" class="nav_news">新聞中心</a></li>
   <li><a href="#" class="nav_ser">服務支持</a></li>
   <li><a href="#" class="nav_con">聯系我們</a></li>
   <li><a href="#" class="nav_job">人才招聘</a></li>
</ul>
<div style="clear:both"></div>
<div id="home" class="box">
   <h3>首頁</h3>
</div>
<div id="pro" class="box">
   <h3>產品展示</h3>
</div>
<div id="news" class="box">
   <h3>新聞中心</h3>
</div>
<div id="ser" class="box">
   <h3>服務支持</h3>
</div>
<div id="con" class="box">
   <h3>聯系我們</h3>
</div>
<div id="job" class="box">
   <h3>人才招聘</h3>
</div>
</body>
</html>

++++++++++++++++代碼結束++++++++++++++

來源于www.helloweba.com/view-blog-118.html


科杰在線www.yeewaa.com 收集整理 轉載請注明出處 2014.2.19

--------------------------全文完----------------------------
0% (0)
0% (0)
整站字母快速檢索： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 1 2 3 4 5 6 7 8 9 0

綜合報道 經濟形勢 勞動就業 政策法規 熱點推薦 創業新聞 創業指導 創業課堂 創業故事 大學生創業 | 裝修日記 | 學駕駛經歷 | 免費信息發布 | 網站地圖

地址：合肥市臨泉路香格里拉花園 郵箱：pc354@163.com　QQ：55769640 | 皖ICP備06007228號　
版權所有：科杰服務(www.www.yeewaa.com)　建議使用IE7.0或以上版本,最少1280分辨率瀏覽本站,可獲得最佳瀏覽效果

飛到頂部