可以无压力用在基于WordPress原生评论上。
Read More →
给wordpress评论框添加颜文字
因为本站的logo经常换,换来换去也没几个满意的,所以写了个js,把现在有的图都放上,一个个切换。
<script type="text/javascript"> var headImg=["/f/head1.png","/f/head2.png","/f/head3.png"]; var headImgIndex=1; function cc () { headImgIndex=headImgIndex+1; if (headImgIndex==headImg.length) {headImgIndex=0}; //alert(headImgIndex); document.getElementById("logo").setAttribute("src", headImg[headImgIndex]); } $(document).ready(function () { setInterval("cc()", 10000); }); </script>
这样以后就可以随便折腾logo了←_←(雾
定时器最好在页面载入后使用,使用的function要先定义好。
用定时器定时更换logo
<script type="text/javascript"> function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad = sUserAgent.match(/ipad/i) == "ipad"; var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os"; var bIsMidp = sUserAgent.match(/midp/i) == "midp"; var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; var bIsAndroid = sUserAgent.match(/android/i) == "android"; var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile"; if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) { alert("phone"); } else { alert("pc"); } } browserRedirect(); </script>
本站底部有个走来走去的saber ,右侧还有个春菜,在手机上看的话,由于屏幕小,感觉挺碍事的,所以找到了js判断移动设备的代码,在移动设备下把这两个地方隐藏了,看起来好了不少。
js判断访问网站的是pc还是移动设备
这个给图片加链接的功能,主要是实现点击图片时图片在新标签页打开的功能。这对于显示得比真实尺寸小的图片尤其有用。本站没有这个功能,现在自己写了出来。
<script type="text/javascript"> window.onload=function () { var allImage=new Array(); allImage=document.getElementsByTagName("img");//获取页面的所有img标签 for (var i = allImage.length - 1; i >= 0; i--) { var imgUrl=allImage[i].getAttribute("src");//获得当前图片的网址 allImage[i].addEventListener('click', function (event) { window.open(imgUrl); //给当前图片绑定click事件,在新标签页打开图片 }, false); } }; </script>
使用addEventListener给图片添加一个绑定事件,点击图片时会在新标签页中打开图片的URL。
Read More →
用js给图片加上超链接
主管把我叫过去,说页面上的图片鼠标轻轻一拖就在新页面打开了,问我是怎么回事(她不是搞技术的)。我告诉她是因为她360浏览器的原因,其他一些浏览器虽然能拖动,但不拖到标签栏是不会在新标签页打开的。虽然如此,她还是想禁止这个情况。于是去百度,找到了js中禁止鼠标拖动的代码:
ondragstart="return false"
试试下边的图片,已经不能拖动了。
如果需要给页面上所有图片都设置此属性,可以使用以下代码:
<script type="text/javascript"> window.onload=function () { var allImg=new Array(); allImg=document.getElementsByTagName('img'); for (var i = allImg.length - 1; i >= 0; i--) { allImg[i].setAttribute("ondragstart", "return false") }; } </script>
js禁止拖动页面元素
一个网页中左侧是栏目名称列表,右侧是栏目内容列表。现在想在左侧列表中高亮显示当前栏目,所以鼓捣出来了这段代码。实际上也用了点jq,没全部用jq是因为在for循环里用jq报错。
<script> var now_title=$('.title').text();//获取当前栏目标题 now_title = $.trim(now_title);//去掉字符串中的空格,如果没有空格可以省略此步 var arr1 = new Array(); a=$('.left_nav>a');//创建栏目列表的数组 for (var i = a.length - 1; i >= 0; i--) { var cc=a[i].innerText;//获取当前元素的文字 if (cc==now_title) {//如果这个元素的文字和栏目标题一致 a[i].style.color="#fff";//则设置css的color属性 }; }; </script>
js设置当前栏目名高亮显示
之前我已经搜集了两种雪花飘落的效果:
第一种 雪花会飘满整个网页长度,占用资源严重,不推荐使用
第二种 雪花只飘满网页当前可视区域,即只会覆盖在当前一屏上,不太占资源。
这次找到的第三种,原理和第二种类似,代码如下:
<script> var snow = function() { if(1==1) { $("body").append('<canvas id="christmasCanvas" style="top: 0px; left: 0px; z-index: 5000; position: fixed; pointer-events: none;"></canvas>'); var b = document.getElementById("christmasCanvas"), a = b.getContext("2d"), d = window.innerWidth, c = window.innerHeight; b.width = d; b.height = c; for(var e = [], b = 0;b < 70;b++) { e.push({x:Math.random() * d, y:Math.random() * c, r:Math.random() * 4 + 1, d:Math.random() * 70}) } var h = 0; window.intervral4Christmas = setInterval(function() { a.clearRect(0, 0, d, c); a.fillStyle = "rgba(255, 255, 255, 0.6)"; a.shadowBlur = 5; a.shadowColor = "rgba(255, 255, 255, 0.9)"; a.beginPath(); for(var b = 0;b < 70;b++) { var f = e[b]; a.moveTo(f.x, f.y); a.arc(f.x, f.y, f.r, 0, Math.PI * 2, !0) } a.fill(); h += 0.01; for(b = 0;b < 70;b++) { if(f = e[b], f.y += Math.cos(h + f.d) + 1 + f.r / 2, f.x += Math.sin(h) * 2, f.x > d + 5 || f.x < -5 || f.y > c) { e[b] = b % 3 > 0 ? {x:Math.random() * d, y:-10, r:f.r, d:f.d} : Math.sin(h) > 0 ? {x:-5, y:Math.random() * c, r:f.r, d:f.d} : {x:d + 5, y:Math.random() * c, r:f.r, d:f.d} } } }, 70) } } snow(); </script>
只是后两种效果看着都不怎么像真的雪花呢
从139邮箱扒下来飘雪效果
下面这个示例是从1-10这个范围内输出一个整数,包括1也包括10。
<script type="text/javascript"> function GetRandomNum(Min,Max) { var Range = Max - Min; var Rand = Math.random(); return(Min + Math.round(Rand * Range)); } var num = GetRandomNum(1,10); alert(num); </script>
js生成随机数的更多知识请查看此处
js生成一个整数随机数的示例
刚刚找到并且使用的一个效果。严格来说飘落的并不是雪花,只是白色的光团。使用起来很简单,代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>snow Examples</title> </head> <body style="background: #000;">. <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript" src="https://saber.love/f/snow.js"></script> <div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 999;" class="snow-container"></div> </body> </html>
这个js貌似没有提供自定义参数,有时产生的大光团太大了,算是一个缺点吧。有时候光团会有随着移动产生变大变小的效果,与鼠标的移动也有互动效果,产生了3D感,不过感觉还是可以改进(反正我是站着说话不腰疼=,=)。
网站雪花飘落效果一例
现在本站的背景图片就是在一些图片中随机加载一张的。先贴代码吧:
<script language="javascript"> var bgarr = ["/f/aisaberbg1.jpg","/f/aisaberbg2.jpg","/f/aisaberbg3.jpg"]; var bgindex = Math.floor((Math.random()*bgarr.length)); document.body.style.backgroundImage="url("+bgarr[bgindex]+")"; </script>
注意:
1.没有加入是否会重复的判断,所以有时候可能连续两次都是一样的图片。本站现在有10张背景图片用来切换,如果连续三次四次看到的都是一样的图片,建议你买张彩票。
2.图片未加载完成之前可能无法显示背景图片,建议先在css中给body先设置一个背景颜色。图片被缓存之后基本就没什么问题了。我在chrome和firefox上只会感觉到图片切换,但是ie10我是无解了,不知道是读取缓存太慢还是怎么的,每打开一个页面总是会有一段时间背景显示为空白(今天在亲戚家发现ie11的效果和chrome、firefox一样)。这个问题我是不明觉厉,也不打算解决,直接升级ie算了,毕竟我只用chrome毕竟本站没人来我只是自己看。
3.这段代码我是放在body标签之后的,因此也没写onload事件,代码读取到就开始执行。如果是要放到head标签对之间,请自行加上onload,否则执行时会找不到body。
Read More →