在編輯前端頁面的過程中,會有一種效果圖叫做輪播,輪播的主要方式是橫向的,但是今天我舉的例子是類似輪播的縱向動態切換。
一、基礎知識儲備如下:
1、獲取瀏覽器以及頁面的寬高資訊
獲取瀏覽器顯示區域的高度 : $(window).height();
獲取瀏覽器顯示區域的寬度 :$(window).width();
獲取頁面的文件高度 :$(document).height();
獲取頁面的文件寬度 :$(document).width();
2、獲取滾動條的相關資訊
獲取滾動條到頂部的垂直高度 :$(document).scrolltop();
獲取滾動條到左邊的垂直寬度 :$(document).scrollleft();
3、獲取當前元素的偏移資訊
獲取當前元素相對於body頂部的偏移資訊 :$(selector).offset().top
獲取當前元素相對於body左側的偏移資訊 :$(selector).offset().left
4、動畫效果實現頁面滾動
var scroll_offset = $(selector).offset(); //得到selector的offset,包含兩個值,top和left
$("body,html").animate(,動畫持續的時間);
【注】動畫持續時間用 100 1000 等類似的整數表示。
【注】用alert()方法彈出的方式可以看到值,但是用console.log()列印出來的則是乙個很複雜的物件。
二、舉例說明
實現縱向的div介面切換效果。
方法:1、給div繫結乙個id 為 one
2、搭建滾動效果的函式
function gettop() ,500);
}
3、編輯事件觸發函式
$("a").click(function());
JavaScript 滾動頁面到指定元素位置
大體如下 src script document ready function 2000 script id commentlist style text align left src alt class name iefreerp class time 2015 07 17 16 38 45spa...
jQuery 獲取指定元素
1 利用標籤名 獲取元素 標籤名 2 通過id獲取元素 id name 3 通過 類名獲取元素 classname 4 一次性獲取多個元素 元素名,元素名,元素名 5 通過指定層次關係獲取元素 祖先 子孫 父 子 前 後 兄 弟 6 根據元素的屬性值獲取元素 attribute attribute ...
Javascript實現將元素插入到指定位置
主要用到splice 方法,splice 方法可刪除從 index 處開始的零個或多個元素,並且用引數列表中宣告的乙個或多個值來替換那些被刪除的元素。1.陣列指定位置插入元素 var array one two four 原來的陣列 array.splice 2,0,three splice pos...