wordpress的Canvas实现进度环返回顶部按钮|小鹿学院

wordpress的Canvas实现进度环返回顶部按钮

2018-01-10 21:15 小鹿推广

小鹿系列竞价软件覆盖百度、360、搜狗、神马四大搜索平台，采用独创的竞价算法，智能精准出价，一键批量查排名，根据关键词位置实时调整出价，降低出价虚高，稳定排名，节省企业预算。

小鹿竞价软件专题介绍：https://www.xiaolutg.com/bidding/fengchao?ref=menu

今天在一个网站上扒下了一个进度环返回顶部的按钮，感觉很有意思，比知更鸟自带的高大上的多，所以分享出来。

图片：

小鹿推广,竞价软件,SEM营销

1.js代码

将以下代码保存到jindu.php文件中，然后上传到主题的js文件夹中：

varbigfa_scroll={
drawCircle:function(id,percentage,color){
varwidth=jQuery(id).width();
varheight=jQuery(id).height();
varradius=parseInt(width/2.20);
varposition=width;
varpositionBy2=position/2;
varbg=jQuery(id)[0];
id=id.split(“#”);
varctx=bg.getContext(“2d”);
varimd=null;
varcirc=Math.PI*2;
varquart=Math.PI/2;
ctx.clearRect(0,0,width,height);
ctx.beginPath();
ctx.strokeStyle=color;
ctx.lineCap=“square”;
ctx.closePath();
ctx.fill();
ctx.lineWidth=3;
imd=ctx.getImageData(0,0,position,position);
vardraw=function(current,ctxPass){
ctxPass.putImageData(imd,0,0);
ctxPass.beginPath();
ctxPass.arc(positionBy2,positionBy2,radius,-(quart),((circ)*current)–quart,false);
ctxPass.stroke();
}
draw(percentage/100,ctx);
},
backToTop:function($this){
$this.click(function(){
jQuery(“body,html”).animate({
scrollTop:0
},
800);
returnfalse;
});
},
scrollHook:function($this,color){
color=color?color:“#000000”;
$this.scroll(function(){
vardocHeight=(jQuery(document).height()–jQuery(window).height()),
$windowObj=$this,
$per=jQuery(“.per”),
percentage=0;
defaultScroll=$windowObj.scrollTop();
percentage=parseInt((defaultScroll/docHeight)*100);
varbackToTop=jQuery(“#backtoTop”);
if(backToTop.length>0){
if($windowObj.scrollTop()>200){
backToTop.addClass(“button–show”);
}else{
backToTop.removeClass(“button–show”);
}
$per.attr(“data-percent”,percentage);
bigfa_scroll.drawCircle(“#backtoTopCanvas”,percentage,color);
}
});
}
}
jQuery(document).ready(function(){
jQuery(“body”).append(‘<divid=“backtoTop”data-action=“gototop”><canvasid=“backtoTopCanvas”width=“48”height=“48”></canvas><divclass=“per”></div></div>’);
varT=bigfa_scroll;
T.backToTop(jQuery(“#backtoTop”));
T.scrollHook(jQuery(window),“#d57a21”);
});

2.调用js文件

在header.php中的<head></head>添加以下代码：

<scriptsrc=“<?phpechoget_template_directory_uri();?>/js/jindu.js”></script>

3.添加样式

将以下代码添加到style.css中即可：

#backtoTop{background-color:#eee;border-radius:100%;bottombottom:10%;height:48px;position:fixed;rightright:-100px;width:48px;transition:.5s;-webkit-transition:.5s}#backtoTop.button–show{rightright:10px}.per{font-size:16px;height:48px;line-height:48px;position:absolute;text-align:center;top:0;width:48px;color:#000;cursor:pointer}.per:before{content:attr(data-percent)}.per:hover:before{content:“↑”;font-size:20px}

好了，大功告成，简单的教程相信大家都可以看懂吧~~

标签：小鹿SEO优化

<< 上一篇

让菜单上的字体图标闪烁–wordpress美化

下一篇 >>

wordpress知更鸟主题CMS增加Tab选项卡的教程