点击这里给我发消息 点击这里给我发消息

制作页面漂浮图片的效果

添加时间:2010-1-5
    相关阅读: 页面 CSS JavaScript 链接 制作
首先请在<head></head>之间粘贴CSS:
#superball {position:absolute;left:0;top:0;visibility:hide;visibility:hidden;width:40;height:40;}
然后在<body></body>之间粘贴Script代码:
<script language="JavaScript">
var ballWidth = 40;
var ballHeight = 40;
var BallSpeed = 4;
var maxBallSpeed = 50;
var xMax;
var yMax;
var xPos = 0;
var yPos = 0;
var xDir = 'right';
var yDir = 'down';
var superballRunning = true;
var tempBallSpeed;
var currentBallSrc;
var newXDir;
var newYDir;
function initializeBall() {
if (document.all) {
xMax = document.body.clientWidth
yMax = document.body.clientHeight
document.all("superball").style.visibility = "visible";
}
else if (document.layers||document.getElementById) {
xMax = window.innerWidth-14;
yMax = window.innerHeight;
if (document.getElementById)
document.getElementById("superball").style.visibility="visible"
else
document.layers["superball"].visibility = "show";
}
setTimeout('moveBall()',400);
}
function moveBall() {
if (superballRunning == true) {
calculatePosition();
if (document.all) {
document.all("superball").style.left = xPos + document.body.scrollLeft;
document.all("superball").style.top = yPos + document.body.scrollTop;
}
else if (document.layers) {
document.layers["superball"].left = xPos + pageXOffset;
document.layers["superball"].top = yPos + pageYOffset;
}
else if (document.getElementById) {
document.getElementById("superball").style.left = xPos + pageXOffset;
document.getElementById("superball").style.top = yPos + pageYOffset;
}
setTimeout('moveBall()',30);
}
}
function calculatePosition() {
if (xDir == "right") {
if (xPos > (xMax - ballWidth - BallSpeed)) {
xDir = "left";
}
}
else if (xDir == "left") {
if (xPos < (0 + BallSpeed)) {
xDir = "right";
}
}
if (yDir == "down") {
if (yPos > (yMax - ballHeight - BallSpeed)) {
yDir = "up";
}
}
else if (yDir == "up") {
if (yPos < (0 + BallSpeed)) {
yDir = "down";
}
}
if (xDir == "right") {
xPos = xPos + BallSpeed;
}
else if (xDir == "left") {
xPos = xPos - BallSpeed;
}
else {
xPos = xPos;
}
if (yDir == "down") {
yPos = yPos + BallSpeed;
}
else if (yDir == "up") {
yPos = yPos - BallSpeed;
}
else {
yPos = yPos;
}
}
if (document.all||document.layers||document.getElementById){
window.onload = initializeBall;
window.onresize = new Function("window.location.reload()");
}
// end hiding from old browsers -->
</script>
请继续在<body></body>之间粘贴层,代码:
<span id="superball"><a href="http://www.it365cn.com/" target=_blank><img name="superballImage" src="http://www.blue1000.com/images/mainLOGO.gif" border="0"></a></span>
附加说明:
1.请自行制作一个适合你自己的图片,如本处所使用的"mainLOGO.gif",如果你的图片尺寸有所改变请查找第一步和第二步中代码的width和height的值进行修改
2.将第三步中的<a href="http://www.it365cn.com">换成你的链接即可! 本文作者:
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册