zoukankan      html  css  js  c++  java
  • html5bookmarkscroll

      1 <!DOCTYPE html>
      2 <html>
      3   <head>
      4 <script src="/Public/jquery/jquery-1.3.2.min.js" type="text/javascript"></script><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      5   <meta charset="utf-8">
      6   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      7   <title>bookmarkscroll案例</title>
      8 <style type="text/css">
      9 /* CSS Document */
     10 body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
     11 ul,ol,li{list-style:none;}
     12 input,button{margin:0;font-size:12px;vertical-align:middle;}
     13 body{font-size:12px;font-family:Arial, Helvetica, sans-serif; color:#333; margin:0 auto; }
     14 table{border-collapse:collapse;border-spacing:0;}
     15 a{color:#333;text-decoration:none;}
     16 .head{position:fixed;top:0px;left:-350px;}
     17 #box-bookmark{width:960px; height:100px;margin:20px 0px;text-align:center;}
     18 .nav{position:relative;margin-bottom:20px;}
     19 .nav{float:left;position:relative;left:50%;}
     20 .nav li{margin-bottom:20px;}
     21 .nav li a{display:block;padding:0 11px;background:#f5f5f5; height:24px; border:1px solid #ccc; border-radius:5px; -webkit-border-radius:5px; line-height:24px;}
     22 .nav li a:hover{ background:#ccc;}
     23 .box{background:#ccc;width:960px;height:600px;margin:auto;margin-bottom:20px;}
     24 .first{background:#333;}
     25 .two{background:#666;}
     26 .three{background:#999;}
     27 .four{background:#000;}
     28 #main{width:100%;}
     29 </style>
     30 </head>
     31 <div class="head">
     32   <div id="box-bookmark">
     33         <ul class="nav">
     34         <li><a href="javascript:bookmarkscroll.scrollTo('first')" class="unselected">first</a></li>
     35         <li><a href="javascript:bookmarkscroll.scrollTo('second')" class="unselected hovered">two</a></li>
     36         <li><a href="javascript:bookmarkscroll.scrollTo('third')" class="unselected">three</a></li>
     37         <li><a href="javascript:bookmarkscroll.scrollTo('fourth')" class="unselected">four</a></li>
     38         </ul>
     39   </div>
     40 </div>
     41   <div id="main">
     42         <div id="first"></div>
     43         <div class="box first">
     44         </div>
     45         <div id="second"></div>
     46            <div class="box two">
     47         </div>
     48         <div id="third"></div>
     49         <div class="box three">
     50         </div>
     51         <div class="box four">
     52         </div> 
     53         <div id="fourth"></div>
     54     </div>
     55 <script src="js/jquery-1.4.2.min.js" >//这里需要jquery</script>
     56 <script>
     57 //** Scrolling HTML Bookmarks script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
     58 //** Available/ usage terms at http://www.dynamicdrive.com/ (April 11th, 09')
     59 //** Updated Nov 10th, 09'- Fixed anchor jumping issue in IE7
     60 
     61 var bookmarkscroll={
     62     setting: {duration:1000, yoffset:0}, //{duration_of_scroll_milliseconds, offset_from_target_element_to_rest}
     63     topkeyword: '#top', //keyword used in your anchors and scrollTo() to cause script to scroll page to very top
     64 
     65     scrollTo:function(dest, options, hash){
     66         var $=jQuery, options=options || {}
     67         var $dest=(typeof dest=="string" && dest.length>0)? (dest==this.topkeyword? 0 : $('#'+dest)) : (dest)? $(dest) : [] //get element based on id, topkeyword, or dom ref
     68         if ($dest===0 || $dest.length==1 && (!options.autorun || options.autorun && Math.abs($dest.offset().top+(options.yoffset||this.setting.yoffset)-$(window).scrollTop())>5)){
     69             this.$body.animate({scrollTop: ($dest===0)? 0 : $dest.offset().top+(options.yoffset||this.setting.yoffset)}, (options.duration||this.setting.duration), function(){
     70                 if ($dest!==0 && hash)
     71                     location.hash=hash
     72             })
     73         }
     74     },
     75 
     76     urlparamselect:function(){
     77         var param=window.location.search.match(/scrollto=[\w\-_,]+/i) //search for scrollto=divid
     78         return (param)? param[0].split('=')[1] : null
     79     },
     80     
     81     init:function(){
     82         jQuery(document).ready(function($){
     83             var mainobj=bookmarkscroll
     84             mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
     85             var urlselectid=mainobj.urlparamselect() //get div of page.htm?scrollto=divid
     86             if (urlselectid) //if id defined
     87                 setTimeout(function(){mainobj.scrollTo(document.getElementById(urlselectid) || $('a[name='+urlselectid+']:eq(0)').get(0), {autorun:true})}, 100)
     88             $('a[href^="#"]').each(function(){ //loop through links with "#" prefix
     89                 var hashvalue=this.getAttribute('href').match(/#\w+$/i) //filter links at least 1 character following "#" prefix
     90                 hashvalue=(hashvalue)? hashvalue[0].substring(1) : null //strip "#" from hashvalue
     91                 if (this.hash.length>1){ //if hash value is more than just "#"
     92                     var $bookmark=$('a[name='+this.hash.substr(1)+']:eq(0)')
     93                     if ($bookmark.length==1 || this.hash==mainobj.topkeyword){ //if HTML anchor with given ID exists or href==topkeyword
     94                         if ($bookmark.length==1 && !document.all) //non IE, or IE7+
     95                             $bookmark.html('.').css({position:'absolute', fontSize:1, visibility:'hidden'})
     96                         $(this).click(function(e){
     97                             mainobj.scrollTo((this.hash==mainobj.topkeyword)? mainobj.topkeyword : $bookmark.get(0), {}, this.hash)
     98                             e.preventDefault()
     99                         })
    100                     }
    101                 }
    102             })
    103         })
    104     }
    105 }
    106 
    107 bookmarkscroll.init()
    108 </script>
    109 </body>
    110 </html>
  • 相关阅读:
    [ERR] Node 10.211.55.8:7001 is not empty. Either the node already knows other nodes (check with CLUSTER NODES) or contains some key in database 0.
    PAT A1137 Final Grading (25 分)——排序
    PAT A1136 A Delayed Palindrome (20 分)——回文,大整数
    PAT A1134 Vertex Cover (25 分)——图遍历
    PAT A1133 Splitting A Linked List (25 分)——链表
    PAT A1132 Cut Integer (20 分)——数学题
    PAT A1130 Infix Expression (25 分)——中序遍历
    PAT A1142 Maximal Clique (25 分)——图
    PAT A1141 PAT Ranking of Institutions (25 分)——排序,结构体初始化
    PAT A1140 Look-and-say Sequence (20 分)——数学题
  • 原文地址:https://www.cnblogs.com/asqq/p/2572694.html
Copyright © 2011-2022 走看看