js实现浮动窗口(广告)
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1.
<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=UTF-8"> <title>Insert title here</title>
</head>
<script type="text/javascript"src=jquery.js></script>
<script type="text/javascript"src="js/staticObj_js.js"></script>
<script type="text/javascript"src="js/moveObj_js.js"></script>
<script type="text/javascript"src="js/test_js.js"></script>
<style type="text/css">
body {
background-image: url("/TstA/resources/beijing.jpg");
}
</style>
<body onload="main()"onresize="windowSizeChanged()">
<div id="divAdv"
style="position:absolute;left:20px;top:80px;width:180px;height:1040p x;"></div>
</body>
</html>
2.
var sObj = null;
var mObj = null;
function main(){
sObj = new StaticObj(7, -2);
sObj.run();
mObj = new MoveObj();
}
function windowSizeChanged(){
sObj.resizeEvent();
}
function move()
{
var top= document.body.scrollTop;
sObj.imageObj.css({"top": top + 100 });
mObj.imageObj.css({"top": top + 100 });
}
window.onscroll=move;
3.
var StaticObj = function(speed, accelerate){
this.posX = 0;
this.posY = 100;
this.rangeX = $(window).width() - 128;
this.sp = parseFloat(speed);
this.acc = parseFloat(accelerate);
this.imageObj = $("<img />");
this.imageObj.css("position", "absolute");
this.imageObj.css("width", "126px");
this.imageObj.css("height", "270px");
this.imageObj.attr({"src" : "resources/img2.png"});
this.imageObj.appendTo("body");
this.imageObj.css({"left": this.posX, "top": this.posY}); };
StaticObj.prototype.move = function(){
if(this.posX < this.rangeX)
{
if(this.posX >= (this.rangeX * 0.66))
{
this.sp = 2;
}
this.posX += this.sp;
if(this.posX > this.rangeX)
this.posX = this.rangeX;
}
else
{
this.posX = this.rangeX;
}
this.imageObj.css({"left": this.posX});
};
StaticObj.prototype.run = function(){
var temp = this;
setInterval(function(){
temp.move();
}, 5);
};
StaticObj.prototype.resizeEvent = function(){ this.rangeX = $(window).width() - 128;
};
4.
var MoveObj = function(){
this.imageObj = $("<img />");
this.imageObj.css("position", "absolute");
this.imageObj.css("width", "122px");
this.imageObj.css("height", "269px");
this.imageObj.attr({"src" : "resources/img1.png"});
this.imageObj.appendTo("body");
this.imageObj.css({"left": "0px", "top": "100px" }); };
5.Beijing.jpg。