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

27
2018
10

移动端自适应Rem自适应js

当我们指定一个元素的font-size为2rem的时候,也就说这个元素的字体大小为根元素<html>字体大小的两倍,如果html的font-size为12px,那么这个2rem的元素font-size就是24px。同理当该元素为3rem时,那么其实际font-size就是36px。

看到这里你应该就会发现,只要我们根据不同屏幕设定好根元素<html>的font-size,其他已经使用了rem单位的元素就会自适应显示相应的尺寸了。


27
2018
10

用JS获取地址栏参数的方法

采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) {     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");     var r = window.location.search.substr(1).match(reg);     if(r!=null)return  unescape(r[2]); return null; } // 调用方法 alert(GetQueryString("参数名1")); alert(GetQueryString("参数名2")); alert(GetQueryString("参数名3"));