浮动按钮制作教程及源代码

偏执的太偏执、 2022-01-06 06:33 210阅读 0赞

细心的朋友应早已发现，  [T-Eye][] 页面右边新增了一个小小的“TOP”浮动标签。当你浏览某个较长的日志页面时，点击这个“TOP”标签，就能够很快的返回到页面的顶部。这样，是不是能够给你的Visitor带来一些方便呢？——有了它，就不再需要拼命按滚动键返回到顶部了。

应YY的要求，本着跟大家共享的精神，在此就把这一源代码放出来，以期和大家共同学习呵呵。

这个代码一共分了两段，要分别插在不同的地方。下面就按步骤来说明罢。

**第一步：**找一个小图标，此处允许个性化（格式为gif或者jpg为佳，大小随意，但是建议不要超过50\*30），比如T-Eye使用的是“Top”图标；如果你也喜欢这个图标，可以鼠标右键点击T-Eye右侧的那个TOP标签，另存为到你自己的硬盘上，然后上传到你的博客空间，并引用该图片的网址（把该网址粘贴到一个记事本上备用，后面会说明）；

**第二步：**在你博客的head区域（<head>和</head>）之间，插入如下两条横线间的代码：

－－－－－－－－－－－－－－－－－－－－－－－－－

<SCRIPT language=javascript>  
var isDOM = (document.getElementById ? true : false);  
var isIE4 = ((document.all && !isDOM) ? true : false);  
var isNS4 = (document.layers ? true : false);  
var isNS = navigator.appName == "Netscape";

function getRef(id) \{  
 if (isDOM) return document.getElementById(id);  
 if (isIE4) return document.all\[id\];  
 if (isNS4) return document.layers\[id\];  
\}

function getSty(id) \{  
 x = getRef(id);  
 return (isNS4 ? getRef(id) : getRef(id).style);  
\}

var scrollerHeight = 88;  
var puaseBetweenImages = 3000;  
var imageIdx = 0;

function moveRightEdge() \{  
 var yMenuFrom, yMenuTo, yOffset, timeoutNextCheck;

if (isNS4) \{  
  yMenuFrom   = divMenu.top;  
  yMenuTo     = windows.pageYOffset + 200;   // 困率 困摹  
 \} else if (isDOM) \{  
  yMenuFrom   = parseInt (divMenu.style.top, 10);  
  yMenuTo     = (isNS ? window.pageYOffset : document.body.scrollTop) + 200; // 困率 困摹  
 \}  
 timeoutNextCheck = 500;

if (yMenuFrom != yMenuTo) \{  
  yOffset = Math.ceil(Math.abs(yMenuTo - yMenuFrom) / 20);  
  if (yMenuTo < yMenuFrom)  
   yOffset = -yOffset;  
  if (isNS4)  
   divMenu.top += yOffset;  
  else if (isDOM)  
   divMenu.style.top = parseInt (divMenu.style.top, 10) + yOffset;  
   timeoutNextCheck = 10;  
 \}  
 setTimeout ("moveRightEdge()", timeoutNextCheck);  
\}  
</SCRIPT>

－－－－－－－－－－－－－－－－－－－－－－－－－

**第三步：**在你博客的body区域（<body>和</body>）之间，插入如下两条横线间的代码：

注意，此处表上颜色的你可能需要按照自己博客的实际页面情况进行修改：

红色部分用于定于标签的位置及其宽度大小，right的意思是距离页面右侧边界为50px的距离；Width表示该标签占用的宽度约为多少（可以采用你第一步上传的那张图片的宽度）；

把绿色部分替换成你第一步里边获得的那个已经准备好的图片网址即可。

－－－－－－－－－－－－－－－－－－－－－－－－－

<DIV id=divMenu  
style="right: 50px; VISIBILITY: visible; WIDTH: 45px; POSITION: absolute; TOP: 265px"><a href="\#top"><img src="\*.gif" name=Image60 width="34" height="17"  
border=0></a>  
</DIV>  
<SCRIPT language=javascript>  
<!--  
if (isNS4) \{  
 var divMenu = document\["divMenu"\];  
 divMenu.top = top.pageYOffset + 50;  
 divMenu.visibility = "visible";  
 moveRightEdge();  
\} else if (isDOM) \{

var divMenu = getRef('divMenu');  
 divMenu.style.top = (isNS ? window.pageYOffset : document.body.scrollTop) + 50;  
 divMenu.style.visibility = "visible";  
 moveRightEdge();  
\}  
//-->  
</SCRIPT>

转载于:https://www.cnblogs.com/zhangchenliang/archive/2007/06/08/776969.html

[T-Eye]: http://bobotalk.blogbus.com/