JS物理弹性漂浮广告特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 JS物理弹性漂浮广告特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>abcd</title>

</head>

<body>
<DIV id=img1 style="Z-INDEX: 100; LEFT: 2px; WIDTH: 59px; POSITION: absolute; TOP: 43px; HEIGHT: 61px;
 visibility: visible;"><a href="#" target="_blank"><img src="images/pic.gif" width="80" height="80" border="0"></a></DIV>
<SCRIPT src="js/js.js"></SCRIPT>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

JS代码(js.js):

var xPos = 300;
	var yPos = 200;
	var step = 1;
	var delay = 30;
	var height = 0;
	var Hoffset = 0;
	var Woffset = 0;
	var yon = 0;
	var xon = 0;
	var pause = true;
	var interval;
	img1.style.top = yPos;
	function changePos(){
	width = document.body.clientWidth;
	height = document.body.clientHeight;
	Hoffset = img1.offsetHeight;
	Woffset = img1.offsetWidth;
	img1.style.left = xPos + document.body.scrollLeft;
	img1.style.top = yPos + document.body.scrollTop;
	if (yon){
	yPos = yPos + step;
}
else{
	yPos = yPos - step;
}
if (yPos < 0){
	yon = 1;
	yPos = 0;
}
if (yPos >= (height - Hoffset)){
	yon = 0;
	yPos = (height - Hoffset);
}
if (xon){
	xPos = xPos + step;
}
else{
	xPos = xPos - step;
}
if (xPos < 0){
	xon = 1;
	xPos = 0;
}
if (xPos >= (width - Woffset)){
	xon = 0;
	xPos = (width - Woffset);
}
}
function start(){
	img1.visibility = "visible";
	interval = setInterval('changePos()',delay);
}
function pause_resume(){
	if(pause){
	clearInterval(interval);
	pause = false;
}
else{
	interval = setInterval('changePos()',delay);
	pause = true;
}
}
start();

附件:下载该文件资源,减少时间成本(增值服务)