欢迎访问,本站接受互联网网站仿站、功能定制、定制插件、主题,如果需要的话可以联系我 QQ:2283276927

JQuery添加简单的TOP向上按钮 for zblog php 之方法二(带动态)

雨夜 2943次浏览 10个评论

(本站已经使用本效果,博友可以向下滑动鼠标试下。)

方法很简单:分为两部:

第一步:在<head></head>之间增加代码如下:

<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src='{$host}zb_users/theme/{$theme}/script/com.js'></script>

PS:引用百度的jQuery文件。

其中com.js文件内容如下:

//top最上

(function(e){function t(e,t,n){if(t=="show"){switch(n){case"fade":e.fadeIn();break;case"slide":e.slideDown();break;default:e.fadeIn()}}else{switch(n){case"fade":e.fadeOut();break;case"slide":e.slideUp();break;default:e.fadeOut()}}}e.goup=function(n){var r=e.extend({location:"right",locationOffset:20,bottomOffset:10,containerRadius:10,containerClass:"goup-container",arrowClass:"goup-arrow",alwaysVisible:false,trigger:500,entryAnimation:"fade",goupSpeed:"slow",hideUnderWidth:500,containerColor:"#000",arrowColor:"#fff",title:"",titleAsText:false,titleAsTextClass:"goup-text"},n);e("body").append('<div style="display:none" class="'+r.containerClass+'"></div>');var i=e("."+r.containerClass);e(i).html('<div class="'+r.arrowClass+'"></div>');var s=e("."+r.arrowClass);var o=r.location;if(o!="right"&&o!="left"){o="right"}var u=r.locationOffset;if(u<0){u=0}var a=r.bottomOffset;if(a<0){a=0}var f=r.containerRadius;if(f<0){f=0}var l=r.trigger;if(l<0){l=0}var c=r.hideUnderWidth;if(c<0){c=0}var h=/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i;if(h.test(r.containerColor)){var p=r.containerColor}else{var p="#000"}if(h.test(r.arrowColor)){var d=r.arrowColor}else{var d="#fff"}if(r.title===""){r.titleAsText=false}var v={};v={position:"fixed",width:40,height:40,background:p,cursor:"pointer"};v["bottom"]=a;v[o]=u;v["border-radius"]=f;e(i).css(v);if(!r.titleAsText){e(i).attr("title",r.title)}else{e("body").append('<div class="'+r.titleAsTextClass+'">'+r.title+"</div>");var m=e("."+r.titleAsTextClass);e(m).attr("style",e(i).attr("style"));e(m).css("background","transparent").css("width",80).css("height","auto").css("text-align","center").css(o,u-20);var g=e(m).height()+10;e(i).css("bottom","+="+g+"px")}var y={};y={width:0,height:0,margin:"0 auto","padding-top":13,"border-style":"solid","border-width":"0 10px 10px 10px","border-color":"transparent transparent "+d+" transparent"};e(s).css(y);var b=false;e(window).resize(function(){if(e(window).outerWidth()<=c){b=true;t(e(i),"hide",r.entryAnimation);if(m)t(e(m),"hide",r.entryAnimation)}else{b=false;e(window).trigger("scroll")}});if(e(window).outerWidth()<=c){b=true;e(i).hide();if(m)e(m).hide()}if(!r.alwaysVisible){e(window).scroll(function(){if(e(window).scrollTop()>=l&&!b){t(e(i),"show",r.entryAnimation);if(m)t(e(m),"show",r.entryAnimation)}if(e(window).scrollTop()<l&&!b){t(e(i),"hide",r.entryAnimation);if(m)t(e(m),"hide",r.entryAnimation)}})}else{t(e(i),"show",r.entryAnimation);if(m)t(e(m),"show",r.entryAnimation)}if(e(window).scrollTop()>=l&&!b){t(e(i),"show",r.entryAnimation);if(m)t(e(m),"show",r.entryAnimation)}e(i).on("click",function(){e("html,body").animate({scrollTop:0},r.goupSpeed);return false});e(m).on("click",function(){e("html,body").animate({scrollTop:0},r.goupSpeed);return false})}})(jQuery)
$(document).ready(function () {

            $.goup({
                trigger: 100,
                bottomOffset: 150,
                locationOffset: 100,
                title: '向上',
                titleAsText: true
            });

        });

ps:最下面几行可以根据需要调整,当然了上面的代码部分(尤其是css部分)可以根据自己的需要调整。

第二步:将com.js文件复制到该主题的脚本文件夹里(script文件夹)中。保存,刷新缓存试试吧。效果如下:

112.JPG

或者大家可以看本站的效果,呵呵。

希望对你有所帮助。

再次ps:最近几天好像没有更新,但是没有闲着,呵呵,在研究jQuery,发现好强大哦。


涂涂研版版权所有,如未注明 , 均为原创,转载需注明出处。
发表我的评论换个身份
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(10) 个小伙伴在吐槽
  1. 支持啦 第一次来
    怎么样在网上赚钱 2015-04-18 PM 06:55 回复
  2. 来看看了哦
    北京seo 2015-04-16 PM 02:06 回复
  3. 看不懂的路过
    跑步机价格 2014-08-24 PM 08:56 回复
  4. 效果还可以啊
    Washun 2014-08-07 PM 10:22 回复
    • 谢谢来访,呵呵。欢迎大侠的光临。
      雨夜 2014-08-07 PM 10:24 回复
  5. 打错了,看不到,不是看不到,汗...
    xilouqingzhu 2014-08-07 PM 03:26 回复
    • 什么个意思?
      雨夜 2014-08-07 PM 08:10 回复
  6. ..表示看不到jquery
    xilouqingzhu 2014-08-07 PM 03:25 回复
  7. 啦啦~jQuery的確是非常強大的!
    超級efly 2014-08-07 AM 07:52 回复
    • 恩,确实。
      雨夜 2014-08-07 PM 08:10 回复

主题定制开发流程

ZBLOGPHP开发流程

联系我们