⭐ 欢迎来到虫虫下载站! | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站

📄 821ye1.htm

📁 javascript各种效果的实例及源代码
💻 HTM
字号:
<html>
<head>
<title>图片满天飞舞</title>
<style type="text/css">
<!--
body {  font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 0px; margin-right: 0px}
A { COLOR: black; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: none }
 A:hover { COLOR: red; FONT-SIZE: 13px; FONT-WEIGHT: 400; TEXT-DECORATION: underline }
a:active     { font: 9pt "宋体"; cursor: hand; color: #FF0033 }
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
<!--//

//设置下面一些参数,小球移动速度1-50,数值大速度快;
var ballWidth = 10;
var ballHeight = 10;
var BallSpeed = 5;

var maxBallSpeed = 20;
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) {
      xMax = window.innerWidth;
      yMax = window.innerHeight;
      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;
         }
      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)
window.onload = initializeBall;
window.onresize = new Function("window.location.reload()");

// -->
</script>
<style type="text/css">

#superball {
position:absolute;
left:0;
top:0;
visibility:hide;
visibility:hidden;
width:40;
height:40;
}

</style>
</head>
<body bgcolor="#fef4d9">
<br>
<br>
<center><font color=red face="隶书" size=6>图片满天飞舞</font></center>
<br>
<br><center>
<table border=5 bordercolor=blue borderlight=green>
<tr><td align=center><font size=5 color=red face="Arial, Helvetica, sans-serif"><strong>下面框中为脚本显示区</strong></font></td></tr>
<tr><td align=center><span id="superball"><a href="http://www.javascript2000.com/"><img name="superballImage" src="cat.gif" height="30" width="30" border="0"></a></span></td></tr></table></center>
<br>
<br><center>
<textarea name=source rows=12 cols=55 class=yk9>
脚本说明:
第一步:把如下代码加入<head>区域中
<script language="JavaScript">
<!--//

//设置下面一些参数,小球移动速度1-50,数值大速度快;
var ballWidth = 40;
var ballHeight = 40;
var BallSpeed = 10;

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) {
      xMax = window.innerWidth;
      yMax = window.innerHeight;
      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;
         }
      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)
window.onload = initializeBall;
window.onresize = new Function("window.location.reload()");

// -->
</script>
<style type="text/css">

#superball {
position:absolute;
left:0;
top:0;
visibility:hide;
visibility:hidden;
width:40;
height:40;
}

</style>



第二步:把如下代码加入区域中:
<span id="superball"><a href="http://www.javascript2000.com/"><img name="superballImage" src="cat.gif" height="30" width="30" border="0"></a></span> 
</textarea></center>
<center>
<SCRIPT LANGUAGE="JavaScript">

<!-- hide

function goHist(a) 

{

   history.go(a);

}

//-->

</script>

<FORM METHOD="post">
<INPUT TYPE="button" VALUE="返回" onClick="goHist(-1)" style="background-color: #8000FF; color: rgb(255,255,255)">
</form>
</center>
<br>
<br>
</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -