java培訓之WEB前端——漂浮廣告的製作

java培訓之WEB前端——漂浮廣告的製作

用到的技術：HTML+CSS+ JavaScript;主要以javascript為主。

要求：圖片在整個頁面漂浮。

操作步驟：

首先製作一個html頁面，插入一張圖片；代碼如下

漂浮廣告

用CSS圖片位置等進行定位

*

a,img

#box1

利用javascript實現漂浮效果；代碼如下

window.onload = function () {

var obox =document.getElementById("box1");

//向左走

var timer = null,

dirX= dirY = 1,

speed=5;

functionfn(){

//對於水平方向

if( (obox.offsetLeft +obox.offsetWidth) > document.documentElement.clientWidth){

dirX = -1;

}

if(obox.offsetLeft < 0 ){

dirX= 1;

}

//對於豎直方向

if( (obox.offsetTop +obox.offsetHeight ) >document.documentElement.clientHeight){

dirY = -1;

}

if(obox.offsetTop < 0 ) {

dirY= 1;

}

};

timer= setInterval(fn,100); //開始移動

//滑鼠移上去停止

obox.onmouseover = function(){

if(timer != null )

clearInterval(timer);

};

//滑鼠移開繼續移動

obox.onmouseout= function(){

timer= setInterval(fn,100);

};

}

版權：康諾科技

2017/6/28

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！