方法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"/>
例如:
方法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"/>
例如:
和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次;WOW.js 依赖 animate.css,而 scrollReveal.js 不依赖其他任何文件。
虽然 scrollReveal.js 不依赖 animate.css,但它的动画也是用 CSS3 创建的,所以它不支持 IE10 以下的浏览器。
使用HTML5提供的JavaScript Api可以实现主流浏览器的全屏和退出全屏操作,封装成进入全屏和退出全屏的函数
在做前端开发的过程中,我们经常用到星星评分插件。这里推荐一jquery,raty.js是一个专门用来做评分的。
星星显示的效果如下:
Google Fonts 提供了超过 600 种的高质量的字体,所有的浏览器都兼容,无需引入 JavaScript,简单易用,更重要的是,免费。
<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>
强制不换行
div{ white-space:nowrap; }
自动换行
div{ word-wrap: break-word; word-break: normal; }
强制英文单词断行
div{ word-break:break-all; }
传视频是单独做了htm5的video调用,所以在电脑及移动设备上访问没问题,但是很多地方比如题目,题目解析等都在kindeditor编辑器里面添加的,因为肯定要添加图文,但是添加视频的话,因为kindeditor对html5还不怎么支持,而且还过滤kindeditor的代码,所以没办法,只能修改下kindeditor了。
当我们指定一个元素的font-size为2rem的时候,也就说这个元素的字体大小为根元素<html>字体大小的两倍,如果html的font-size为12px,那么这个2rem的元素font-size就是24px。同理当该元素为3rem时,那么其实际font-size就是36px。
看到这里你应该就会发现,只要我们根据不同屏幕设定好根元素<html>的font-size,其他已经使用了rem单位的元素就会自适应显示相应的尺寸了。
采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) 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"));