📄 ch15-226.html

📁 javascript demo thanks please

💻 HTML

字号:

<HTML>
<HEAD>
<TITLE>页面导航篇--动态图形导航</TITLE>
</HEAD>

<BODY bgcolor="#fef4d2" >

<br><br>
<center>
<h2>页面导航篇--动态图形导航</h2>
<hr width=300>
<br><br>

<!-- 案例代码开始 -->

<DIV id=img style="POSITION: absolute">
<!-- [Step1]: 这里可以设置动态图形对应的网址 -->
<!-- [Step2]: 在此能够更改动态的图形名称 -->
<!-- [Step3]: 这里可以修改图形的宽度和高度 -->
   <a href="http://www.263.net.cn"><img src="Picture002.jpg" border=1 width=100 height=100></a> 
</DIV>

<script language=JavaScript>

var xPos = 20;
var yPos = document.body.clientHeight;
img.style.top = yPos;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;

function PictureRun() {
  img.visibility = "visible";
<!-- [Step4]: 在此能够设置图形运动的速度，数值大速度慢 -->
  setInterval('PositionChange()',50);
}

function PositionChange() {
  width = document.body.clientWidth;
  height = document.body.clientHeight;
  Hoffset = img.offsetHeight;
  Woffset = img.offsetWidth;
  img.style.left = xPos + document.body.scrollLeft;
  img.style.top = yPos + document.body.scrollTop;
  if (yon) { yPos = yPos + 1; }
  else {     yPos = yPos - 1; }
  if (yPos < 0) { yon = 1; yPos = 0; }
  if (yPos >= (height - Hoffset)) { yon = 0; yPos = (height - Hoffset); }
  if (xon) { xPos = xPos + 1; }
  else { xPos = xPos - 1; }
  if (xPos < 0) { xon = 1; xPos = 0; }
  if (xPos >= (width - Woffset)) { xon = 0; xPos = (width - Woffset);  }
}

PictureRun();

</script>

<!-- 案例代码结束 -->


</BODY>

</HTML>

⌨️ 快捷键说明

复制代码 Ctrl + C

搜索代码 Ctrl + F

全屏模式 F11

切换主题 Ctrl + Shift + D

显示快捷键 ?

增大字号 Ctrl + =

减小字号 Ctrl + -