说起text-align,大家一定都不觉得陌生,我们常用关键字left、right、center实现行内元素相对父元素左、右、居中对齐,当然我们也使用justify来实现文本两端对齐。
06
2019
05
09
2019
04
滚动条触动css动画效果——WOW.js
在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。
15
2019
03
免费生成二维码的api
方法1:将网址生成二维码的API调用接口
<img src="https://bshare.optimix.asia/barCode?site=weixin&url=http://www.crjie.com"/>
<img src="http://api.k780.com:88/?app=qr.get&data=http://www.crjie.com"/>
例如:
18
2019
02
滚动条触动css动画效果——scrollreveal.js
和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次;WOW.js 依赖 animate.css,而 scrollReveal.js 不依赖其他任何文件。
虽然 scrollReveal.js 不依赖 animate.css,但它的动画也是用 CSS3 创建的,所以它不支持 IE10 以下的浏览器。
10
2019
02
HTML5实现网页的全屏切换
使用HTML5提供的JavaScript Api可以实现主流浏览器的全屏和退出全屏操作,封装成进入全屏和退出全屏的函数
16
2019
01
jQuery.raty.js星星评分插件使用
在做前端开发的过程中,我们经常用到星星评分插件。这里推荐一jquery,raty.js是一个专门用来做评分的。
星星显示的效果如下:
08
2019
01
谷歌在线字库应用
Google Fonts 提供了超过 600 种的高质量的字体,所有的浏览器都兼容,无需引入 JavaScript,简单易用,更重要的是,免费。
13
2018
12
用jQuery实现定位滚动导航效果
<script> $(".header .nav ul li a").click(function () { $("html, body").animate({scrollTop: $($(this).attr("href")).offset().top -90+ "px"}, 500); return false; }); //页面滚动时定位 $(window).scroll(function() { var targetTop = $(this).scrollTop(); if (targetTop <= 660) { $(".header .nav ul li.cur").removeClass("cur"); } if (targetTop > 718 && targetTop < 1370) { $(".header .nav ul li.cur").removeClass("cur"); $(".header .nav ul li.menu1").addClass('cur'); } else if (targetTop >= 1370 && targetTop < 1900) { $(".header .nav ul li.cur").removeClass("cur"); $(".header .nav ul li.menu2").addClass('cur'); } else if (targetTop >= 1900 && targetTop < 2330) { $(".header .nav ul li.cur").removeClass("cur"); $(".header .nav ul li.menu3").addClass('cur'); } else if (targetTop >= 2330) { $(".header .nav ul li.cur").removeClass("cur"); $(".header .nav ul li.menu4").addClass('cur'); } }); </script>
30
2018
11
css实现强制不换行/自动换行/强制换行
强制不换行
div{ white-space:nowrap; }
自动换行
div{ word-wrap: break-word; word-break: normal; }
强制英文单词断行
div{ word-break:break-all; }
30
2018
11
kindeditor编辑器插入mp4视频不显示及不过滤video的方法
传视频是单独做了htm5的video调用,所以在电脑及移动设备上访问没问题,但是很多地方比如题目,题目解析等都在kindeditor编辑器里面添加的,因为肯定要添加图文,但是添加视频的话,因为kindeditor对html5还不怎么支持,而且还过滤kindeditor的代码,所以没办法,只能修改下kindeditor了。