1.让两个元素动起来
message.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Message</title>
<script src="scripts/addLoadEvent.js"></script>
<script src="scripts/positionMessage.js"></script>
<script src="scripts/moveElement.js"></script>
</head>
<body>
<p id="message">Whee!</p>
<p id="message2">Whoa!</p>
</body>
</html>
addLoadEvent.js
function addLoadEvent(func){
var oldonload=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
oldonload();
func();
}
}
}
positionMessage.js
function positionMessage(){
if(!document.getElementById)return false;
if(!document.getElementById("message"))return false; //检查兼容性
var elem=document.getElementById("message"); //找到元素
elem.style.position="absolute";
elem.style.left="50px";
elem.style.top="100px"; //设置初值
moveElement("message",125,25,20); //调用函数
if(!document.getElementById)return false;
if(!document.getElementById("message2"))return false; //检查兼容性
var elem=document.getElementById("message2"); //找到元素
elem.style.position="absolute";
elem.style.left="50px";
elem.style.top="50px"; //设置初值
moveElement("message2",125,125,20);
}
addLoadEvent(positionMessage);
moveElement.js
function moveElement(elementID,final_x,final_y,interval){
if(!document.getElementById)return false;
if(!document.getElementById(elementID))return false; //检查兼容性
var elem=document.getElementById(elementID); //获取元素当前值
var xpos=parseInt(elem.style.left); //获取元素当前位置
var ypos=parseInt(elem.style.top);
if(xpos==final_x&&ypos==final_y){ //元素到达目的地，退出函数
return true;
}
if(xpos<final_x){ //未到达目的地，移近
xpos++;
}
if(xpos>final_x){
xpos--;
}
if(ypos<final_y){
ypos++;
}
if(ypos>final_y){
ypos--;
}
elem.style.left=xpos+"px"; //赋值
elem.style.top=ypos+"px";
var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
movement=setTimeout(repeat,interval); //重复执行函数
}
image.png
image.png
2.有一系列链接的网页，当用户把鼠标悬停在其中的某个链接上时，只显示大图片的一部分
list.html
<body>
<h1>Web Design</h1>
<p>These 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="images/微信图片_20171113204827.jpg" alt="building blocks of web desigh" id="preview"/>
</div>
-->
<script src="scripts/addLoadEvent.js"></script>
<script src="scripts/insertAfter.js"></script>
<script src="scripts/moveElement.js"></script>
<script src="scripts/prepareSlideshow.js"></script>
</body>
layout.css
#slideshow{
width:100px;
heigh:100px;
position:relative;
}
#preview{
position:absolute;
}
prepareSlideshow.js
function prepareSlideshow(){
if(!document.getElementsByTagName)return false;
if(!document.getElementById)return false; //确保浏览器支持DOM方法
if(!document.getElementById("linklist"))return false;
var slideshow=document.createElement("div"); //创建div元素
slideshow.setAttribute("id","slideshow");
var preview=document.createElement("img"); //创建img元素
preview.setAttribute("src","images/微信图片_20171113204827.jpg");
preview.setAttribute("alt","building blocks of web design");
preview.setAttribute("id","preview");
slideshow.appendChild(preview); //img放入div中
var list=document.getElementById("linklist");
insertAfter(slideshow,list);
//if(!document.getElementById("preview"))return false; //确保元素存在
//var preview=document.getElementById("preview");
//preview.style.position="absolute"; //找到图片ID
// preview.style.left="0px";
// preview.style.top="0px"; //设置图片初始位置（在容器中）
var list=document.getElementById("linklist"); //找到链接ID
var links=list.getElementsByTagName("a"); //找到链接
links[0].onmouseover=function(){ //为mouseover事件添加动画效果
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);
改进后的moveElement.js
function moveElement(elementID,final_x,final_y,interval){
if(!document.getElementById)return false;
if(!document.getElementById(elementID))return false; //检查兼容性
var elem=document.getElementById(elementID); //获取元素当前值
if(elem.movement){ //movement是elem元素的属性，存在即使用clearTimeout函数
clearTimeout(elem.movement);
}
if(!elem.style.left){ //安全性检查
elem.style.left="0px";
}
if(!elem.style.top){
elem.style.top="0px";
}
var xpos=parseInt(elem.style.left); //获取元素当前位置
var ypos=parseInt(elem.style.top);
var dist=0;
if(xpos==final_x&&ypos==final_y){ //元素到达目的地，退出函数
return true;
}
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);
xpos=xpos-dist;
}
elem.style.left=xpos+"px"; //赋值
elem.style.top=ypos+"px";
var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement=setTimeout(repeat,interval); //重复执行函数
}
运用了图片库的insertAfter函数：
insertAfter.js
function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if(parent.lastChild==targetElement){
parent.appendChild(newElement);
}else{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
image.png
image.png
