06
2019
05

CSS之文本两端对齐

说起text-align,大家一定都不觉得陌生,我们常用关键字left、right、center实现行内元素相对父元素左、右、居中对齐,当然我们也使用justify来实现文本两端对齐。

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是一个专门用来做评分的。
星星显示的效果如下:
1005682-20160918165400266-2035912956.png

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了。