元素的尺寸
-
height()
-
width()
內容的寬 不含padding marign -
innerHeight()
-
innerWidth()
內容的寬加上padding -
outerHeight()
-
outerWidth()
內容的寬+padding+borderWidth(元素的實際寬) -
outerHeight(true)
-
outerWidth(true)
是內容的寬+padding+borderWidth(元素的實際寬)+margin -
$(window).width(); 視窗的寬
-
$(window).height();視窗的高
jquery無縫滾動案例
html
<h3>最新動態</h3>
<div class="scrollNews" >
<ul>
<li><a href="#" class="tooltip" title="甜美寬松毛衣今秋一定紅.">甜美寬松毛衣今秋一定紅.</a></li>
<li><a href="#" class="tooltip" title="秋裝百搭小馬甲不到50元.">秋裝百搭小馬甲不到50元.</a></li>
<li><a href="#" class="tooltip" title="修身韓版小西裝萬人瘋搶.">修身韓版小西裝萬人瘋搶.</a></li>
<li><a href="#" class="tooltip" title="夏末雪紡店主含淚大甩賣.">夏末雪紡店主含淚大甩賣.</a></li>
<li><a href="#" class="tooltip" title="瑞麗都瘋狂推薦的秋裝.">瑞麗都瘋狂推薦的秋裝.</a></li>
<li><a href="#" class="tooltip" title="48元長款針織小開衫賣瘋啦.">48元長款針織小開衫賣瘋啦.</a></li>
<li><a href="#" class="tooltip" title="長袖雪紡衫單穿內搭都超美.">長袖雪紡衫單穿內搭都超美.</a></li>
</ul>
</div>
分析
1，ul整體 向上慢慢的走一個li的高度（margin-top為負值）
2，ul的第一個li放到最后面
3，ul整體突然快速margin-top：0；
js
$(function(){
var timeid;
var h=$(".scrollNews ul li:eq(0)").outerHeight();//獲取li元素的高
function move(){
//1 ul整體 向上慢慢的走一個li的高度（margin-top為負值
//最后一個function 是指 影片執行完畢后要做的函式
$(".scrollNews ul").animate(
{"margin-top":-h},
500,
function(){
//2,ul的第一個li放到最后面
var fi=$(".scrollNews ul li:eq(0)");
$(".scrollNews ul").append(fi);
//3,ul整體突然快速margin-top：0；
$(".scrollNews ul").css("margin-top",0);
timeid=setTimeout(function(){ move()},1500)
}//回呼函式
); //animate ed
}//move ed
// 滑鼠放上ul停止影片 滑鼠離開開始影片
$(".scrollNews").hover(function(){
clearTimeout(timeid);
},function(){
move();
}).trigger("mouseleave")
//默認自動觸下滑鼠離開
})
css
*{ padding:0; padding:0;}
body{ padding:50px;}
ul,ol{ list-style:none;}
h3,div,ul,li,ol{ margin:0; padding:0;}
.global_module h3{
height:35px;
line-height:35px;
text-align:center;
background-color:#369;
color:#f6f6f6;
}
.news ul li{
height:30px;
line-height:30px;
padding-left:15px;
color:#666; border-
bottom:1px dashed #d0d0d0;
}
.scrollNews{
height:150px;
overflow:hidden;
border: 1px solid red;
}
.news{
width:220px;
border:1px solid #36C;
}
IT入門 感謝關注
學習地址： www.520mg.com/it
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/89279.html
標籤：其他