搜索到
2
篇与
的结果
-
使用代码为网页顶部加上加载进度条 网页头部加一个网页加载进度条，看起来还是挺有意思的。其实制作很简单，只需要用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/ -
导航栏下拉至一定高度后固定在顶部的特效 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; }
