木灵鱼儿

木灵鱼儿 7年前 JavaScript

JS预加载3

这次我们来做上一张和下一张按钮，HTML部分直接贴出来，反正就是strong元素只是做个显示展示，不做操作，然后在他的顶部覆盖一层span元素，这个元素做操作层。效果图：html代码：div class=""> <div id="photo_masked"></div> <div id="photo_big"> <i class="photo_off"><span class="off">+&...

3217 0 0

预加载上一张下一张

JS 预加载2

木灵鱼儿 7年前 JavaScript

JS 预加载2

单独的图片预加载已经完成，这里我们为上一张和下一张图片预加载做个准备。主要就是先将上一张和下一张的大图同时加载，在同一个图片点击事件中（当某个图片被click后）。首先就是我们要获取到上一张和下一张的图片索引位置，再通过这个值计算后来锁定对应的图片。首先我们先获取当前图片父元素的父元素的索引位置，这里要先说名一下关系链：div----dl----dt----img//这里获取到的是dl元素，每个dl元素里面都有一个img，所以索引值是一样的 var children = this.parentNode.parentNode;获取到dl后我们要再得到这个元素在dl元素数组中的索引值，之前我...

3495 0 0

预加载上一张下一张图片

高斯gs87-D双模樱桃红轴

木灵鱼儿 7年前教程

高斯gs87-D双模樱桃红轴

闲鱼收了一把高斯的双模87，这款的官方销售价格比ikbc的dc系列便宜一百，这里我就稍微分析一下两者的一些不同。首先上点图增加一下感受键帽分析键盘使用的是双色注塑pbt而且是闭口的字符，工艺上就强过淘宝39元左右的单色pbt，但是很可惜，高斯采用黑色的材质注塑，于是这套pbt很遗憾的不能透光了，但是因为是黑色的材质，一眼看上去非常清晰舒服。并且，原装的键帽菊花向来都很松弛，这样更换键帽，清理都相当方便，所以我本人是非常倾向于原装键帽，哪怕是购买的80多一套的pbt，个人感觉手感上也没有这套原装的好。而和ikbc的dc-87比，ikbc使用的虽然也是pbt，但是字符使用的镭雕工艺，这种工艺...

4063 0 0

樱桃红轴蓝牙机械键盘

Pivision 目前只支持日本节点访问

木灵鱼儿 7年前教程

Pivision 目前只支持日本节点访问

这几天想要去p站下点图片来看看，但是基本我挂了vpn还是无法登录，于是我百般搜寻，终于在手机乐园看到一条回复，说关闭了除日本以外所有节点访问，于是问群友白嫖了一个免费vpn使用，于是正常使用了，如果你还在为无法登录而苦恼，可以试试使用日本节点访问软件。

4442 0 0

Pivision

JS 预加载1

木灵鱼儿 7年前 JavaScript

JS 预加载1

预加载其实和延迟加载差不多，一样是使用一个自定义的html属性保存好正确的大图地址，然后当鼠标点击后将正确的大图地址替换给弹出的显示元素上。html部分：//这是弹窗显示部分 <div class=""> <div id="photo_masked"></div> <div id="photo_big"> <i class="photo_off"><span class="off">+&...

3367 0 0

预加载

JS延迟加载

木灵鱼儿 7年前 JavaScript

JS延迟加载

JS延迟加载我们做一个对图片的延迟加载，需要准备：一张通用的默认图片，还有几张正常使用的图片。表现形式：当浏览器没有滚动到可以显示这个图片的高度时，默认使用默认图片，这个图片一般几kb的大小，当浏览器滑动到可以显示图片的高度时，开始加载对应的图片，由透明到不透明做一个过渡，这个也是京东商城使用的一个效果。所有图片都有一个通用的class名称：.wait_load 用一个id为：#photo的div容器包裹。图片元素src默认使用默认的图片加载，并且会有一个自定义的属性，这个属性自定义名称，这里使用xsrc，其属性值要是正确的图片链接地址！<img xsrc="images...

3275 0 0

延迟加载

解决 vultr vps被谷歌学术识别为机器人的方法

木灵鱼儿 7年前教程

解决 vultr vps被谷歌学术识别为机器人的方法

因为众所周知的原因，vultr被国内各种玩弄，谷歌因此特别“重视”，并且为了防止爬虫各种偷文章，谷歌还做了屏蔽功能，为此，我们正常使用也会因为以上的综合原因导致无法正常访问。就会出现以上图片所示：We’re sorrry ....经过我多次实验，终于找到合适的解决办法，如果你谷歌搜索的话也是可以搜索的到的，为此我做一个简单的整理首先屏蔽一般都是直接屏蔽你的ip地址，这个地址一般是ipv4的地址段，这个无解，屏蔽了就是屏蔽了，解决方法就是更换ip地址，但是这个成本太高，如果你的主机已经安装好了各种的软件，低成本的更换主机方法代价非常高，并且你还不确定下一个ip是否适用，花钱更换ip段，那是...

2.3w 0 10

vultr 谷歌学术谷歌学术识别为机器人的方法

家有女友在线+本地

木灵鱼儿 7年前教程

家有女友在线+本地

本季度轻则胃溃疡，重则胃穿孔的番剧，由于众所周知的原因无法正常观看，于是我找到了一个可以在线看的站点，有需要的自行收藏一下。每周二下午左右更新在线+度娘云

6468 0 2

娘站点 o

为博客添加鼠标点击特效（富强、民主、文明、和谐...）全平台通用 V2.0

木灵鱼儿 7年前 JavaScript

为博客添加鼠标点击特效（富强、民主、文明、和谐...）全平台通用 V2.0

已经写了新版，jq的方法，地址：jq富强，如果连接失效可以在本博客搜索富强，也可以找到对应的文章经过长时间的学习，终于迎来小高潮，更新为2.0版本！2018-10-5 修复预加载js代码失效bug2018-11-3 修复了当鼠标在最右侧点击时导致X轴产生滚动条的问题2019-1-8 更新为2.0版本，修复大量bug，引用自制代码库预览图：使用要求：需要引入自制代码库：[hide]先引入tool.js 下载：蓝奏云再引入封装库base.js 下载：蓝奏云接着引入china.js 下载：蓝奏云[/hide]引入方法：以我现在的博客Typecho为例，我们需要在主题的header.ph...

3.2w 0 22

主题页面文件

JS 菜单切换

木灵鱼儿 7年前 JavaScript

JS 菜单切换

效果图:HTML部分：<div id="sideber"> <div class="sideber_d"> <h2 class="sideber_title">要闻</h2> <ul class="sideber_ul"> <li><a href="">日月不肯迟！习近平这样总结2018</a></li> ...

3447 0 0

菜单切换

JS 切换器

木灵鱼儿 7年前 JavaScript

JS 切换器

制作一个切换器，当用户点击后对应的元素背景色会发生改变，然后再次点击又会变成另一种背景色，然后无限循环。以前的时候我们做切换器是一个事件执行完毕后创建下一个事件，然后删除本次事件，然后两个事件互相调用，但是对于一些简单的设置就有点麻烦了，所以这里制作一个简单的切换器。首先就是调用： $('#box').tagge(function(){ $('#box').css('background-color','red'); },function(){ $('#box')....

2835 0 0

切换器求余算法

JS 展示菜单

木灵鱼儿 7年前 JavaScript

JS 展示菜单

根据传统，我们先修复一下上一章的bug。有两个bug：当同步动画和队列动画同时存在的时候，队列动画会触发多次。如果同步动画中，两个值或者多个值相差太多就无法完整运行。原因：主要原因是因为我们在定时器中使用了for语句，然后是同步动画的时候，假设是两个动画要同时运行，那么就会触发两个if判断，然后这两个if判断到最后都会运行一次setAttr()或者setOpacity()的方法，而这两个的方法里面都有if(obj.fn != undefined) obj.fn(); 这个语句，fn本身就是队列动画，那么就会导致触发多次。而无法完成运行是因为，假设宽度要到300，高度101，元素本身高度是...

4867 0 2

展示菜单

JS 同步动画

木灵鱼儿 7年前 JavaScript

JS 同步动画

先修缮一下百度分享栏的自动居住问题。之前是每次刷新会自动居中，这里我们要改为当用户滑动时也会自动居中。addEvent(window,'scroll',function(){ $('#share').css('top',getScroll().height + (getInner().height - parseInt(getStyle($('#share').first(),'height')))/2 + 'px'); }); //跨浏览器获取scroll大...

3583 0 0

同步动画

JS 增强弹窗队列动画

木灵鱼儿 7年前 JavaScript

JS 增强弹窗队列动画

预览图：之前在登录框弹窗时我们做了一个遮罩层，当时的遮罩层是通过js创建了，但是如果要加上动画效果，那么你创建的话就十分不方便，所以这里直接在html上建了一个div元素，然后通过js设置css。HTML部分：<div class=""> <div id="login_masked"></div> //这里创建一个div元素用于遮罩层 <div id="login"> <i class="login_off"><...

3988 0 0

增强弹窗动画列队

JS 制作百度分享栏

木灵鱼儿 7年前 JavaScript

JS 制作百度分享栏

搞这个本来是一帆风顺的，但是js就是出了一个问题，单向弹出的时候没有问题，但是返回原来位置的时候就会一直卡在某个位置然后前后移动，头疼，找了半天才发现，之前的动画封装有一个问题。创建超时调用之前，我们做了一个clearInterval(window.timer);的操作，这个步骤第一个效果在window下创建了一个timer的超时调用，第二个效果是，当第二次运行的时候，会先清除之前的超时调用，而我这个卡住的bug就是因为没有清除到timer，因为我写成了var timer = setInterval(function() {},time);了，这样这个timer是函数里面的，而我们清除的...

3474 0 0

百度分享栏

JS 动画之透明度

木灵鱼儿 7年前 JavaScript

JS 动画之透明度

使用同一个封装的动画函数，当我们传入‘o’的时候，表示要设置透明度，但是ie8以下透明度是使用filter:alpha(opacity=xxx);来实现的，所以这里要对ie做个兼容。首先对传参设置以下：$('#pox').click(function() { $('#box').animation({ 'attr': 'o', 'start': 30, 'end': 100, 'step&...

7050 0 4

opacity

JS 动画初探（下）

木灵鱼儿 7年前 JavaScript

JS 动画初探（下）

上一章我们讲在元素移动到end位置的时候，会有两个动作同时产生，一个是正常的移动element.style[attr] = parseInt(getStyle(element,attr)) + step + 'px';一个是if判断如果当前的位置已经大于或者等于end的时候，element.style[attr] = end + 'px';这样可以解决动画的最后一些的突兀感，不会先超出，然后再移动回来，而是在同一个时间完成，但是这样并不是很好的解决办法。实际上你移动距离还是超出了，只不过后面又回来了，这样可能对以后js代码有影响，所以这里就再次调整。解决超出返回的回弹问题var time...

3685 0 0

ceil floor throw

JS 动画初探（上）

木灵鱼儿 7年前 JavaScript

JS 动画初探（上）

我们先来做一个简单的动画，让一个div横向移动。既然是要横向移动，我们就要对这个div的left属性进行设置，那么这里就可以使用间歇调用的方式不断的去增加left的值，然后到了某一个指定的位置时停止。html部分：<div id="box"></div>css部分：#box { width: 100px; height: 100px; background-color: red; position: absolute; top: 300px; left: 300px; }js部分：//调用代码 $...

3296 0 0

animation

JS 封装库调试封装

木灵鱼儿 7年前 JavaScript

JS 封装库调试封装

DOM加载已经做好了，我们需要将他封装到Base中去，然后调用的时候直接通过$(function(){})将需要在dom解析后运行的代码放入圆括号函数中。封装到Base基础库中function Base(args) { this.arr = []; if(typeof args == 'string') { if(args.indexOf(' ') != -1){ var childNodes = args.split(' '); var temNo...

3242 0 0

封装库调试封装

JS DOM加载（下）

木灵鱼儿 7年前 JavaScript

JS DOM加载（下）

解决超时调用无限调用的问题之前我们并没有给超时调用加上时间设置，所以默认是一毫秒一次无限循环的，这样不好，写法上也是不那么合理，所以这里要加上毫秒数，并且还要运行后删除这个超时调用。超时调用本来是不需要赋予变量名的，但是如果你要删除的话，就需要设置一个变量名，之前我们给超时调用设置了timer的变量名，这里就不多赘述了。function addDomLoaded(fn) { if(document.addEventListener) { addEvent(document,'DOMContentLoaded',function(){ ...

3571 0 0

readyState JS DOM加载 clearInterval

JS DOM加载（上）

木灵鱼儿 7年前 JavaScript

JS DOM加载（上）

之前我们用的js都是在window.onload事件里面使用的，但是这样会有一个问题，如果页面的内容一直没有加载完毕，我们的js就无法使用，这就很头疼了，我目前为博客加的两个js效果就是处于未加载完毕就无法运行的尴尬局面。解决办法：DOMContentLoaded方法w3c提供了一个事件为DOMContentLoaded；这个事件是在浏览器解析完文档便能触发。那么这个浏览器解析文档是一个什么样的处理过程呢，就是相当于已经把html元素都过了一遍，页面已经初具雏形了，但是一些外部资源，例如图片这些还在加载中，这时便会触发DOMContentLoaded事件。简单点来说DOMContentL...

3751 0 0

DOM加载 DOMContentLoaded onload

三元运算连续三元

木灵鱼儿 7年前 JavaScript

三元运算连续三元

三元运算一般如下：(s1) ? (s2) : (s3);判断s1得到的值，如果是true就运行s2，false就运行s3。连续三元就是每次都以false运行的值再做判断，再一次三元，如下：(s1) ? (s2) : (s3) ? (s4) : (s5);这里就可以连续判断两次，和if中的else if一样，第二次三元以第一次s1返回false运行s3时，判断s3得到的值，如果为true则运行s4，false运行s5。那么连续三元都是以false运行的值再次判断，然后无限重复，直到你不需要重复了，如果说最后三元判断false不需要再运行什么了，可以打个0.(s1) ? (s2) : (s3...

5772 0 0

三元运算连续三元

JS 浏览器检测

木灵鱼儿 7年前 JavaScript

JS 浏览器检测

浏览器检测一般是不需要等待dom加载完毕的，都是直接运行判断的，所以我们在window下直接运行函数，但是又不能直接写函数，这样可能会和后面的函数冲突，比如你写了个box()函数，万一后面又有人写一个box()函数那不是冲突了，所以还要做一个闭包处理。(function getState() { (function getState() { window.system = {}; var s = []; var ua = navigator.userAgent.toLowerCase(); (s = ua.match...

4186 0 1

浏览器检测

JS 封装CSS选择器式的获取元素方法

木灵鱼儿 7年前 JavaScript

JS 封装CSS选择器式的获取元素方法

之前的章节使用都是单一式获取方法，一次只能获得单个或者对应的元素数组，唯一加了获取条件的就是通过class获取元素，我们加了一个用于筛选的idName，当idName存在，class要从这个idName元素下获取，但是这样也不能方便的使用，万一我们要在某个class元素下搜索某个tagName或者class，之前的方法完全不够用了。为此我们衍生出新的获取元素的方法。我们的希望获取元素可以这样写：$('#er span i').css('color','red')获取id为er的元素下的span元素中的i元素，让他的颜色改为红色。...

2804 0 0

CSS选择器式的获取元素方法

html的嵌套错误

木灵鱼儿 7年前 HTML

html的嵌套错误

学html的时候根本没有人讲过关于的嵌套的问题，我一直都是自由组合随便搭配，怎么方便怎么来，但是实际上html是有一些嵌套的规定的，具体我暂时并没有去深入了解，主要是我今天使用js的时候发现明明spen元素里面有p元素，就是无法获取到，具体代码如下：<p id="er"> <span id="ps">span</span> <span class="td"><i>sad</i>span</span> <span>...

4345 0 0

嵌套错误

木灵鱼儿

JS预加载3

JS 预加载2

高斯gs87-D双模樱桃红轴

Pivision 目前只支持日本节点访问

JS 预加载1

JS延迟加载

解决 vultr vps被谷歌学术识别为机器人的方法

家有女友在线+本地

为博客添加鼠标点击特效（富强、民主、文明、和谐...）全平台通用 V2.0

JS 菜单切换

JS 切换器

JS 展示菜单

JS 同步动画

JS 增强弹窗队列动画

JS 制作百度分享栏

JS 动画之透明度

JS 动画初探（下）

JS 动画初探（上）

JS 封装库调试封装

JS DOM加载（下）

JS DOM加载（上）

三元运算连续三元

JS 浏览器检测

JS 封装CSS选择器式的获取元素方法

html的嵌套错误

最近评论

博客文章RSS订阅

博客评论RSS订阅

木灵鱼儿

登录

JS预加载3

JS 预加载2

高斯gs87-D双模 樱桃红轴

Pivision 目前只支持日本节点访问

JS 预加载1

JS延迟加载

解决 vultr vps被谷歌学术识别为机器人的方法

家有女友 在线+本地

为博客添加鼠标点击特效（富强、民主、文明、和谐...）全平台通用 V2.0

JS 菜单切换

JS 切换器

JS 展示菜单

JS 同步动画

JS 增强弹窗 队列动画

JS 制作百度分享栏

JS 动画之透明度

JS 动画初探（下）

JS 动画初探（上）

JS 封装库调试封装

JS DOM加载（下）

JS DOM加载（上）

三元运算 连续三元

JS 浏览器检测

JS 封装CSS选择器式的获取元素方法

html的嵌套错误

最近评论

博客文章RSS订阅

博客评论RSS订阅

高斯gs87-D双模樱桃红轴

家有女友在线+本地

JS 增强弹窗队列动画

三元运算连续三元