15
2019
03

免费生成二维码的api

发布:abcd2321 | 分类:前端开发 | 评论:0 | 浏览:

方法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

发布:abcd2321 | 分类:前端开发 | 评论:0 | 浏览:

和 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实现网页的全屏切换

发布:abcd2321 | 分类:前端开发 | 评论:0 | 浏览:

使用HTML5提供的JavaScript Api可以实现主流浏览器的全屏和退出全屏操作，封装成进入全屏和退出全屏的函数

16
2019
01

jQuery.raty.js星星评分插件使用

发布:abcd2321 | 分类:前端开发 | 评论:0 | 浏览:

在做前端开发的过程中,我们经常用到星星评分插件。这里推荐一jquery,raty.js是一个专门用来做评分的。
星星显示的效果如下：
1005682-20160918165400266-2035912956.png

08
2019
01

谷歌在线字库应用

发布:abcd2321 | 分类:前端开发 | 评论:0 | 浏览:

Google Fonts 提供了超过 600 种的高质量的字体，所有的浏览器都兼容，无需引入 JavaScript，简单易用，更重要的是，免费。

 

13
2018
12

用jQuery实现定位滚动导航效果

发布:abcd2321 | 分类:前端开发 | 评论:0 | 浏览: 
<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实现强制不换行/自动换行/强制换行

发布:abcd2321 | 分类:前端开发 | 评论:0 | 浏览:

强制不换行

div{
white-space:nowrap;
}

自动换行

div{ 
word-wrap: break-word; 
word-break: normal; 
}

强制英文单词断行

div{
word-break:break-all;
}


30
2018
11

kindeditor编辑器插入mp4视频不显示及不过滤video的方法

发布:abcd2321 | 分类:前端开发 | 评论:0 | 浏览:

传视频是单独做了htm5的video调用，所以在电脑及移动设备上访问没问题，但是很多地方比如题目，题目解析等都在kindeditor编辑器里面添加的，因为肯定要添加图文，但是添加视频的话，因为kindeditor对html5还不怎么支持，而且还过滤kindeditor的代码，所以没办法，只能修改下kindeditor了。

27
2018
10

移动端自适应Rem自适应js

发布:abcd2321 | 分类:前端开发 | 评论:0 | 浏览:

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

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


27
2018
10

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

发布:abcd2321 | 分类:前端开发 | 评论:0 | 浏览:

采用正则表达式获取地址栏参数：（ 强烈推荐，既实用又方便！） 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"));

«12345»