無縫滾動(dòng):
<pre id="line1"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>無縫滾動(dòng)</title> <style type="text/css"> body,ul,li{margin:0;padding:0}
ul{list-style:none;}
.slide{
width:500px;
height:100px;
border:1px solid #ddd;
margin:20px auto 0;
position:relative;
overflow:hidden;
}
.slide ul{
position:absolute;/*相對于slide進(jìn)行絕對定位*/
width:1000px;/*比slide寬度大一倍绪爸，做這種連續(xù)滾動(dòng)效果的時(shí)候，要在后面把內(nèi)容復(fù)制一份*/
height:100px;
left:0;/*可以改變該值讓其動(dòng)起來*/
top:0;
}
.slide ul li{
width:90px;
height:90px;
margin:5px;
background-color:#ccc;
line-height:90px;
text-align: center;
font-size:30px;
float:left;
}
.btns{
width:500px;
height:50px;
margin:10px auto 0;
} </style> <script type="text/javascript" src="[js/jquery-1.12.4.min.js](view-source:file:///D:/%E4%B8%8A%E8%AF%BE%E8%A7%86%E9%A2%91/%E7%AC%AC%E4%B8%89%E4%B8%AA%E6%9C%88%E2%80%94%E2%80%94%E5%89%8D%E7%AB%AF/%E5%89%8D%E7%AB%AF/%E5%89%8D%E7%AB%AF/%E4%BB%A3%E7%A0%81/%E5%B8%B8%E8%A7%81%E6%95%88%E6%9E%9C/js/jquery-1.12.4.min.js)"></script> <script type="text/javascript"> $(function(){
var $ul = $('#slide ul');
var left = 0;
var deraction = 2;//每次滾動(dòng)的距離
//內(nèi)容為兩套li
$ul.html($ul.html() + $ul.html());
//反復(fù)循環(huán)定時(shí)器痹兜，30ms動(dòng)一下可以看起來比較平滑
var timer = setInterval(move, 30);
function move(){
left -= deraction;
//當(dāng)?shù)?套li完全顯示出來的時(shí)候，整個(gè)移回原點(diǎn)重新移動(dòng)，實(shí)現(xiàn)向左連續(xù)滾動(dòng)
if(left < -500){
left = 0;
}
//瞬間跳回，實(shí)現(xiàn)向右連續(xù)滾動(dòng)
if(left > 0){
left = -500;
}
$ul.css({left: left});
}
$('#btn1').click(function() {
deraction = 2;
});
$('#btn2').click(function() {
deraction = -2;
});
$('#slide').mouseover(function() {
clearInterval(timer);
});
$('#slide').mouseout(function() {
timer = setInterval(move,30);
});
}) </script> </head> <body> <div class="btns"> <input type="button" name="" value="向左" id="btn1"> <input type="button" name="" value="向右" id="btn2"> </div> <div class="slide" id="slide"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html></pre>
自定義事件
除了系統(tǒng)事件外折剃，可以通過bind方法自定義事件，然后用tiggle方法觸發(fā)這些事件
//給element綁定hello事件
element.bind("hello",function(){
alert("hello world!");
});
//觸發(fā)hello事件
element.trigger("hello");
冒泡
什么是事件冒泡*
在一個(gè)對象上觸發(fā)某類事件（比如單擊onclick事件）像屋，如果此對象定義了此事件的處理程序，那么此事件就會(huì)調(diào)用這個(gè)處理程序边篮，如果沒有定義此事件處理程序或者事件返回true己莺，那么這個(gè)事件會(huì)向這個(gè)對象的父級(jí)對象傳播，從里到外戈轿，直至它被處理（父級(jí)對象所有同類事件都將被激活）凌受，或者它到達(dá)了對象層次的最頂層，即document對象（有些瀏覽器是window)思杯。
阻止事件冒泡:
事件冒泡機(jī)制有時(shí)候是不需要的胜蛉，需要阻止掉，通過event.stopPropagation() 來阻止.
