生活随笔
收集整理的這篇文章主要介紹了
Jquery简单的右侧浮动菜单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天有空稍微看了下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(images/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>? 當窗口一加載的時候 我讓當前文檔 一個相對定位 那么浮動元素就相對文檔來說 他是絕對定位 所以不管窗口縮小時候還是移動窗口 那個浮動元素都不會改變位置！
附件：http://down.51cto.com/data/2359405
本文轉自 涂根華 51CTO博客，原文鏈接：http://blog.51cto.com/tugenhua/732639，如需轉載請自行聯系原作者
總結
以上是生活随笔為你收集整理的Jquery简单的右侧浮动菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
