木灵鱼儿
阅读:13027
为博客添加鼠标点击特效(富强、民主、文明、和谐...)全平台通用 V2.0
已经写了新版,jq的方法,地址:jq富强,如果连接失效可以在本博客搜索富强,也可以找到对应的文章
经过长时间的学习,终于迎来小高潮,更新为2.0版本!
- 2018-10-5 修复预加载js代码失效bug
- 2018-11-3 修复了当鼠标在最右侧点击时导致X轴产生滚动条的问题
- 2019-1-8 更新为2.0版本,修复大量bug,引用自制代码库
预览图:
使用要求:
需要引入自制代码库:
引入方法:
以我现在的博客Typecho为例,我们需要在主题的header.php文件中,找到<head></head>元素,在最末尾加上:
注意顺序,然后就是html的要求了!
html要求要有一个id为footer的元素,这个步入html5后,这个元素基本上是必有的,然后这个这个元素下还要有一个div元素,className为fuqiang,这个div建议是为footer的子元素,结构为#footer>.fuqiang;当然,不是子元素也是可以的,如子元素下的子元素。
html结构:
<footer id="footer">
<div class="fuqiang"></div>
</footer>
下面就是css部分了,你可以直接丢到主题自带的style.css文件中去,只要class名不冲突即可,如果冲突,请自行修改。
上面的都做好后,应该就没问题了。
js调用解析:
目前来说,修改的话,只需要修改china.js文件即可。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
css选择器优先级计算规则
规则概览0级通配选择器、选择符、逻辑组合伪类通配选择器:* {}选择符:+、>、~、空格、||逻辑组合伪类::not() {} :is() {} :where() {} :has() {}1级标签选择器body {}2级类名选择器、属性选择器、伪类类名选择器:.foo {}属性选择器:[foo] {}伪类::hover {} :active {} :focus {} :focus-within {} :focus-visible {} :link {} :visited {} :any-link {} :target {} :target-within {}...
关于给css自动添加浏览器前缀
前言为了兼容之前的旧浏览器版本,特别是安卓4.4这种低版本,transform是一定得增加浏览器前缀的,但是我在项目中遇到了设置无效的问题,极度蛋疼,下面是我的解决教程,当然没这个问题,看这篇文章,相信你对如果给项目增加浏览器前缀,会有很充分的认识。教程给css增加浏览器前缀,业界的做法就是使用postcss,目前webpack与vue cli他们需要安装的依赖略有不同:webpack:pnpm i postcss postcss-loader autoprefixer -D添加对应的rules{ test: /.s?css$/, use: [ ...省略...
transform 知识补充
rotate的坐标轴和默认值z轴可以看成正对着自己脸的一根轴,每个轴的旋转方向默认如图箭头所示。所有的旋转角度,正值都是根据默认的旋转方向来得,负值则是相反。transform: rotateZ(45deg);只有Z轴的旋转再二维的界面才是有效的,如下图所示:因为在二维的界面Z轴的变化才是有效的,所以默认值的设置就是Z轴,所以简写形式等效于rotateZtransform: rotate(45deg); /*等同于rotateZ(45deg)*/translatetranslate的变化是根据元素的坐标轴而变化的,比如X轴移动100px;transform: translateX(100...

meta name= viewport 知识补充
网页不能直接识别移动设备的实际像素大小再没有设置meta viewport的时候,网页只能识别硬件的物理像素,而非软件像素。物理像素:硬件本身的实际像素大小软件像素:设备尺寸限制,过大的像素并不能带来很好的体验,显示的内容过多反倒无法正常使用,于是有了软件像素,软件像素是基于一定像素比得到的值。比如 iPhone X的软件像素是:375px*812px;它的比是:3;那么它的物理像素就等于:(375*3)*(812*3)更多的对比可以去这个网站查看:mydevice然而实际上移动端设备都会有一个默认的宽度:980px,所以,即便我们没有设置meta viewport,网页也不可能真的使用...

flex布局知识补充
子元素自身的order属性子元素的order的作用详解:默认情况下order的值都为0,如果这个值越小,那么就越靠近起始点,值越大,位置就越后,order其实用于移动元素的位置,而位置的方向则取决于父元素设置的:flex-direction子元素自身的align-self属性从正常角度,align-self是控制子元素y轴的对齐方式,也称侧轴对齐,这个y轴的定义也是取决于父元素flex-direction子元素自身的flex-basis属性flex-basis的效果,最好配合:flex-shrink:0;让子元素不被压缩。flex-basis会根据主轴的来设置元素的宽度还是高度:当主轴是...
纯css来做表单校验样式
css3新增了三个伪类::required、:valid、:invalid:required 表示input不能为空时使用的:valid 表示通过,表单元素和form表单都有的伪类:invalid 表示不通过,表单元素和form表单都有的伪类其实如果要做一个表单css校验样式,:valid和:invalid就行了,但是实际操作上,:invalid还是有一些问题的。当表单元素有required属性的时候,该表单元素默认就是:invalid,也就说,必填的表单元素,一开始就是不通过。所以,如果此时设置:invalid伪类样式,是不合适的。解决办法就是:使用:placeholder-shown...

移动端适配iPhoneX和安卓底部小黑条
这个问题还是同事发现的,毕竟我这种穷人根本用不起苹果,更何况也用不来,毕竟,我爱安卓。废话不多说,主要问题就是 iPhoneX底部小黑条问题,他的宽度也会被网页占据,导致小黑条显示在网页上头,第一是触发上会出现问题,第二是难看。解决办法就是通过css处理。解决方案首先对meta标签添加一条属性。<meta name="viewport" content="width=device-width, viewport-fit=cover">如果你已经有了viewport声明,那么就在后面content里加上viewport-fit=cover...

css使用系统字体作为网页字体最佳实践
目前前端对字体的选择,最好的做法就是用系统的默认字体,这样省去了对每个操作系统的字体判断,谁知道我们指定的这个字体用户安装没有,而且字体文件一向都很大,特别是中文字体。但是对于指定系统字体,其实也是需要兼容的,这里就放上一个专业的字体文章:《奇思妙想 CSS 文字动画》;虽然这个文章名字叫动画,但是里面内容很丰富,自己学习。以css-tricks的为模板,提取其中精华,大概是这么一条信息:{ font-family: system-ui, -apple-system, BlinkMacSystemFont, segoe ui, Roboto, Helvetica, Arial, ...

获取元素距离顶部的距离
这个方法太常用了,写个笔记 //获取顶部距离 function getTop(element) { let realTop = element.offsetTop; let parent = element.offsetParent; while (parent !== null) { realTop += parent.offsetTop; parent = parent.offsetParent; } return realTop; },接收原生dom对象
wolfox
FireFox Windows 10回复可见?
陌熊
Google Chrome Windows 10回复可见
meml
Google Chrome Windows 10回复可见
kupe
FireFox Windows 7很好的效果
木灵鱼儿
FireFox Windows 10已经写了新的方法,使用jq的,应用更广,有需要可以看看 https://www.mulingyuer.com/archives/405/,或者本博客搜索 富强
木灵鱼儿
FireFox Windows 7以前写的,能看,但是用的东西太多了,用了自写的js库,现在看来也不是很方便
HEarTache
Google Chrome Windows 10学习学习。
木灵鱼儿
FireFox Windows 10不用学,这个我以前写的,很老的了,不合适,过几天我重新调整一下,改为jq的方法
xxl
Google Chrome Windows 10强
xxl
Google Chrome Windows 10强
孤星
Google Chrome Windows 10蹭内容
1的N次幂
Google Chrome Windows 10你们的网站怎么一个XHR请求都没有?都是模板页面吗?
木灵鱼儿
FireFox Windows 10对啊,每个类目都是模板
猫乐
Google Chrome Windows 76666来看看