overflow属性：visible,hidden,scroll,auto
-
visible：不裁剪溢出的内容。浏览器将溢出的内容呈现在其容器元素的显示区域以外，全部内容都可见、
-
hidden：隐藏溢出的内容。内容只显示在其容器元素的显示区域里，这意味着只有一部分内容可见、
-
scroll：类似于hidden，浏览器将对溢出的内容进行隐藏，但显示一个滚动条以便让用户能够滚动看到内容的其他部分、
-
auto：类似于scroll，但浏览器只在确实发生溢出时才显示滚动条，如果内容没有溢出，就不显示滚动条、
图片自动切换代码如下：
**HTML**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Web Design</title>
<link href="css/layout.css" rel="stylesheet" media="screen" />
<script src="js/addLoadEvent.js"></script>
<script src="js/moveElement.js"></script>
<script src="js/prepareSlideshow.js"></script>
</head>
<body>
<div id="content">
<h1>Web Design</h1>
<p>There are the things you should know.</p>
<ol id="linklist">
<li>
<a href="Structure.html">Structure</a>
</li>
<li>
<a href="presentation.html">Presentation</a>
</li>
<li>
<a href="behavior.html">Behavior</a>
</li>
</ol>
<div id="slideshow">
<img src="topics.gif" alt="building blocks of web design" id="preview">
</div>
</div>
</body>
</html>
**CSS**
body{
margin:0 auto;
background:#99a4af;
}
#content{
margin:100px auto;
padding:30px;
width:500px;
height:350px;
border:1px solid #afbd8a;
}
#linklist {
float:left;
margin-right:10px;
}
li {
margin:7px;
}
#slideshow {
margin-left:10px;
width:100px;
height:100px;
position:relative;
/*relative 是为了使图片使用绝对位置*/
overflow:hidden;
}
#preview {
position:absolute;
}
**Javascript**
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload !="function"){
window.onload = func;
}else {
window.onload = function(){
oldonload();
func();
}
}
}
function prepareSlideshow(){
//确保浏览器支持DOM方法
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
//确保元素存在
if(!document.getElementById("linklist")) return false;
if(!document.getElementById("preview")) return false;
//为图片应用样式
var preview = document.getElementById("preview");
//取得所有链接
var list = document.getElementById("linklist");
var links = list.getElementsByTagName("a");
//为mouseover事件添加动画
links[0].onmouseover = function(){
moveElement("preview",-100,0,10);
}
links[1].onmouseover = function(){
moveElement("preview",-200,0,10);
}
links[2].onmouseover = function(){
moveElement("preview",-300,0,10);
}
}
addLoadEvent(prepareSlideshow);
/*注释function moveMessage(){
if(!document.getElementById) return false;
if(!document.getElementById("message"))return false;
var elem = document.getElementById("message");
//转换类型由字符变成整型
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
//判断
if(xpos < 200){
xpos++;
}
if(xpos > 200){
xpos--;
}
if(ypos < 100){
ypos++;
}
if(ypos > 100){
ypos--;
}
if(xpos == 200&& ypos ==100){
return true;
}
elem.style.left = xpos+"px";
elem.style.top = ypos+"px";
movemen = setTimeout("moveMessage()",10);
} 注释*/
//封装moveElement函数四个参数：元素，目标左值，目标上值，时间
function moveElement(elementId,final_x,final_y,interval){
if(!document.getElementById) return false;
if(!document.getElementById(elementId))return false;
//eleme对应想移动的对象
var elem = document.getElementById(elementId);
if(elem.movement){
clearTimeout(elem.movement);
}
if(!elem.style.left){
elem.style.left = "0px";
}
if(!elem.style.top){
elem.style.top = "0px";
}
//把elem的位置赋值给xpos，ypos
var xpos = parseInt(elem.style.left);
var ypos = parseInt(elem.style.top);
var dist = 0;
//判断
if(xpos < final_x){
dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if(xpos > final_x){
dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if(ypos < final_y){
dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if(ypos > final_y){
dist = Math.ceil((ypos - final_y)/10);
ypos = ypos - dist;
}
if(xpos == final_x&& ypos ==final_y){
return true;
}
elem.style.left = xpos+"px";
elem.style.top = ypos+"px";
var repeat = "moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")";
elem.movement = setTimeout(repeat,interval);
}
//addLoadEvent(positionMessage);
//addLoadEvent(moveMessage);
