zoukankan      html  css  js  c++  java
  • 一个简短的返回顶部插件js top

    昨天在网上闲逛的时候,发现很多人有返回顶部的功能,确实也很实用于是本着学习的态度自己写了一个返回顶部的插件

    效果见忆夏天,向下拖动滚动条一段距离后右下角就会显示出来了...(ps:我用的默认,使用文字显示,因为没有找到好的top图片)

    喜欢的朋友可以从这里下载:猛点我

    下面说说使用方法:

    1.默认:以纯文字  "↑顶部"  显示

    var mytop = new xttop();

    2.调用图片:

    var mytop =new xttop({img:图片路径});

    比如我要调用一张外联图片

    var mytop =new xttop({img:"http://www.exiatian.com/top.png"});

    当然更具你的图片大小你得设置下mytop的宽高

    var mytop =new xttop({img:"http://www.exiatian.com/top.png",height:"你图片的高","图片宽"});

    3.其他参数选择:

    我默认设置bottom值和right值是 10px,就是在右下角坐标显示的位置.可以根据自己的喜好改变值大小

    速度speed默认值是35,可根据你的喜欢适当调整建议不要超过100,不然就没有滑动的效果了....一下就飞上去了....当然如果你一定要飞上去.....那我也没有办法....

    var mytop =new xttop({img:"http://www.exiatian.com/top.png",height:"你图片的高","图片宽",bottom:"50px",right:"50px",speed:50});

    xttop.js源代码:

    (function(docu) {
    var objxttop =null; //topdiv对象
    var xttop =function(topjason) {
    var doc = document,
    docbody
    = doc.body,
    goto_top_type
    =-1, //记录浏览器类型
    goto_top_itv =0,
    isNotIE
    =-[ -1 , ]; //全世界最短的判断IE浏览器,非IE浏览器为1,IE为NAN
    config = topjason || {};
    var topdiv = doc.createElement("div");
    topdiv.id
    = config["id"] ||"xttop"; //topdiv设置ID,默认为xttop,为避免冲突,请自设
    //topdiv样式
    topdiv.style.cssText ="position:fixed;bottom:"+ (config["bottom"] ||"10px") +";right:"+ (config["right"] ||"10px") +";display:none;"+ (config["width"] ||"40px") +";height:"+ (config["height"] ||"19px") +";";
    if (config["img"]) {
    topdiv.style.background
    ="url("+ (config["img"] =="defaults"?"http://www.exiatian.com/wp-content/themes/thunder/images/top.png": config["img"]) +") no-repeat"; //加上背景图片
    } else {
    topdiv.innerHTML
    ="<span style='color:#7B8693;font-size:12px;border:1px solid #7B8693;'>↑顶部</span>"; //默认以文字展示
    }
    function goto_top_timer() {
    var y = docbody.scrollTop|| doc.documentElement.scrollTop;
    var moveby = config["speed"] ||35;

    y
    -= Math.ceil(y * moveby /100); //匀减速
    if (y <0) {
    y
    =0;
    }

    if ( docbody.scrollTop ) {
    docbody.scrollTop
    = y;
    }
    else {
    doc.documentElement.scrollTop
    = y;
    }

    if (y ==0) {
    clearInterval(goto_top_itv);
    goto_top_itv
    =0;
    }
    }
    function goto_top() {
    if (goto_top_itv ==0) {
    goto_top_itv
    = setInterval(goto_top_timer, 50);
    }
    }
    bind(topdiv,
    "click", goto_top);
    docbody.appendChild(topdiv);
    }

    var bind =function(object, type, fn) {
    if (object.attachEvent) { //IE浏览器
    object.attachEvent("on"+ type, (function() {
    returnfunction() {
    window.event.cancelBubble
    =true; //停止时间冒泡
    object.attachEvent = fn.apply(object);
    }
    })(object));
    }
    elseif (object.addEventListener) { //其他浏览器
    object.addEventListener(type,
    function(event) {
    event.stopPropagation();
    //停止时间冒泡
    fn.apply(this)
    },
    false);
    }
    }
    var scrollevent =function() {
    objxttop
    = objxttop || document.getElementById("xttop");
    if (document.documentElement.scrollTop >120|| document.body.scrollTop >120) //当IE或其他浏览器滚动条值大于120时,top显示出来
    {
    objxttop.style.display
    ="block";
    }
    else//小于120时,top隐藏
    {
    objxttop.style.display
    ="none";
    }
    }
    window.xttop
    = xttop;
    window.onscroll
    = scrollevent; //绑定滚动条事件
    })();

      

    好了介绍就到这里,已测兼容IE,FF,Chrome其他的再慢慢在调整争取把这个插件做好.....如果你有什么好的建议....欢迎在下面留言....谢谢支持您的网上邻居---忆夏天......

  • 相关阅读:
    sqli-labs 第四关
    sqli-labs 第三关
    sqli-labs 第二关
    sqli-labs 第一关
    Buuctf-misc-假如给我三天光明
    Buuctf-misc-另外一个世界
    Buuctf-misc-FLAG
    量化投资_合成数据
    量化投资_止盈止损在策略中的有效性(改编)
    量化投资_金融数据信息处理的新维度(A New Dimension to Deal Data Information of Finance)【论文/时海涛】
  • 原文地址:https://www.cnblogs.com/tanglei/p/2135070.html
Copyright © 2011-2022 走看看