网页设计与制作-日职网络教学平台

网页设计与制作
唐海和

1

2

3

4

5

6

7

8

9

10

11

任务7.5 在网页中自动漂浮图片

发布时间：2017-09-24 15:17 发布人：唐海和浏览次数：2664

【任务7-5】在网页中自动漂浮图片

【任务描述】

在网页文档0705.html中编写javascript代码实现自动漂浮图片的功能。

网页中自动漂浮图片的浏览效果如图7-8所示，可以看出网页中图片在不断的漂浮。

【任务实施】

打开网页文档0705.html，切换到【代码】视图，将光标置于“</head>”之前，然后输入下面所示的javascript代码，其中函数getPageScroll()、getPageSize()和adMove(id)的详细代码见教材配套光盘对应的文本文件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--

function addEvent(obj,evtType,func,cap){

cap=cap||false;

if(obj.addEventListener){

obj.addEventListener(evtType,func,cap);

return true;

}

else if(obj.attachEvent){

if(cap){

obj.setCapture();

return true;

}

else{

return obj.attachEvent("on" evtType,func);

}

else{

return false;

}

function getPageScroll(){

var xScroll,yScroll;

if (self.pageXOffset) {

xScroll = self.pageXOffset;

}

else if (document.documentElement && document.documentElement.scrollLeft){

xScroll = document.documentElement.scrollLeft;

}

else if (document.body) {

xScroll = document.body.scrollLeft;

}

if (self.pageYOffset) {

yScroll = self.pageYOffset;

}

else if (document.documentElement && document.documentElement.scrollTop){

yScroll = document.documentElement.scrollTop;

}

else if (document.body) {

yScroll = document.body.scrollTop;

}

arrayPageScroll = new Array(xScroll,yScroll);

return arrayPageScroll;

}

function getPageSize(){

var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) {

xScroll = document.body.scrollWidth;

yScroll = window.innerHeight window.scrollMaxY;

} else if (document.body.scrollHeight > document.body.offsetHeight){

xScroll = document.body.scrollWidth;

yScroll = document.body.scrollHeight;

} else {

xScroll = document.body.offsetWidth;

yScroll = document.body.offsetHeight;

}

var windowWidth, windowHeight;

if (self.innerHeight) {

windowWidth = self.innerWidth;

windowHeight = self.innerHeight;

} else if (document.documentElement && document.documentElement.clientHeight) {

windowWidth = document.documentElement.clientWidth;

windowHeight = document.documentElement.clientHeight;

} else if (document.body) {

windowWidth = document.body.clientWidth;

windowHeight = document.body.clientHeight;

}

if(yScroll < windowHeight){

pageHeight = windowHeight;

} else {

pageHeight = yScroll;

}

if(xScroll < windowWidth){

pageWidth = windowWidth;

} else {

pageWidth = xScroll;

}

arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight)

return arrayPageSize;

}

var adMoveConfig=new Object();

adMoveConfig.isInitialized=false;

adMoveConfig.scrollX=0;

adMoveConfig.scrollY=0;

adMoveConfig.moveWidth=0;

adMoveConfig.moveHeight=0;

adMoveConfig.resize=function(){

var winsize=getPageSize();

adMoveConfig.moveWidth=winsize[2];

adMoveConfig.moveHeight=winsize[3];

adMoveConfig.scroll();

}

adMoveConfig.scroll=function(){

var winscroll=getPageScroll();

adMoveConfig.scrollX=winscroll[0];

adMoveConfig.scrollY=winscroll[1];

}

addEvent(window,"resize",adMoveConfig.resize);

addEvent(window,"scroll",adMoveConfig.scroll);

function adMove(id){

if(!adMoveConfig.isInitialized){

adMoveConfig.resize();

adMoveConfig.isInitialized=true;

}

var obj=document.getElementById(id);

obj.style.position="absolute";

var mw=adMoveConfig.moveWidth-obj.offsetWidth;

var mh=adMoveConfig.moveHeight-obj.offsetHeight;

var x = mw*Math.random(),y = mh*Math.random();

var rad=(Math.random() 1)*Math.PI/6;

var kx=Math.sin(rad),ky=Math.cos(rad);

var dirx = (Math.random()<0.5?1:-1), diry = (Math.random()<0.5?1:-1);

var step = 1;

var interval;

this.setLocation=function(vx,vy){x=vx;y=vy;}

this.setDirection=function(vx,vy){dirx=vx;diry=vy;}

obj.customMethod=function(){

obj.style.left = (x adMoveConfig.scrollX) "px";

obj.style.top = (y adMoveConfig.scrollY) "px";

rad=(Math.random() 1)*Math.PI/6;

mw=adMoveConfig.moveWidth-obj.offsetWidth;

mh=adMoveConfig.moveHeight-obj.offsetHeight;

x = x step*kx*dirx;

if (x < 0){dirx = 1;x = 0;kx=Math.sin(rad);ky=Math.cos(rad);}

if (x > mw){dirx = -1;x = mw;kx=Math.sin(rad);ky=Math.cos(rad);}

y = y step*ky*diry;

if (y < 0){diry = 1;y = 0;kx=Math.sin(rad);ky=Math.cos(rad);}

if (y > mh){diry = -1;y = mh;kx=Math.sin(rad);ky=Math.cos(rad);}

}

this.run=function(){

var delay = 10;

interval=setInterval(obj.customMethod,delay);

obj.onmouseover=function(){clearInterval(interval);}

obj.onmouseout=function(){interval=setInterval(obj.customMethod, delay);}

}

//-->

</script>

</head>

<body>

<!--

var ad1=new adMove("moveimg1");

ad1.run();

var ad2=new adMove("moveimg2");

ad2.run();

-->

</script>

</body>

</html>

+添加讨论

韩治政 2017-09-28 10:18:18
虽然课程内容很难，但是老师讲的很细节，每个难懂的细节都讲解了一遍。让我学到了知识，谢谢老师。
张鑫 2017-09-28 10:22:15
只要思想不滑坡，办法总比困难多，老师讲的很到位，吸引力很强，让我很有兴趣的学会了这节课的知识！！感谢老师!
徐勤翰 2017-09-28 10:23:21
老师讲课很细致
王家敏 2017-09-28 10:24:37
学会了，老师讲的不错谢谢老师
韩燕洁 2017-09-28 10:25:18
幽默风趣的老师真好
杨永吉 2017-09-28 10:25:39
讲课生动形象，容易理解，棒棒哒
邵璐璐 2017-09-28 10:26:32
终于学会了，以后不用愁不会做了

网页设计与制作唐海和

任务7.5 在网页中自动漂浮图片

网页设计与制作
唐海和