给你的网站加入圆环进度条返回顶部功能

2017-5-20 亿零 Html/Css/Js

效果如图

js代码(加入到模板公共main.js)

var bigfa_scroll = { drawCircle: function(id, percentage, color) { var width = jQuery(id).width(); var height = jQuery(id).height(); var radius = parseInt(width / 2.20); var position = width; var positionBy2 = position / 2; var bg = jQuery(id)[0]; id = id.split("#"); var ctx = bg.getContext("2d"); var imd = null; var circ = Math.PI * 2; var quart = 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); var draw = 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); return false; }); }, scrollHook: function($this, color) { color = color ? color: "#000000"; $this.scroll(function() { var docHeight = (jQuery(document).height() - jQuery(window).height()), $windowObj = $this, $per = jQuery(".per"), percentage = 0; defaultScroll = $windowObj.scrollTop(); percentage = parseInt((defaultScroll / docHeight) * 100); var backToTop = 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('<div id="backtoTop" data-action="gototop"><canvas id="backtoTopCanvas" width="48" height="48"></canvas><div class="per"></div></div>'); var T = bigfa_scroll; T.backToTop(jQuery("#backtoTop")); T.scrollHook(jQuery(window), "#1E90FF"); });

css代码(加入到模板的公共main.css或者style.css)

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

修改进度环颜色,则修改js底部的T.scrollHook(jQuery(window,’#000000′)); 的颜色参数即可,默认黑色,如需更换颜色请移步至http://www.114la.com/other/rgb.htm

原文http://suppore.cn/302.html

标签: JS Css

评论:

http://gnap.es/b4fo7
2018-01-06 10:19
Good post. I learn one thing tougher on completely different blogs everyday. It will always be stimulating to learn content material from different writers and observe a bit of something from their store. I抎 prefer to use some with the content on my blog whether or not you don抰 mind. Natually I抣l give you a link in your web blog. Thanks for sharing.
Powered by emlog 陕ICP备16016230号