日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Jquery简单的右侧浮动菜单

發(fā)布時(shí)間：2025/3/8 编程问答 36 豆豆
生活随笔 收集整理的這篇文章主要介紹了 Jquery简单的右侧浮动菜单 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

今天有空稍微看了下Jquery動(dòng)畫函數(shù)animate這個(gè)方法，發(fā)現(xiàn)可以用這個(gè)方法來做下簡(jiǎn)單的右側(cè)浮動(dòng)菜單 因?yàn)榻?jīng)常做淘寶頁面時(shí)候會(huì)碰到這樣的效果 以前都是用人家的javascript組件代碼 發(fā)現(xiàn)老是用人家也不好，所以今天有空用jqeury中的animate這個(gè)方法寫了一個(gè)簡(jiǎn)單的浮動(dòng)菜單！原理非常的簡(jiǎn)單 就是當(dāng)滾動(dòng)條滾動(dòng)時(shí)候 讓他運(yùn)行一個(gè)方法 然后在那個(gè)方法里面簡(jiǎn)單的計(jì)算下 動(dòng)畫元素的top 計(jì)算方法是：window的高度-元素的高度 再除以2 就可以讓元素在頁面上是劇中的 然后在加上元素滾動(dòng)的高度 ！！！

代碼如下：

?

  • <!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>無標(biāo)題文檔</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>?

    • 當(dāng)窗口一加載的時(shí)候 我讓當(dāng)前文檔 一個(gè)相對(duì)定位 那么浮動(dòng)元素就相對(duì)文檔來說 他是絕對(duì)定位 所以不管窗口縮小時(shí)候還是移動(dòng)窗口 那個(gè)浮動(dòng)元素都不會(huì)改變位置！

    附件：http://down.51cto.com/data/2359405










    本文轉(zhuǎn)自 涂根華 51CTO博客，原文鏈接：http://blog.51cto.com/tugenhua/732639，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者

    總結(jié)

    以上是生活随笔為你收集整理的Jquery简单的右侧浮动菜单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

    如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。