jquery事件
事件函数列表：
blur() 元素失去焦点
focus() 元素获得焦点
change() 表单元素的值发生变化
click() 鼠标单击
dblclick() 鼠标双击
mouseover() 鼠标进入（进入子元素也触发）
mouseout() 鼠标离开（离开子元素也触发）
mouseenter() 鼠标进入（进入子元素不触发）
mouseleave() 鼠标离开（离开子元素不触发）
hover() 同时为mouseenter和mouseleave事件指定处理函数
mouseup() 松开鼠标
mousedown() 按下鼠标
mousemove() 鼠标在元素内部移动
keydown() 按下键盘
keypress() 按下键盘
keyup() 松开键盘
load() 元素加载完毕
ready() DOM加载完成
resize() 浏览器窗口的大小发生改变
scroll() 滚动条的位置发生变化
select() 用户选中文本框中的内容
submit() 用户递交表单
toggle() 根据鼠标点击的次数，依次运行多个函数
unload() 用户离开页面
绑定事件的其他方式
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html());
});
});
取消绑定事件
$(function(){
$('#div1').bind('mouseover click', function(event) {
alert($(this).html());
// $(this).unbind();
$(this).unbind('mouseover');
});
});
html图片左右无缝循环滚动示例
首先，最外层的宽高要给个固定值，然后给个overflow: hidden;，放不下的图片隐藏。
原理：（以左方向为例）先向左移动一个图片的宽度，此时第一个图片已经看不见了，这个时候将第一个标签元素克隆后追加到末尾，然后将第一个元素移除。达到循环滚动的效果。右移也是同理
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#box {
position: relative;
width: 800px;
margin: 100px auto;
}
#div1 {
width: 800px;
height: 120px;
position: relative;
overflow: hidden;
}
ul {
position: absolute;
left: 0;
top: 0;
}
li {
float: left;
list-style: none;
width: 160px;
height: 120px;
}
a {
text-decoration: none;
position: absolute;
z-index: 10;
}
.left {
left: -15px;
top: 11px;
}
.right {
right: -15px;
top: 11px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById("div1");
var oUl = oDiv.getElementsByTagName("ul")[0];
var aLi = oUl.getElementsByTagName("li");
var button = document.getElementsByTagName("a");
var speed=3;
oUl.innerHTML += oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth * aLi.length + "px";
function move() {
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = 0
}
if (oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + "px"
}
oUl.style.left = oUl.offsetLeft + speed + "px"
}
var timer = setInterval(move, 30)
oDiv.onmousemove = function () {
clearInterval(timer)
}
oDiv.onmouseout = function () {
timer = setInterval(move, 30)
}
button[0].onclick = function () {
speed = -3
}
button[1].onclick = function () {
speed = 3
}
}
</script>
</head>
<body>
<div id="box">
<div id="div1">
<ul>
<li><img src="demo/js/img/one.jpg"></li>
<li><img src="demo/js/img/two.jpg"></li>
<li><img src="demo/js/img/three.jpg"></li>
<li><img src="demo/js/img/four.jpg"></li>
<li><img src="demo/js/img/five.jpg"></li>
</ul>
</div>
<a href="javascript:;" class="left"><img src="demo/js/img/leftbt.jpg"></a>
<a href="javascript:;" class="right"><img src="demo/js/img/rightbt.jpg"></a>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload = function () {}，文档内容完全加载完毕再去执行函数汇总的代码。
（2）.var oDiv = document.getElementById("div1")，获取id属性值为div1的元素对象。
（3）.var oUl = oDiv.getElementsByTagName("ul")[0]，获取一个ul元素。
（4）.var aLi = oUl.getElementsByTagName("li")，获取oUI元素下所有的li元素集合。
（5）.var button = document.getElementsByTagName("a")，获取链接a元素集合。
（6）.var speed，声明一个变量，用来设置运动的速度，下面会有介绍。
（7）.oUl.innerHTML += oUl.innerHTML，再追加一份原来oul元素下的html内容。
（8）.oUl.style.width = aLi[0].offsetWidth * aLi.length + "px",设置oul元素的宽度为所有li的数目乘以li元素宽度。
（9）.function move() {
if (oUl.offsetLeft < -oUl.offsetWidth / 2) {
oUl.style.left = 0
}
if (oUl.offsetLeft >= 0) {
oUl.style.left = -oUl.offsetWidth / 2 + "px"
}
oUl.style.left = oUl.offsetLeft + speed + "px"
}，定时器函数每隔指定的时间调用一次move函数也就实现了无缝滚动效果。
如果oul元素小于-oUl.offsetWidth / 2，也就是oul元素向左滚动完毕一个完整图片队列（因为html内容进行了拷贝追加，那么就变成了两个图片队列），那么就将oul的left属性值重置为0。
（10）.if (oUl.offsetLeft > 0) {
oUl.style.left = -oUl.offsetWidth / 2 + "px"
}，这个是判断向右滚动是否完成一个图片队列或者处于起始位置。
如果满足上面的条件，那么就将oul的left值设置为-oUl.offsetWidth / 2 + "px"。
（11）.oUl.style.left = oUl.offsetLeft + speed + "px"，实现滚动效果。
