李洋本人blog导航栏底端翻转条显示信息部位百分

摘要: 近期有网民意见反馈喜爱本网站导航栏栏底端翻转条显示信息部位百分数的动画特效,要我弄个实例教程,实际上这一是非常简单的,在网上有许多实例教程,基本全是html+js+css,依照...

近期有网民意见反馈喜爱本网站导航栏栏底端翻转条显示信息部位百分数的动画特效,要我弄个实例教程,实际上这一是非常简单的,在网上有许多实例教程,基本全是html+js+css,依照实际操作就可以了了,行吧,今日抽时间把这一实例教程共享一下,申明,著作人到底是谁不祥,因此都不了解应当谢谢哪个高手,酷帅的动画特效,因为我喜爱这一,嘿嘿哈。。。

李洋个人博客导航底部滚动条显示位置百分比的图文教程 第1张

好啦,实例教程非常简单,在网站加上html编码,随后在js加上检测编码,最终用css显示信息出去,以Z-blogPHP为例子,改动前还记得备份数据源代码。

最先开启模版的header.php文档,拷贝下列编码,黏贴在网页页面 body 以后,如图所示。

 div id= percentageCounter /div 

李洋个人博客导航底部滚动条显示位置百分比的图文教程 第2张

次之寻找网站的JS编码,编写JS文档,这一js文档一定如果全局性的通用性的,假如不知道道得话,那么就放到公共性底端网页页面(footer.php)模版里,编码以下:

 script 
//载入显示信息
$(window).scroll(function() {
 var a = $(window).scrollTop(),
 c = $(document).height(),
 b = $(window).height();
 scrollPercent = a / (c - b) * 100;
 scrollPercent = scrollPercent.toFixed(1);
 $( #percentageCounter ).css({
 width: scrollPercent +  % 
 });
}).trigger( scroll 
 /script 

假如放到里JS里边,谨记要删掉第一段和最终一段的 script and /script 编码,不然文件格式不正确,没法运作,随后储存编码。

最终一步寻找网站的隶属的css款式文档,在里边加上以下款式编码(独立一行放到哪都可以),编码以下:

#percentageCounter {
 position:fixed;
 left:0;
 top:0;
 height:3px;
 z-index:99999;
 background-color:#448EF6;
}

储存css文档就可以,此外假如不确定性是哪一个css款式文档得话,能够放到自定css里边(本网站开发设计则主题风格模版都是有这一插口),随后登陆后台管理,点一下后台管理的“[清除缓存文件并举新编译程序模版]”前台接待更新查询实际效果,自然一部分访问器都是有缓存文件,将会看不到沒有实际效果,那么就强制性更新(Ctrl+F5)再试一下。

自然这种的编码类型许多且款式千姿百态,实例教程也只是是那苍海一粟,大量的是毛遂自荐,让您一点点去丰富多彩和健全自身的blog,让blog绮丽且又无失设计风格才算是大家最后的总体目标。

每款作用在最开始的情况下全是持续调节和修补中进行的,我明白您在初次试着的情况下将会会达不上预估的实际效果,可是不必灰心丧气,坚信自身,再试一次,一定会取得成功的。有哪些不明白得能够在本页留言板留言,我能第一時间给与回应,谢谢您的适用与信赖!!!

PS:刚刚刚依照实例教程,在此外一款清新自然主题风格模版检测了下,功能强大,可是像我以前说的,实际的部位转变得渐渐地调节,不必急,好啦,应用清新自然主题风格模版的下一次升级就会有这一作用啦。

企业网站建设 网站站长 共享 zblog实例教程 文图实例教程 正儿八经事

打赏主播



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503

技术支持:自助建站