欢迎您访问橙子博客 载入天数...载入时分秒...
  • 手机版手机版
您现在的位置是:首页 >  Fycms专栏 > Fycms教程 (RSS订阅)
  • 让网站变灰的CSS代码(支持IE、Firefox和Chrome)

    让网站变灰的CSS代码(支持IE、Firefox和Chrome)

    当需要将网站变灰色来表达平台的哀悼时,如今主流CSS代码为 主流方法!网站变灰色的CSS代码<style>html{ filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); filter: grayscale(100%);}</style> 以上代码除了IE都支持,也是现在国内主流网站常用的方法,都对被嫌弃的IE没做特别处理了因为今年微软已经停止对IE支持更新,力推Edge浏览器,Win平台下的浏览器至此也与Chrome一致了。上方代码轻便易用,放在需要灰掉的页面即可。建议放在<head>里。 支持IE9及以上 如果确定要兼容IE9及以上,可以使用下方代码,效果如QQ腾讯网这样,可以用一个灰色层模拟一下。 <div style=position:fixed;z-index:999;width:100vw; height:100vh; left:-100vw; outline: 101vw solid rgba(100,100,100,.7);></div>

    橙子 2022-12-02
    Fycms教程
  • 手机、PC、平板、笔记本四端网站缩略展示图在线一键生成

    手机、PC、平板、笔记本四端网站缩略展示图在线一键生成

    这是一款新版Free手机、PC、平板、笔记本四端网站缩略展示图在线一键生成PHP网站源码。用户打开网站后输入网址域名,然后点击一下就可以生成手机端、 PC电脑端、笔记本端和平板端的网站实时缩略图,并且页面也是可以点击的 。可以选择加载你想要的页面缩略图,输入网址点击GO然后截图即可! 演示截图: 下载源码上传至主机服务器中即可使用。源码来自网络,版权归原作者所有,仅供学习参考,请勿商用!

    橙子 2022-08-31
    Fycms教程
  • JS后退、前进、返回上一页和刷新代码

    JS后退、前进、返回上一页和刷新代码

    本文给大家分享的是JS后退、前进、返回上一页并刷新的代码,非常实用值得收藏,下面就直接上代码吧。 JS后退代码:window.history.go(-1) 可简写为: history.go(-1)window.history.back() 可简写为: history.back()JS前进代码:window.history.go(1) 可简写为: history.go(1)window.history.forward() 可简写为: history.forward() JS返回上一页并刷新代码:self.location=window.document.referrer 可简写为: self.location=document.referrer JS刷新代码:history.go(0) location.reload() location=location location.assign(location) document.execCommand('Refresh') window.navigate(location) location.replace(location) document.URL=location.href 调用实例: 按钮调用:<input type=button value=后退 onclick=window.history.go(-1) /><input type=button value=返回上一页 onclick=history.back() /><input type=button value=前进 onclick=window.history.go(1) /><input type=button value=前进 onclick=window.history.forward() /><input type=button value=返回上一页并刷新 onclick=self.location=window.document.referrer; /><input type=button value=刷新 onclick=window.location.reload() /> 链接调用:<a href=javascript:history.go(-1);>后退</a><a href=javascript: onclick=history.back()>返回上一页</a><a href=# onclick=javascript:history.back();>返回上一步</a><a href=javascript:history.go(1);>前进</a><a href=# onclick=history.forward();>前进</a><a href=javascript: onclick=self.location=document.referrer;>返回上一页并刷新</a> <a href=# onclick=location.reload();>刷新</a> 以上就是JS后退、前进、返回上一页并刷新代码的全部内容。

    橙子 2021-11-24
    Fycms教程
  • 让网页图片高度自适应宽度

    让网页图片高度自适应宽度

    你肯定知道width百分比可以实现图片宽度的自适应,那么你知道高度也可以根据宽度变化而自适应比变化么,看下本文就了解了! 当前响应式布局,内容尺寸自适应设备是众多网站开发者的选择,毕竟现在显示器、笔记本、移动设备的尺寸太过于繁多了,其中大家都知道使用width=100%样式可以实现元素的自适应宽度,但是让元素的高度根据宽度变化而变化却并不能直接通过css简单实现。下面咱们举个栗子... 比如,我在布局的时候想要实现一个横向排列的图片效果,要求是图片能够根据屏幕的大小自动调整,以四张图片为例,我们很简单的就能实现,直接给让图片所在的元素宽度为25%就可以了啊。但是如果图片的宽高比例并不相同,那么就会出现下图的情况:四张图片的宽度是相同的,但是高度却参差不齐,视觉效果差。 图片高度参差不齐 下面贴出demo代码,大家可以在本地调试。(代码中图片路径请自行修改)<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><title>图片高度自适应demo</title><style type=text/css>*{margin: 0; padding: 0; border: 0;}ul,ol,li{list-style: none;}.wrap{margin: 100px auto 0; width: 600px; padding: 10px; border: 1px dashed #3e3e3e; overflow: hidden;}.wrap p{font-size: 16px; font-weight: bold; text-align: center; height: 30px; line-height: 30px;}.wrap span{float: right; display: inline-block;}.wrap ul{overflow: hidden;}.wrap ul li{float: left; width: 23%; padding: 1%}.wrap ul li img{width: 100%;}</style></head><body><div class=wrap><p>图片高度自适应demo</p><ul><li><img src=1.jpg></li><li><img src=2.jpg></li><li><img src=3.jpg></li><li><img src=4.jpg></li></ul><span>demo by www.chenningtao.cn</span></div></body></html> 此时如果想让图片高度都保持一样,我们可以给图片自定义高度,但如果图片宽度变化了,高度是不会跟着变的,就会出现图片变形的情况。 那么这个时候就要解决图片高度的自适应问题了,由于当前浏览器都是从上而下浏览,页面高度随着内容的变化而变化,并不像宽度一样是固定的,使用百分百比的height显然不现实。这就需要请出来js大法了,将下例js代码放入demo中,刷新页面后整个页面变得整洁美观,强迫症们表示太棒了。<script type=text/javascript>//元素高度自适应宽度$(function(){var ratio = 0.8;/*此处是宽高比例*/var liWidth = $('.wrap ul li').width();/*括号中为父元素选择器*/var liHeight = liWidth * ratio;$('.wrap li img').width( liWidth );$('.wrap li img').height( liHeight );});</script> 添加高度自适应js代码后 查看元素后我们可以看出,此段js给图片增加了行内样式,所以此时如果再调整浏览器宽度,图片宽高并不会变化。 需要注意的是,本例依托于jquery框架,所以需要在网页<head>里引入jquery.js文件。其中ratio=0.8是指你想要实现的图片宽高比例;liWidth是图片父元素宽度,图片会自动适应此宽度,注意代码中元素选择器的填写。 有些前端基础的朋友估计也懂了,此代码不仅适用于图片,所有的块状元素都可以通过此代码来实现宽高固定比例的,这样一来在自适应布局上就简单很多了。 本文代码兼容主流浏览器(包括IE),需提前引入jquery文件,代码简洁却有大功能,可以说是响应式布局的一个神器了。

    橙子 2021-11-20
    Fycms教程
  • 最后加载广告的JS代码

    最后加载广告的JS代码

    网页打开的顺序都是按页面从上到下的顺序加载完成的,所以要想使广告不影响页面打开速度,就要等页面全部打开完成后,再加载广告JS代码。等页面加载完再加载广告其实就是将广告的 JS 代码放在页面的底部,等页面内容打开完成后再加载到广告代码,再用页面上预留好的的 DIV 输出广告。 使用方法: 1、将以下代码放置页面中想要放广告的地方<div id=myads>载入中...</div> 2、将一下代码放置页面底部,也就是footer文件的底部。<div id=span_myads>这里放广告代码</div> < script type=text/javascript> document.getElementById(myads).innerHTML = document.getElementById(span_myads).innerHTML; document.getElementById(span_myads).innerHTML = ; < /script> OK,这样就实现了先加载完页面再加载广告了,怎么样不影响大家阅读吧~

    橙子 2021-11-20
    Fycms教程
  • css3立体效果404页面

    css3立体效果404页面

    css3立体效果404页面,当然,css3的立体效果自然是不支持IE678的,这没办法,不过作为css3的学习资料还是不错的,效果如下图: 这个css3立体效果主要是利用了css3属性text-shadow:这个属性。因为这个css3属性可以用逗号隔开写多个,如下:text-shadow:0px 0px 2px #686868,0px 1px 1px #fff,0px 2px 1px #fff,0px 3px 1px #fff,0px 4px 1px #fff,这样就可以模拟立体效果。这个css3立体效果404页面的制作思路非常有借鉴意义,本站的404页面就是这个,演示地址:https://www.chenningtao.cn/404html代码:<!doctype html><html><head><meta charset=utf-8><title>css3立体效果404页面 </title><meta name=keywords content=404页面,css3,css3立体 /><meta name=description content=css3立体效果404页面 /><meta name=Copyright content=Copyright /><style>body { background-color: #ECECEC; font-family:Arial, Helvetica, sans-serif; font-size: 14px; color: #3c3c3c; padding:150px;}.page404 .f404{ text-align: center; font-size: 150px; font-weight: bold; line-height: 100px; letter-spacing: 5px; color: #fff; margin-bottom:60px;}.page404 .f404 span { cursor: pointer; text-shadow: 0px 0px 2px #686868, 0px 1px 1px #ddd, 0px 2px 1px #d6d6d6, 0px 3px 1px #ccc, 0px 4px 1px #c5c5c5, 0px 5px 1px #c1c1c1, 0px 6px 1px #bbb, 0px 7px 1px #777, 0px 8px 3px rgba(100, 100, 100, 0.4), 0px 9px 5px rgba(100, 100, 100, 0.1), 0px 10px 7px rgba(100, 100, 100, 0.15), 0px 11px 9px rgba(100, 100, 100, 0.2), 0px 12px 11px rgba(100, 100, 100, 0.25), 0px 13px 15px rgba(100, 100, 100, 0.3); -webkit-transition: all .1s linear; transition: all .1s linear;}.page404 .f404 span:hover { text-shadow: 0px 0px 2px #686868, 0px 1px 1px #fff, 0px 2px 1px #fff, 0px 3px 1px #fff, 0px 4px 1px #fff, 0px 5px 1px #fff, 0px 6px 1px #fff, 0px 7px 1px #777, 0px 8px 3px #fff, 0px 9px 5px #fff, 0px 10px 7px #fff, 0px 11px 9px #fff, 0px 12px 11px #fff, 0px 13px 15px #fff; -webkit-transition: all .1s linear; transition: all .1s linear;}.page404 .f404-des{ text-align: center; color: #666; font-family: cursive; font-size: 20px; text-shadow: 0 1px 0 #fff; letter-spacing: 1px; line-height: 2em;}</style></head><body> <div class=page404> <div class=f404><span>4</span><span>0</span><span>4</span></div> <div class=f404-des> 该页面不存在(&acute;&#65381;ω&#65381;`)<br/> <a href=/>返回首页</a> </div> </div></body></html>

    橙子 2021-10-31
    Fycms教程
  • 网页顶部加载进度条,跟随网页加载完自动消失

    网页顶部加载进度条,跟随网页加载完自动消失

    网页顶部加载进度条,跟随网页加载完自动消失 如图: 刷新本页面可查看顶部进度条效果代码如下 css:.pace { -webkit-pointer-events:none; pointer-events:none; -webkit-user-select:none; -moz-user-select:none; user-select:none;}.pace-inactive { display:none;/*此段代码进度条跑完后隐藏*/}.pace .pace-progress { background:#ff0000;/*进度条颜色*/ position:fixed; z-index:2000; top:0; left:0;/*进度条开始位置*/ height:3px;/*进度条高度(宽度)*/ -webkit-transition:width 0.1s; -moz-transition:width 0.1s; -o-transition:width 0.1s; transition:width 0.1s;} js:(function(){var AjaxMonitor,Bar,DocumentMonitor,ElementMonitor,ElementTracker,EventLagMonitor,Evented,Events,NoTargetError,RequestIntercept,SOURCE_KEYS,Scaler,SocketRequestTracker,XHRRequestTracker,animation,avgAmplitude,bar,cancelAnimation,cancelAnimationFrame,defaultOptions,extend,extendNative,getFromDOM,getIntercept,handlePushState,ignoreStack,init,now,options,requestAnimationFrame,result,runAnimation,scalers,shouldIgnoreURL,shouldTrack,source,sources,uniScaler,_WebSocket,_XDomainRequest,_XMLHttpRequest,_i,_intercept,_len,_pushState,_ref,_ref1,_replaceState,__slice=.slice,__hasProp={}.hasOwnProperty,__extends=function(child,parent){for(var key in parent){if(__hasProp.call(parent,key)){childkey=parentkey}}function ctor(){this.constructor=child}ctor.prototype=parent.prototype;child.prototype=new ctor();child.__super__=parent.prototype;return child},__indexOf=.indexOf||function(item){for(var i=0,l=this.length;i<l;i++){if(i in this&&thisi===item){return i}}return -1};defaultOptions={catchupTime:500,initialRate:0.03,minTime:500,ghostTime:500,maxProgressPerFrame:10,easeFactor:1.25,startOnPageLoad:true,restartOnPushState:true,restartOnRequestAfter:500,target:body,elements:{checkInterval:100,selectors:body},eventLag:{minSamples:10,sampleCount:3,lagThreshold:3},ajax:{trackMethods:GET,trackWebSockets:true,ignoreURLs:}};now=function(){var _ref;return(_ref=typeof performance!==undefined&&performance!==null?typeof performance.now===function?performance.now():void 0:void 0)!=null?_ref:+(new Date)};requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame;if(requestAnimationFrame==null){requestAnimationFrame=function(fn){return setTimeout(fn,50)};cancelAnimationFrame=function(id){return clearTimeout(id)}}runAnimation=function(fn){var last,tick;last=now();tick=function(){var diff;diff=now()-last;if(diff>=33){last=now();return fn(diff,function(){return requestAnimationFrame(tick)})}else{return setTimeout(tick,33-diff)}};return tick()};result=function(){var args,key,obj;obj=arguments0,key=arguments1,args=3<=arguments.length?__slice.call(arguments,2):;if(typeof objkey===function){return objkey.apply(obj,args)}else{return objkey}};extend=function(){var key,out,source,sources,val,_i,_len;out=arguments0,sources=2<=arguments.length?__slice.call(arguments,1):;for(_i=0,_len=sources.length;_i<_len;_i++){source=sources_i;if(source){for(key in source){if(!__hasProp.call(source,key)){continue}val=sourcekey;if((outkey!=null)&&typeof outkey===object&&(val!=null)&&typeof val===object){extend(outkey,val)}else{outkey=val}}}}return out};avgAmplitude=function(arr){var count,sum,v,_i,_len;sum=count=0;for(_i=0,_len=arr.length;_i<_len;_i++){v=arr_i;sum+=Math.abs(v);count++}return sum/count};getFromDOM=function(key,json){var data,e,el;if(key==null){key=options}if(json==null){json=true}el=document.querySelector(data-pace-+key+);if(!el){return}data=el.getAttribute(data-pace-+key);if(!json){return data}try{return JSON.parse(data)}catch(_error){e=_error;return typeof console!==undefined&&console!==null?console.error(Error parsing inline pace options,e):void 0}};Evented=(function(){function Evented(){}Evented.prototype.on=function(event,handler,ctx,once){var _base;if(once==null){once=false}if(this.bindings==null){this.bindings={}}if((_base=this.bindings)event==null){_baseevent=}return this.bindingsevent.push({handler:handler,ctx:ctx,once:once})};Evented.prototype.once=function(event,handler,ctx){return this.on(event,handler,ctx,true)};Evented.prototype.off=function(event,handler){var i,_ref,_results;if(((_ref=this.bindings)!=null?_refevent:void 0)==null){return}if(handler==null){return delete this.bindingsevent}else{i=0;_results=;while(i<this.bindingsevent.length){if(this.bindingseventi.handler===handler){_results.push(this.bindingsevent.splice(i,1))}else{_results.push(i++)}}return _results}};Evented.prototype.trigger=function(){var args,ctx,event,handler,i,once,_ref,_ref1,_results;event=arguments0,args=2<=arguments.length?__slice.call(arguments,1):;if((_ref=this.bindings)!=null?_refevent:void 0){i=0;_results=;while(i<this.bindingsevent.length){_ref1=this.bindingseventi,handler=_ref1.handler,ctx=_ref1.ctx,once=_ref1.once;handler.apply(ctx!=null?ctx:this,args);if(once){_results.push(this.bindingsevent.splice(i,1))}else{_results.push(i++)}}return _results}};return Evented})();if(window.Pace==null){window.Pace={}}extend(Pace,Evented.prototype);options=Pace.options=extend({},defaultOptions,window.paceOptions,getFromDOM());_ref=ajax,document,eventLag,elements;for(_i=0,_len=_ref.length;_i<_len;_i++){source=_ref_i;if(optionssource===true){optionssource=defaultOptionssource}}NoTargetError=(function(_super){__extends(NoTargetError,_super);function NoTargetError(){_ref1=NoTargetError.__super__.constructor.apply(this,arguments);return _ref1}return NoTargetError})(Error);Bar=(function(){function Bar(){this.progress=0}Bar.prototype.getElement=function(){var targetElement;if(this.el==null){targetElement=document.querySelector(options.target);if(!targetElement){throw new NoTargetError}this.el=document.createElement(div);this.el.className=pace pace-active;document.body.className=document.body.className.replace(/pace-done/g,);document.body.className+= pace-running;this.el.innerHTML='<div class=pace-progress>\n <div class=pace-progress-inner></div>\n</div>\n<div class=pace-activity></div>';if(targetElement.firstChild!=null){targetElement.insertBefore(this.el,targetElement.firstChild)}else{targetElement.appendChild(this.el)}}return this.el};Bar.prototype.finish=function(){var el;el=this.getElement();el.className=el.className.replace(pace-active,);el.className+= pace-inactive;document.body.className=document.body.className.replace(pace-running,);return document.body.className+= pace-done};Bar.prototype.update=function(prog){this.progress=prog;return this.render()};Bar.prototype.destroy=function(){try{this.getElement().parentNode.removeChild(this.getElement())}catch(_error){NoTargetError=_error}return this.el=void 0};Bar.prototype.render=function(){var el,progressStr;if(document.querySelector(options.target)==null){return false}el=this.getElement();el.children0.style.width=+this.progress+%;if(!this.lastRenderedProgress||this.lastRenderedProgress|0!==this.progress|0){el.children0.setAttribute(data-progress-text,+(this.progress|0)+%);if(this.progress>=100){progressStr=99}else{progressStr=this.progress<10?0:;progressStr+=this.progress|0}el.children0.setAttribute(data-progress,+progressStr)}return this.lastRenderedProgress=this.progress};Bar.prototype.done=function(){return this.progress>=100};return Bar})();Events=(function(){function Events(){this.bindings={}}Events.prototype.trigger=function(name,val){var binding,_j,_len1,_ref2,_results;if(this.bindingsname!=null){_ref2=this.bindingsname;_results=;for(_j=0,_len1=_ref2.length;_j<_len1;_j++){binding=_ref2_j;_results.push(binding.call(this,val))}return _results}};Events.prototype.on=function(name,fn){var _base;if((_base=this.bindings)name==null){_basename=}return this.bindingsname.push(fn)};return Events})();_XMLHttpRequest=window.XMLHttpRequest;_XDomainRequest=window.XDomainRequest;_WebSocket=window.WebSocket;extendNative=function(to,from){var e,key,val,_results;_results=;for(key in from.prototype){try{val=from.prototypekey;if((tokey==null)&&typeof val!==function){_results.push(tokey=val)}else{_results.push(void 0)}}catch(_error){e=_error}}return _results};ignoreStack=;Pace.ignore=function(){var args,fn,ret;fn=arguments0,args=2<=arguments.length?__slice.call(arguments,1):;ignoreStack.unshift(ignore);ret=fn.apply(null,args);ignoreStack.shift();return ret};Pace.track=function(){var args,fn,ret;fn=arguments0,args=2<=arguments.length?__slice.call(arguments,1):;ignoreStack.unshift(track);ret=fn.apply(null,args);ignoreStack.shift();return ret};shouldTrack=function(method){var _ref2;if(method==null){method=GET}if(ignoreStack0===track){returnforce}if(!ignoreStack.length&&options.ajax){if(method===socket&&options.ajax.trackWebSockets){return true}else{if(_ref2=method.toUpperCase(),__indexOf.call(options.ajax.trackMethods,_ref2)>=0){return true}}}return false};RequestIntercept=(function(_super){__extends(RequestIntercept,_super);function RequestIntercept(){var monitorXHR,_this=this;RequestIntercept.__super__.constructor.apply(this,arguments);monitorXHR=function(req){var _open;_open=req.open;return req.open=function(type,url,async){if(shouldTrack(type)){_this.trigger(request,{type:type,url:url,request:req})}return _open.apply(req,arguments)}};window.XMLHttpRequest=function(flags){var req;req=new _XMLHttpRequest(flags);monitorXHR(req);return req};try{extendNative(window.XMLHttpRequest,_XMLHttpRequest)}catch(_error){}if(_XDomainRequest!=null){window.XDomainRequest=function(){var req;req=new _XDomainRequest;monitorXHR(req);return req};try{extendNative(window.XDomainRequest,_XDomainRequest)}catch(_error){}}if((_WebSocket!=null)&&options.ajax.trackWebSockets){window.WebSocket=function(url,protocols){var req;if(protocols!=null){req=new _WebSocket(url,protocols)}else{req=new _WebSocket(url)}if(shouldTrack(socket)){_this.trigger(request,{type:socket,url:url,protocols:protocols,request:req})}return req};try{extendNative(window.WebSocket,_WebSocket)}catch(_error){}}}return RequestIntercept})(Events);_intercept=null;getIntercept=function(){if(_intercept==null){_intercept=new RequestIntercept}return _intercept};shouldIgnoreURL=function(url){var pattern,_j,_len1,_ref2;_ref2=options.ajax.ignoreURLs;for(_j=0,_len1=_ref2.length;_j<_len1;_j++){pattern=_ref2_j;if(typeof pattern===string){if(url.indexOf(pattern)!==-1){return true}}else{if(pattern.test(url)){return true}}}return false};getIntercept().on(request,function(_arg){var after,args,request,type,url;type=_arg.type,request=_arg.request,url=_arg.url;if(shouldIgnoreURL(url)){return}if(!Pace.running&&(options.restartOnRequestAfter!==false||shouldTrack(type)===force)){args=arguments;after=options.restartOnRequestAfter||0;if(typeof after===boolean){after=0}return setTimeout(function(){var stillActive,_j,_len1,_ref2,_ref3,_results;if(type===socket){stillActive=request.readyState<2}else{stillActive=(0<(_ref2=request.readyState)&&_ref2<4)}if(stillActive){Pace.restart();_ref3=Pace.sources;_results=;for(_j=0,_len1=_ref3.length;_j<_len1;_j++){source=_ref3_j;if(source instanceof AjaxMonitor){source.watch.apply(source,args);break}else{_results.push(void 0)}}return _results}},after)}});AjaxMonitor=(function(){function AjaxMonitor(){var _this=this;this.elements=;getIntercept().on(request,function(){return _this.watch.apply(_this,arguments)})}AjaxMonitor.prototype.watch=function(_arg){var request,tracker,type,url;type=_arg.type,request=_arg.request,url=_arg.url;if(shouldIgnoreURL(url)){return}if(type===socket){tracker=new SocketRequestTracker(request)}else{tracker=new XHRRequestTracker(request)}return this.elements.push(tracker)};return AjaxMonitor})();XHRRequestTracker=(function(){function XHRRequestTracker(request){var event,size,_j,_len1,_onreadystatechange,_ref2,_this=this;this.progress=0;if(window.ProgressEvent!=null){size=null;request.addEventListener(progress,function(evt){if(evt.lengthComputable){return _this.progress=100*evt.loaded/evt.total}else{return _this.progress=_this.progress+(100-_this.progress)/2}});_ref2=load,abort,timeout,error;for(_j=0,_len1=_ref2.length;_j<_len1;_j++){event=_ref2_j;request.addEventListener(event,function(){return _this.progress=100})}}else{_onreadystatechange=request.onreadystatechange;request.onreadystatechange=function(){var _ref3;if((_ref3=request.readyState)===0||_ref3===4){_this.progress=100}else{if(request.readyState===3){_this.progress=50}}return typeof _onreadystatechange===function?_onreadystatechange.apply(null,arguments):void 0}}}return XHRRequestTracker})();SocketRequestTracker=(function(){function SocketRequestTracker(request){var event,_j,_len1,_ref2,_this=this;this.progress=0;_ref2=error,open;for(_j=0,_len1=_ref2.length;_j<_len1;_j++){event=_ref2_j;request.addEventListener(event,function(){return _this.progress=100})}}return SocketRequestTracker})();ElementMonitor=(function(){function ElementMonitor(options){var selector,_j,_len1,_ref2;if(options==null){options={}}this.elements=;if(options.selectors==null){options.selectors=}_ref2=options.selectors;for(_j=0,_len1=_ref2.length;_j<_len1;_j++){selector=_ref2_j;this.elements.push(new ElementTracker(selector))}}return ElementMonitor})();ElementTracker=(function(){function ElementTracker(selector){this.selector=selector;this.progress=0;this.check()}ElementTracker.prototype.check=function(){var _this=this;if(document.querySelector(this.selector)){return this.done()}else{return setTimeout((function(){return _this.check()}),options.elements.checkInterval)}};ElementTracker.prototype.done=function(){return this.progress=100};return ElementTracker})();DocumentMonitor=(function(){DocumentMonitor.prototype.states={loading:0,interactive:50,complete:100};function DocumentMonitor(){var _onreadystatechange,_ref2,_this=this;this.progress=(_ref2=this.statesdocument.readyState)!=null?_ref2:100;_onreadystatechange=document.onreadystatechange;document.onreadystatechange=function(){if(_this.statesdocument.readyState!=null){_this.progress=_this.statesdocument.readyState}return typeof _onreadystatechange===function?_onreadystatechange.apply(null,arguments):void 0}}return DocumentMonitor})();EventLagMonitor=(function(){function EventLagMonitor(){var avg,interval,last,points,samples,_this=this;this.progress=0;avg=0;samples=;points=0;last=now();interval=setInterval(function(){var diff;diff=now()-last-50;last=now();samples.push(diff);if(samples.length>options.eventLag.sampleCount){samples.shift()}avg=avgAmplitude(samples);if(++points>=options.eventLag.minSamples&&avg<options.eventLag.lagThreshold){_this.progress=100;return clearInterval(interval)}else{return _this.progress=100*(3/(avg+3))}},50)}return EventLagMonitor})();Scaler=(function(){function Scaler(source){this.source=source;this.last=this.sinceLastUpdate=0;this.rate=options.initialRate;this.catchup=0;this.progress=this.lastProgress=0;if(this.source!=null){this.progress=result(this.source,progress)}}Scaler.prototype.tick=function(frameTime,val){var scaling;if(val==null){val=result(this.source,progress)}if(val>=100){this.done=true}if(val===this.last){this.sinceLastUpdate+=frameTime}else{if(this.sinceLastUpdate){this.rate=(val-this.last)/this.sinceLastUpdate}this.catchup=(val-this.progress)/options.catchupTime;this.sinceLastUpdate=0;this.last=val}if(val>this.progress){this.progress+=this.catchup*frameTime}scaling=1-Math.pow(this.progress/100,options.easeFactor);this.progress+=scaling*this.rate*frameTime;this.progress=Math.min(this.lastProgress+options.maxProgressPerFrame,this.progress);this.progress=Math.max(0,this.progress);this.progress=Math.min(100,this.progress);this.lastProgress=this.progress;return this.progress};return Scaler})();sources=null;scalers=null;bar=null;uniScaler=null;animation=null;cancelAnimation=null;Pace.running=false;handlePushState=function(){if(options.restartOnPushState){return Pace.restart()}};if(window.history.pushState!=null){_pushState=window.history.pushState;window.history.pushState=function(){handlePushState();return _pushState.apply(window.history,arguments)}}if(window.history.replaceState!=null){_replaceState=window.history.replaceState;window.history.replaceState=function(){handlePushState();return _replaceState.apply(window.history,arguments)}}SOURCE_KEYS={ajax:AjaxMonitor,elements:ElementMonitor,document:DocumentMonitor,eventLag:EventLagMonitor};(init=function(){var type,_j,_k,_len1,_len2,_ref2,_ref3,_ref4;Pace.sources=sources=;_ref2=ajax,elements,document,eventLag;for(_j=0,_len1=_ref2.length;_j<_len1;_j++){type=_ref2_j;if(optionstype!==false){sources.push(new SOURCE_KEYStype(optionstype))}}_ref4=(_ref3=options.extraSources)!=null?_ref3:;for(_k=0,_len2=_ref4.length;_k<_len2;_k++){source=_ref4_k;sources.push(new source(options))}Pace.bar=bar=new Bar;scalers=;return uniScaler=new Scaler})();Pace.stop=function(){Pace.trigger(stop);Pace.running=false;bar.destroy();cancelAnimation=true;if(animation!=null){if(typeof cancelAnimationFrame===function){cancelAnimationFrame(animation)}animation=null}return init()};Pace.restart=function(){Pace.trigger(restart);Pace.stop();return Pace.start()};Pace.go=function(){var start;Pace.running=true;bar.render();start=now();cancelAnimation=false;return animation=runAnimation(function(frameTime,enqueueNextFrame){var avg,count,done,element,elements,i,j,remaining,scaler,scalerList,sum,_j,_k,_len1,_len2,_ref2;remaining=100-bar.progress;count=sum=0;done=true;for(i=_j=0,_len1=sources.length;_j<_len1;i=++_j){source=sourcesi;scalerList=scalersi!=null?scalersi:scalersi=;elements=(_ref2=source.elements)!=null?_ref2:source;for(j=_k=0,_len2=elements.length;_k<_len2;j=++_k){element=elementsj;scaler=scalerListj!=null?scalerListj:scalerListj=new Scaler(element);done&=scaler.done;if(scaler.done){continue}count++;sum+=scaler.tick(frameTime)}}avg=sum/count;bar.update(uniScaler.tick(frameTime,avg));if(bar.done()||done||cancelAnimation){bar.update(100);Pace.trigger(done);return setTimeout(function(){bar.finish();Pace.running=false;return Pace.trigger(hide)},Math.max(options.ghostTime,Math.max(options.minTime-(now()-start),0)))}else{return enqueueNextFrame()}})};Pace.start=function(_options){extend(options,_options);Pace.running=true;try{bar.render()}catch(_error){NoTargetError=_error}if(!document.querySelector(.pace)){return setTimeout(Pace.start,50)}else{Pace.trigger(start);return Pace.go()}};if(typeof define===function&&define.amd){define(function(){return Pace})}else{if(typeof exports===object){module.exports=Pace}else{if(options.startOnPageLoad){Pace.start()}}}}).call(this); 使用方法:1.将以上源码放到你网站对应的css和js文件里2.刷新网页即可看到效果!

    橙子 2021-10-31
    Fycms教程
  • JS制作漂亮的鲜花

    JS制作漂亮的鲜花

    看这朵鲜花多漂亮,一开始感觉是一张图片,审查元素后发现是用js写的,学习一下,我在这里分享给大家。 代码:<html><head><title>JS鲜花</title><meta charset=UTF-8><meta http-equiv=Content-Type content=text/html; charset=UTF-8></head><body style=margin-left:350px><canvas id=c></canvas><script>var b = document.body;var c = document.getElementsByTagName('canvas')0;var a = c.getContext('2d');document.body.clientWidth;</script><script> with(m=Math)C=cos,S=sin,P=pow,R=random;c.width=c.height=f=600;h=-250;function p(a,b,c){if(c>60)returnS(a*7)*(13+5/(.2+P(b*4,4)))-S(b)*50,b*f+50,625+C(a*7)*(13+5/(.2+P(b*4,4)))+b*400,a*1-b/2,a;A=a*2-1;B=b*2-1;if(A*A+B*B<1){if(c>37){n=(j=c&1)?6:4;o=.5/(a+.01)+C(b*125)*3-a*300;w=b*h;returno*C(n)+w*S(n)+j*610-390,o*S(n)-w*C(n)+550-j*350,1180+C(B+A)*99-j*300,.4-a*.1+P(1-B*B,-h*6)*.15-a*b*.4+C(a+b)/5+P(C((o*(a+1)+(B>0?w:-w))/25),30)*.1*(1-B*B),o/1e3+.7-o*w*3e-6}if(c>32){c=c*1.16-.15;o=a*45-20;w=b*b*h;z=o*S(c)+w*C(c)+620;returno*C(c)-w*S(c),28+C(B*.5)*99-b*b*b*60-z/2-h,z,(b*b*.3+P((1-(A*A)),7)*.15+.3)*b,b*.7}o=A*(2-b)*(80-c*2);w=99-C(A)*120-C(b)*(-h-c*4.9)+C(P(1-b,7))*50+c*2;z=o*S(c)+w*C(c)+700;returno*C(c)-w*S(c),B*99-C(P(b, 7))*50-c/3-z/1.35+450,z,(1-b/1.2)*.9+a*.1, P((1-b),20)/4+.05}}setInterval('for(i=0;i<1e4;i++)if(s=p(R(),R(),i%46/.74)){z=s2;x=~~(s0*f/z-h);y=~~(s1*f/z-h);if(!mq=y*f+x|mq>z)mq=z,a.fillStyle=rgb(+~(s3*h)+,+~(s4*h)+,+~(s3*s3*-80)+),a.fillRect(x,y,1,1)}',0)</script></body></html>

    橙子 2021-10-27
    Fycms教程
  • 分享一款纯css3+JS实现的漂亮的404页面

    分享一款纯css3+JS实现的漂亮的404页面

    分享一款纯css3+JS实现的漂亮的404页面,无需加载任何图片,纯代码实现雪花渲染,有详细的代码提供大家学习,感兴趣的朋友可以参考下...一起看下最终效果图: 实现代码:<!DOCTYPE html><html> <head> <meta http-equiv=Content-Type content=text/html; charset=UTF-8> <title>404页面</title> <style> html, body { height: 100%; min-height: 450px; font-size: 32px; font-weight: 500; color: #5d7399; margin: 0; padding: 0; border: 0; } .content { height: 100%; position: relative; z-index: 1; background-color: #d2e1ec; background-image: -webkit-linear-gradient(top, #bbcfe1 0%, #e8f2f6 80%); background-image: linear-gradient(to bottom, #bbcfe1 0%, #e8f2f6 80%); overflow: hidden; } .snow { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 20; } .main-text { padding: 20vh 20px 0 20px; text-align: center; line-height: 2em; font-size: 5vh; } .main-text h1 { font-size: 45px; line-height: 48px; margin: 0; padding: 0; } .main-text-a { height: 32px; margin-left: auto; margin-right: auto; text-align: center; } .main-text-a a { font-size: 16px; text-decoration: none; color: #0066CC; } .main-text-a a:hover { color: #000; } .home-link { font-size: 0.6em; font-weight: 400; color: inherit; text-decoration: none; opacity: 0.6; border-bottom: 1px dashed rgba(93, 115, 153, 0.5); } .home-link:hover { opacity: 1; } .ground { height: 160px; width: 100%; position: absolute; bottom: 0; left: 0; background: #f6f9fa; box-shadow: 0 0 10px 10px #f6f9fa; } .ground:before, .ground:after { content: ''; display: block; width: 250px; height: 250px; position: absolute; top: -62.5px; z-index: -1; background: transparent; -webkit-transform: scaleX(0.2) rotate(45deg); transform: scaleX(0.2) rotate(45deg); } .ground:after { left: 50%; margin-left: -166.66667px; box-shadow: -340px 260px 15px #8193b2, -620px 580px 15px #8193b2, -900px 900px 15px #b0bccf, -1155px 1245px 15px #b4bed1, -1515px 1485px 15px #8193b2, -1755px 1845px 15px #8a9bb8, -2050px 2150px 15px #91a1bc, -2425px 2375px 15px #bac4d5, -2695px 2705px 15px #a1aec6, -3020px 2980px 15px #8193b2, -3315px 3285px 15px #94a3be, -3555px 3645px 15px #9aa9c2, -3910px 3890px 15px #b0bccf, -4180px 4220px 15px #bac4d5, -4535px 4465px 15px #a7b4c9, -4840px 4760px 15px #94a3be; } .ground:before { right: 50%; margin-right: -166.66667px; box-shadow: 325px -275px 15px #b4bed1, 620px -580px 15px #adb9cd, 925px -875px 15px #a1aec6, 1220px -1180px 15px #b7c1d3, 1545px -1455px 15px #7e90b0, 1795px -1805px 15px #b0bccf, 2080px -2120px 15px #b7c1d3, 2395px -2405px 15px #8e9eba, 2730px -2670px 15px #b7c1d3, 2995px -3005px 15px #9dabc4, 3285px -3315px 15px #a1aec6, 3620px -3580px 15px #8193b2, 3880px -3920px 15px #aab6cb, 4225px -4175px 15px #9dabc4, 4510px -4490px 15px #8e9eba, 4785px -4815px 15px #a7b4c9; } .mound { margin-top: -80px; font-weight: 800; font-size: 180px; text-align: center; color: #dd4040; pointer-events: none; } .mound:before { content: ''; display: block; width: 600px; height: 200px; position: absolute; left: 50%; margin-left: -300px; top: 50px; z-index: 1; border-radius: 100%; background-color: #e8f2f6; background-image: -webkit-linear-gradient(top, #dee8f1, #f6f9fa 60px); background-image: linear-gradient(to bottom, #dee8f1, #f6f9fa 60px); } .mound:after { content: ''; display: block; width: 28px; height: 6px; position: absolute; left: 50%; margin-left: -150px; top: 68px; z-index: 2; background: #dd4040; border-radius: 100%; -webkit-transform: rotate(-15deg); transform: rotate(-15deg); box-shadow: -56px 12px 0 1px #dd4040, -126px 6px 0 2px #dd4040, -196px 24px 0 3px #dd4040; } .mound_text { -webkit-transform: rotate(6deg); transform: rotate(6deg); } .mound_spade { display: block; width: 35px; height: 30px; position: absolute; right: 50%; top: 42%; margin-right: -250px; z-index: 0; -webkit-transform: rotate(35deg); transform: rotate(35deg); background: #dd4040; } .mound_spade:before, .mound_spade:after { content: ''; display: block; position: absolute; } .mound_spade:before { width: 40%; height: 30px; bottom: 98%; left: 50%; margin-left: -20%; background: #dd4040; } .mound_spade:after { width: 100%; height: 30px; top: -55px; left: 0%; box-sizing: border-box; border: 10px solid #dd4040; border-radius: 4px 4px 20px 20px; } </style> </head> <body translate=no> <div class=content> <canvas class=snow id=snow width=1349 height=400></canvas> <div class=main-text> <h1>天啊,那页失踪了</h1> <div class=main-text-a><a href=https://www.chenningtao.cn> < 返回首页</a> </div> </div> <div class=ground> <div class=mound> <div class=mound_text>404 </div> <div class=mound_spade></div> </div> </div> </div> <script> (function() { function ready(fn) { if (document.readyState != 'loading') { fn(); } else { document.addEventListener('DOMContentLoaded', fn); } } function makeSnow(el) { var ctx = el.getContext('2d'); var width = 0; var height = 0; var particles = ; var Particle = function() { this.x = this.y = this.dx = this.dy = 0; this.reset(); } Particle.prototype.reset = function() { this.y = Math.random() * height; this.x = Math.random() * width; this.dx = (Math.random() * 1) - 0.5; this.dy = (Math.random() * 0.5) + 0.5; } function createParticles(count) { if (count != particles.length) { particles = ; for (var i = 0; i < count; i++) { particles.push(new Particle()); } } } function onResize() { width = window.innerWidth; height = window.innerHeight; el.width = width; el.height = height; createParticles((width * height) / 10000); } function updateParticles() { ctx.clearRect(0, 0, width, height); ctx.fillStyle = '#f6f9fa'; particles.forEach(function(particle) { particle.y += particle.dy; particle.x += particle.dx; if (particle.y > height) { particle.y = 0; } if (particle.x > width) { particle.reset(); particle.y = 0; } ctx.beginPath(); ctx.arc(particle.x, particle.y, 5, 0, Math.PI * 2, false); ctx.fill(); }); window.requestAnimationFrame(updateParticles); } onResize(); updateParticles(); } ready(function() { var canvas = document.getElementById('snow'); makeSnow(canvas); }); })(); </script> </body></html>

    橙子 2021-10-27
    Fycms教程
  • JS禁止查看网页源代码的简单实现方法

    JS禁止查看网页源代码的简单实现方法

    在项目开发中有时会遇到不想让别人轻易查看到网站的源代码信息,我们有多种方法可以轻保护自己的网站源码。下面会介绍三种使用JavaScript来保护自己的网站源码的方法:最常见查看网站源码的无非有这四种:F12鼠标右键单击Ctrl+Shift+ICtrl+U以上的三种方法都可以查看到网站的源代码,我们可以通过使用JavaScript来屏蔽掉这三种状态从而实现禁止查看源代码效果。下面直接放源码。<script type='text/javascript'>        const handler = setInterval(function () { console.clear(); const before = new Date(); debugger; const after = new Date(); const cost = after.getTime() - before.getTime(); if (cost > 100) { } }, 1);        //屏蔽右键菜单        document.oncontextmenu = function (event) {            if (window.event) {                event = window.event;            }            try {                var the = event.srcElement;                if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {                    return false;                }                return true;            } catch (e) {                return false;            }        }        //屏蔽粘贴        document.onpaste = function (event) {            if (window.event) {                event = window.event;            }            try {                var the = event.srcElement;                if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {                    return false;                }                return true;            } catch (e) {                return false;            }        }        //屏蔽复制        //屏蔽剪切        document.oncut = function (event) {            if (window.event) {                event = window.event;            }            try {                var the = event.srcElement;                if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {                    return false;                }                return true;            } catch (e) {                return false;            }        }        //禁止f12        function fuckyou() {            window.open("/", "_blank"); //新窗口打开页面            window.close(); //关闭当前窗口(防抽)            window.location = "about:blank"; //将当前窗口跳转置空白页        }        //禁止Ctrl+U        var arr = 123, 17, 18;        document.oncontextmenu = new Function("event.returnValue=false;"), //禁用右键            window.onkeydown = function (e) {                var keyCode = e.keyCode || e.which || e.charCode;                var ctrlKey = e.ctrlKey || e.metaKey;                console.log(keyCode + "--" + keyCode);                if (ctrlKey && keyCode == 85) {                    e.preventDefault();                }                if (arr.indexOf(keyCode) > -1) {                    e.preventDefault();                }            }        function ck() {            console.profile();            console.profileEnd();            //我们判断一下profiles里面有没有东西,如果有,肯定有人按F12了,没错!!            if (console.clear) {                console.clear()            };            if (typeof console.profiles == "object") {                return console.profiles.length > 0;            }        }        function hehe() {            if ((window.console && (console.firebug || console.table && /firebug/i.test(console.table()))) || (                typeof opera ==                'object' && typeof opera.postError == 'function' && console.profile.length > 0)) {                fuckyou();            }            if (typeof console.profiles == "object" && console.profiles.length > 0) {                fuckyou();            }        }        hehe();        window.onresize = function () {            if ((window.outerHeight - window.innerHeight) > 100)                //判断当前窗口内页高度和窗口高度,如果差值大于100,那么呵呵                fuckyou();        }        document.onkeydown = function (event) {            if ((event.keyCode == 112) || //屏蔽 F1                (event.keyCode == 113) || //屏蔽 F2                (event.keyCode == 114) || //屏蔽 F3                (event.keyCode == 115) || //屏蔽 F4                // (event.keyCode == 116) || //屏蔽 F5                (event.keyCode == 117) || //屏蔽 F6                (event.keyCode == 118) || //屏蔽 F7                (event.keyCode == 119) || //屏蔽 F8                (event.keyCode == 120) || //屏蔽 F9                (event.keyCode == 121) || //屏蔽 F10                (event.keyCode == 122) || //屏蔽 F11                (event.keyCode == 123)) //屏蔽 F12            {                return false;            }        }        window.onhelp = function () {            return false;        }    </script>真正能实现源代码屏蔽的单纯的.html是不可能的!想看源代码也是没办法阻止的。此脚本这只能防止不劳而获的小白,针对计算机老鸟、大神是无法作用的;并且现在很多浏览器自带有查看网页源代码的功能。用TELEPROT 这类网站下载工具可以下载任何文件,相当于做镜像网站。想真正的保护源代码,除非服务器进行安全设置、加密。

    橙子 2021-10-27
    Fycms教程
首页 上一页 12 下一页 尾页 17条记录 10条/每页