溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天有空稍微看了下Jquery動畫函數animate這個方法，發現可以用這個方法來做下簡單的右側浮動菜單 因為經常做淘寶頁面時候會碰到這樣的效果 以前都是用人家的javascript組件代碼 發現老是用人家也不好，所以今天有空用jqeury中的animate這個方法寫了一個簡單的浮動菜單！原理非常的簡單 就是當滾動條滾動時候 讓他運行一個方法 然后在那個方法里面簡單的計算下 動畫元素的top 計算方法是：window的高度-元素的高度 再除以2 就可以讓元素在頁面上是劇中的 然后在加上元素滾動的高度 ！！！
代碼如下：
- <!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=utf-8" />
- <title>無標題文檔</title>
- <style>
- .test{ height:8400px;}
- .float{ width:103px; height:213px; background: url(p_w_picpaths/float.png) no-repeat; overflow:hidden; position:absolute; right:10px; top:100px;}
- </style>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
- </head>
- <body>
- <div class="test"></div>
- <div class="float">aaaa</div>
- <script>
- $(function(){
- $(document).css({position : "relative"})
- $(".float").css({position : "absolute",top : "100px",right : "10px"})
- $(window).scroll(function(){
- rightScroll();
- })
- function rightScroll(){
- var wH = $(window).height(),
- eH = $(".float").height(),
- sH = $(window).scrollTop();
- $(".float").animate({top : (wH-eH)/2+sH},{ queue: false, duration: 900 });
- }
- })
- </script>
- </body>
- </html>
當窗口一加載的時候 我讓當前文檔 一個相對定位 那么浮動元素就相對文檔來說 他是絕對定位 所以不管窗口縮小時候還是移動窗口 那個浮動元素都不會改變位置！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
