spotlight_title
標題不知道怎麼下比較好~ 其實是捲動 html,body 的 animate 效果
首先記得檢查自己的網頁有無插入 jQuery 檔案
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
html 插入至網頁的任何區塊:
<span class="btop">back to top</span> <script type="text/javascript"> $('span.btop').click(function(){$('html,body').animate({scrollTop: $('#header').offset().top}, 500);}); </script>

這邊稍微解釋一下這行 script 的意思就是...

滑鼠點擊「span.btop」這個區塊的時候執行 function:
$('html,body').animate({scrollTop: $('#header').offset().top}, 500);

.animate 則是動畫的 function
()內則可指定:(function, speed)
而我這邊的意思則是:html與body.動畫({往上捲動至#header的位置}, 500毫秒)

...
.......感覺很像是在翻譯而已 XD
總之速度可以隨自己高興調快調慢,scrollTop可改成scrollLeft
自行運用變化囉~


這樣這個動畫和 html 基本就完成了
然後視覺再靠 css 去定位

.btop { cursor: pointer; position: fixed; bottom: 2em; right: 2em; display: block; _display: none; width: 105px; height: 20px; text-align: center; line-height: 20px; color: #fff; background: #999 url(http://pic.pimg.tw/leah/1331548872-2458849503.png) no-repeat center 10px; padding: 65px 0 10px; border-radius: 6px; z-index: 99999; }

在此也解釋一下 css 的用意
首先使用 fixed 浮動在視窗右下,指定滑鼠樣式為 pointer 引導 user 可點
IE6 沒有 fixed 的功能,所以直接隱藏 (很壞)
塞背景和顏色等等設定
z-index 層級調高,可依照喜好再加入透明度的設定

demo 如本部落格右下請點↘

以上
, , , ,

Leah 發表在 痞客邦 PIXNET 留言(7) 人氣()


留言列表 (7)

發表留言
  • mirrorz
  • 真是越來越厲害阿
    老揮阿學這還真是吃力 XD
  • 趁還能吸收的時候盡量摸索囉~
    但是寫程式類的真的好需要邏輯很強喔~
    有時候好幾個東西要一起設定的時候都要想很久~

    Leah 於 2012/03/15 10:55 回覆

  • 葉蘭玫
  • 欣賞是一種美德,推推
  • 悄悄話
  • 張家靖
  • 支持你,加油
  • 感恩

    Leah 於 2012/03/29 02:11 回覆

  • 悄悄話
  • 悄悄話
  • xx xx
  • .btop 的這一些要放在CSS的哪裡??
  • CSS 最下方就可以了
    由於悄悄話會員才能查看
    所以我將留言打開了

    Leah 於 2012/12/11 18:44 回覆