首页
微语
统计
友链
留言
memos
圈子
图床
推荐
相册
网站监控
VPS监控
Search
1
为Typecho添加webp解析
37,707 阅读
2
实现typecho微信时光机功能的图文教程
30,993 阅读
3
emlog数据成功迁移到typecho
18,672 阅读
4
typecho 时光机单页 typecho-whisper
13,309 阅读
5
湖南移动5G特惠流量月包5元5GB/10元10GB
11,217 阅读
手机达人
免费资源
电脑网络
娱乐休闲
网站建设
威言威语
Typecho
Emlog
WordPress
服务器
主题
插件
排行榜    
登录
/
注册
Search
标签搜索
wordpress
发布
插件
免费
教程
typecho
EMlog
PHP
代码
CSS
华为
图片
代码修改
安装
评论
手机
诺基亚
微信
文章
智能
Chen'mo
累计撰写
1,265
篇文章
累计收到
367
条评论
首页
栏目
手机达人
免费资源
电脑网络
娱乐休闲
网站建设
威言威语
Typecho
Emlog
WordPress
服务器
主题
插件
页面
微语
统计
友链
留言
memos
推荐
相册
网站监控
VPS监控
搜索到
2
篇与
的结果
2021-03-19
使用代码为网页顶部加上加载进度条
网页头部加一个网页加载进度条,看起来还是挺有意思的。其实制作很简单,只需要用JS监听网页加载进度即可。使用jQuery$({property: 0}).animate({property: 100}, { duration: 5000,//进度条加载进度的速度 step: function() { var percentage = Math.round(this.property); $('#progress').css('width', percentage+"%"); if(percentage == 100) { $("#progress").addClass("done");//100%后消失 } } }); css代码body{ margin:0; } #progress { position:fixed; height: 2px; background:#b91f1f; transition:opacity 500ms linear } #progress.done { opacity:0 } #progress span { position:absolute; height:2px; opacity:1; width:150px; right:-10px; } @-webkit-keyframes pulse { 30% { opacity:.6 } 60% { opacity:0; } 100% { opacity:.6 } } 网页可以用JS在body头部插入一个元素,作为进度条,不想那么麻烦,也可以直接写代码<body> <div id="progress"> <span><span> </div> <body> 使用插件nprogress是一个jQuery插件,只有几K大小。使用起来非常方便和简单。先引入<script src='nprogress.js'></script> <link rel='stylesheet' href='nprogress.css'/> 控制显示,下面这两句代码,分别放到页面开头和网页加载完成事件里面即可。NProgress.start();//开始加载进度条 NProgress.done();//停止显示进度条 控制进度条的速度NProgress.set(0.0); // Sorta same as .start() NProgress.set(0.4); NProgress.set(1.0); // Sorta same as .done() 下载和domehttps://ricostacruz.com/nprogress/
2021年03月19日
2,020 阅读
0 评论
0 点赞
2020-05-24
导航栏下拉至一定高度后固定在顶部的特效
js要引入jquery文件:<script type="text/javascript"> $(function(){ var nav=$("#header"), //得到导航对象 win=$(window), //得到窗口对象 doc=$(document);//得到document文档对象。 //防止页面滚动到60px以下F5刷新后导航不显示 if(doc.scrollTop()>=60){ $('#header').addClass('fixnav'); }else{ $('#header').removeClass('fixnav'); } //滚动到60px以下导航显示 win.scroll(function(){ if(doc.scrollTop()>=60){//判断滚动的高度 $("#header").addClass('fixnav');//固定导航样式类名 }else{ $("#header").removeClass('fixnav'); } }) }) </script>然后在css文件里面增加这个属性(其他一些样式自行添加):.fixnav { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 999; }
2020年05月24日
864 阅读
0 评论
0 点赞