案例：圖片跟隨鼠標(biāo)飛
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img{
position: absolute;
}
</style>
</head>
<body>
<img id="im" src="images/01.jpg" alt="">
<script src="js/common.js"></script>
<script>
document.onmousemove = function(e) {
my$('im').style.left = e.clientX + "px";
my$('im').style.top = e.clientY + "px";
};
</script>
</body>
</html>
直接通過(guò)
document獲取元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>啊娃娃</title>
</head>
<body>
<script>
// 獲取的是元素---標(biāo)簽
console.log(document.body);
// 獲取的 是標(biāo)簽中的值
console.log(document.title);
document.title = "修改了";
//獲取html
console.log(document.documentElement)
</script>
</body>
</html>
offset系列
offsetWidth:獲取元素的寬
offsetHeight：獲取元素的高
offsetLeft：獲取元素距離左邊的距離
offsetTop：獲取元素距離上面的距離
- 沒(méi)有脫離文檔流：
offsetLeft：父級(jí)元素margin+父級(jí)元素padding+父級(jí)元素border+自己的margin - 脫離文檔流：
主要是自己的left和自己的margin
<div id="dv1" style="height: 20px;"></div>
<div id="dv2"></div>
<input type="button" value="顯示效果" id="btn">
<script src="js/common.js"></script>
<script>
my$('btn').onclick = function() {
// 在style標(biāo)簽中設(shè)置的樣式屬性獲取不到
// 在style屬性中設(shè)置的樣式 可以獲取到.
console.log(my$('dv1').style.height);
// 獲取元素的寬和高,使用這個(gè)offset系列
console.log(my$('dv1').offsetLeft);
};
</script>
案例：完整輪播圖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all {
width: 500px;
height: 200px;
padding: 7px;
border: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.screen {
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li {
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul {
position: absolute;
left: 0;
top: 0px;
width: 3000px;
}
.all ol {
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li {
float: left;
width: 20px;
height: 20px;
background: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current {
background: #DB192A;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑體';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id='box'>
<div class="screen">
<!--相框-->
<ul>
<li><img src="images/1.jpg" width="500" height="200" /></li>
<li><img src="images/2.jpg" width="500" height="200" /></li>
<li><img src="images/3.jpg" width="500" height="200" /></li>
<li><img src="images/4.jpg" width="500" height="200" /></li>
<li><img src="images/5.jpg" width="500" height="200" /></li>
</ul>
<ol>
</ol>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script src="js/common.js"></script>
<script>
// 最外面的div
var box = my$('box');
// 獲取相框
var screen = box.children[0];
// 焦點(diǎn)的div
var arr = my$('arr');
// 獲取相框的寬度
var imgWidth = screen.offsetWidth;
// 獲取ul
var ulObj = screen.children[0];
// 獲取ul中所有的li
var list = ulObj.children;
// 獲取ol
var olObj = screen.children[1];
var pic = 0;
// 創(chuàng)建小按鈕
for (i = 0; i < list.length; i++) {
var liObj = document.createElement('li');
liObj.setAttribute('index', i);
olObj.appendChild(liObj);
liObj.innerHTML = i + 1;
liObj.onmouseover = function() {
for (j = 0; j < olObj.children.length; j++) {
olObj.children[j].removeAttribute('class');
}
this.className = "current";
pic = this.getAttribute('index');
animate(ulObj, -pic * imgWidth);
};
}
olObj.children[0].className = "current";
// 克隆一個(gè)ul中的第一個(gè)li,加入到ul中的最后
ulObj.appendChild(ulObj.children[0].cloneNode(true))
var timeId = setInterval(rightClick, 1000);
box.onmouseover = function() {
arr.style.display = "block";
clearInterval(timeId);
};
box.onmouseout = function() {
arr.style.display = "none";
timeId = setInterval(rightClick, 1000);
};
my$('right').onclick = rightClick;
function rightClick() {
if (pic == list.length - 1) {
pic = 0;
ulObj.style.left = 0 + "px";
}
pic++;
animate(ulObj, -pic * imgWidth);
// 如果pic==5 此時(shí)顯示第6個(gè)圖(內(nèi)容是第一張圖），第一個(gè)小按鈕有顏色)
if (pic == list.length - 1) {
olObj.children[olObj.children.length - 1].className = "";
olObj.children[0].className = "current";
} else {
for (i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute('class');
}
olObj.children[pic].className = "current";
}
}
my$('left').onclick = function() {
if (pic == 0) {
pic = 5;
ulObj.style.left = -pic * imgWidth + "px";
}
pic--;
animate(ulObj, -pic * imgWidth);
// 設(shè)置小按鈕的顏色
for (i = 0; i < olObj.children.length; i++) {
// 所有的小按鈕干掉顏色
olObj.children[i].removeAttribute('class');
}
olObj.children[pic].className = "current";
}
</script>
</body>
</html>
案例：無(wú)縫輪播圖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
img {
vertical-align: top;
}
/*取消圖片底部3像素距離*/
.box {
width: 520px;
height: 280px;
margin: 100px auto;
background-color: pink;
border: 1px solid red;
position: relative;
overflow: hidden;
}
.box ul li {
float: left;
}
.box ul {
width: 2600px;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box" id="screen">
<ul>
<li><img src="images/01.jpg" alt="" /></li>
<li><img src="images/02.jpg" alt="" /></li>
<li><img src="images/03.jpg" alt="" /></li>
<li><img src="images/04.jpg" alt="" /></li>
<li><img src="images/01.jpg" alt="" /></li>
</ul>
</div>
<script src="js/common.js"></script>
<script>
function f1() {
current -= 10;
var ulObj = my$('screen').children[0];
if (current < -1200) {
ulObj.style.left = 0 + "px";
current = 0;
console.log(current)
} else {
ulObj.style.left = current + "px";
}
}
var current = 0;
var timeId =setInterval(f1, 20);
my$('screen').onmouseover=function(){
clearInterval(timeId);
}
my$('screen').onmouseout=function(){
timeId =setInterval(f1, 20);
}
</script>
</body>
</html>
案例：淘寶輪播圖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body,
ul,
ol,
li,
img {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 520px;
height: 280px;
padding: 5px;
position: relative;
border: 1px solid #ccc;
margin: 100px auto 0;
overflow: hidden;
}
.ad {
width: 520px;
height: 280px;
/*overflow: hidden;*/
position: relative;
}
#box img {
width: 520px;
}
.ad ol {
position: absolute;
right: 10px;
bottom: 10px;
}
.ad ol li {
width: 20px;
height: 20px;
line-height: 20px;
border: 1px solid #ccc;
text-align: center;
background: #fff;
float: left;
margin-right: 10px;
cursor: pointer;
_display: inline;
}
.ad ol li.current {
background: yellow;
}
.ad ul li {
float: left;
}
.ad ul {
position: absolute;
top: 0;
width: 2940px;
}
.ad ul li.current {
display: block;
}
#focusD {
display: none;
}
#focusD span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑體';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#focusD #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div id="box" class="all">
<div class="ad">
<ul id="imgs">
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
</ul>
</div>
<!--相框-->
<div id="focusD"><span id="left"><</span><span id="right">></span>
</div>
</div>
<script src="js/common.js"></script>
<script>
// 獲取最外面的div
var box = my$('box');
// 獲取相框
var ad = box.children[0];
// 獲取相框的寬度
var imgWidth = ad.offsetWidth;
// 獲取ul
var ulObj = ad.children[0];
// 獲取左右焦點(diǎn)的div
var foncusD = my$('focusD');
// 顯示和隱藏左右焦點(diǎn)的div---為box注冊(cè)事件
box.onmouseover = function() {
foncusD.style.display = "block";
};
box.onmouseout = function() {
foncusD.style.display = "none";
};
// 點(diǎn)擊右邊按鈕
var index = 0;
my$('right').onclick = function() {
if (index < ulObj.children.length - 1) {
index++;
animate(ulObj, -index * imgWidth);
}
};
my$('left').onclick = function() {
if (index > 0) {
index--;
animate(ulObj, -index * imgWidth);
}
};
</script>
</body>
</html>
demo地址：
