欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Jquery網(wǎng)頁(yè)內(nèi)滑動(dòng)緩沖導(dǎo)航的實(shí)現(xiàn)代碼

 更新時(shí)間：2015年04月05日 23:07:00   投稿：mdxy-dxy  
這篇文章主要介紹了Jquery網(wǎng)頁(yè)內(nèi)滑動(dòng)緩沖導(dǎo)航的實(shí)現(xiàn)代碼,實(shí)現(xiàn)滑動(dòng)緩沖的方式實(shí)現(xiàn)頁(yè)內(nèi)導(dǎo)航，用戶體驗(yàn)大大提升需要的朋友可以參考下

如果網(wǎng)頁(yè)過長(zhǎng)，需要頁(yè)內(nèi)導(dǎo)航的時(shí)候，我們一般是在目標(biāo)出設(shè)置ID，比如<div id="footer"></div>，然后在當(dāng)前頁(yè)面某個(gè)鏈接地址設(shè)置如：<a href="#footer">點(diǎn)擊指向到底部</a>，這樣點(diǎn)擊該鏈接后就會(huì)馬上轉(zhuǎn)到網(wǎng)頁(yè)底部，默認(rèn)是直接轉(zhuǎn)到底部，有的訪客會(huì)莫名其妙，怎么突然就到底部了。

　　在越來越關(guān)注用戶體驗(yàn)的今天，這點(diǎn)我們要解決，下面就是一段簡(jiǎn)單的Jquery代碼，實(shí)現(xiàn)滑動(dòng)緩沖的方式實(shí)現(xiàn)頁(yè)內(nèi)導(dǎo)航，用戶體驗(yàn)大大提升！

下面是代碼：

<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script> 
<script type="text/javascript">
jQuery.fn.anchorGoWhere = function(options){
  var obj = jQuery(this);
  var defaults = {target:0, timer:500};
  var o = jQuery.extend(defaults,options);
  obj.each(function(i){
   jQuery(obj[i]).click(function(){
    var _rel = jQuery(this).attr("href").substr(1);
    switch(o.target){
     case 1:
      var _targetTop = jQuery("#"+_rel).offset().top;
      jQuery("html,body").animate({scrollTop:_targetTop},o.timer);
      break;
     case 2:
      var _targetLeft = jQuery("#"+_rel).offset().left;
      jQuery("html,body").animate({scrollLeft:_targetLeft},o.timer);
      break;
    }
   return false;
   });
  });
 };
 
$("#mybtn").anchorGoWhere({target:1}); //這里是點(diǎn)擊按鈕的ID
</script>

以上就是網(wǎng)頁(yè)內(nèi)滑動(dòng)緩沖導(dǎo)航的實(shí)現(xiàn)代碼，希望大家以后多多支持腳本之家。

相關(guān)文章

  • jquery中封裝函數(shù)傳遞當(dāng)前元素的方法示例

    jquery中封裝函數(shù)傳遞當(dāng)前元素的方法示例

    這篇文章主要給大家介紹了關(guān)于jquery中封裝函數(shù)傳遞當(dāng)前元素的方法，文中給出了詳細(xì)的示例代碼，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。
    2017-05-05
  • jquery實(shí)現(xiàn)類似EasyUI的頁(yè)面布局可改變左右的寬度

    jquery實(shí)現(xiàn)類似EasyUI的頁(yè)面布局可改變左右的寬度

    這篇文章主要介紹了通過jquery實(shí)現(xiàn)類似EasyUI的頁(yè)面布局可改變左右的寬度,需要的朋友可以參考下
    2014-07-07
  • jQuery實(shí)現(xiàn)基本淡入淡出效果的方法詳解

    jQuery實(shí)現(xiàn)基本淡入淡出效果的方法詳解

    這篇文章主要介紹了jQuery實(shí)現(xiàn)基本淡入淡出效果的方法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery使用fadeIn()、fadeOut()及fadeToggle()等方法控制頁(yè)面元素淡入淡出顯示效果的相關(guān)操作技巧,需要的朋友可以參考下
    2018-09-09
  • Jquery 動(dòng)態(tài)生成表格示例代碼

    Jquery 動(dòng)態(tài)生成表格示例代碼

    在某些特殊的情況下是需要?jiǎng)討B(tài)生成表格的，下面為大家詳細(xì)介紹下使用jquery是如何做到的，感興趣的朋友不要錯(cuò)過
    2013-12-12
  • jquery插件star-rating.js實(shí)現(xiàn)星級(jí)評(píng)分特效

    jquery插件star-rating.js實(shí)現(xiàn)星級(jí)評(píng)分特效

    Bootstrap Star Rating是一個(gè)簡(jiǎn)單而強(qiáng)大的jQuery插件實(shí)現(xiàn)星級(jí)分?jǐn)?shù)評(píng)級(jí)。支持像分?jǐn)?shù)星填充和RTL輸入先進(jìn)的功能。在利用純CSS-3造型使控制重點(diǎn)開發(fā)。該插件使用引導(dǎo)標(biāo)記和造型默認(rèn)情況下，但它可以覆蓋與其他任何CSS的標(biāo)記。
    2015-04-04
  • jQuery的one()方法用法實(shí)例

    jQuery的one()方法用法實(shí)例

    這篇文章主要介紹了jQuery的one()方法用法,實(shí)例分析了one()方法的功能、定義及為匹配元素的特定事件綁定一個(gè)一次性的事件處理方法使用技巧,需要的朋友可以參考下
    2015-01-01
  • jquery連綴語(yǔ)法如何實(shí)現(xiàn)

    jquery連綴語(yǔ)法如何實(shí)現(xiàn)

    我想熟悉javascript的沒有不知道jquery的吧，不得不提的就是特有的連綴書寫語(yǔ)法了，jquery連綴語(yǔ)法如何實(shí)現(xiàn)，接下來將詳細(xì)介紹
    2012-11-11
  • 寫出高效jquery代碼的19條指南

    寫出高效jquery代碼的19條指南

    討論jQuery和javascript性能的文章并不罕見。然而，本文我計(jì)劃總結(jié)一些速度方面的技巧和我本人的一些建議，來提升你的jQuery和javascript代碼。好的代碼會(huì)帶來速度的提升?？焖黉秩竞晚憫?yīng)意味著更好的用戶體驗(yàn)
    2014-03-03
  • jquery表單驗(yàn)證插件validation使用方法詳解

    jquery表單驗(yàn)證插件validation使用方法詳解

    這篇文章主要為大家詳細(xì)介紹了jquery表單驗(yàn)證插件validation使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-01-01

最新評(píng)論