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


      细心的朋友应早已发现,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>

  • 相关阅读:
    C# Array.CreateInstance创建二维数组及如何遍历二维数组
    Camstar开发常用数据库表及其关联
    Camstar开发C#代码规范、Camstar更新以及Designer 开发规范
    Andorid存储方式---读写文件
    Andorid存储方式----SharedPreferences存储
    InputStream类只能读取一次
    ssh文件上传问题
    关于html自定义属性
    我是程序猿,我爱做菜。
    第8章 Spring Web Flow
  • 原文地址:https://www.cnblogs.com/zhangchenliang/p/776969.html
Copyright © 2020-2023  润新知