Swiper4.x使用方法
Swiper4.x API文档 http://www.swiper.com.cn/api/index.html
官方演示：https://www.swiper.com.cn/demo/index.html
1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="path/to/swiper.min.css">
</head>
<body>
...
<script src="path/to/swiper.min.js"></script>
</body>
</html>2.HTML内容。
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外3.你可能想要给Swiper定义一个大小，当然不要也行。
.swiper-container {
width: 600px;
height: 300px;
} 4.初始化Swiper：最好是挨着</body>标签
<script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',
loop: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
</script>
</body>如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。
<script type="text/javascript">
window.onload = function() {
...
}
</script>或者这样（Jquery和Zepto）
<script type="text/javascript">
$(document).ready(function () {
...
})
</script>5.完成。恭喜你，现在你的Swiper应该已经能正常切换了。
var Swiper = new Swiper('.swiper-container', {
autoplay: {
delay: 3e3, //自动切换的时间间隔
stopOnLastSlide: false, //切换到最后一个时停止自动切换（loop模式下无效）
disableOnInteraction: false, //用户操作swiper之后停止自动播放
},
effect : 'slide', //切换效果slide/fade/cube/flip
slidesPerView: 1, //每页slide个数
spaceBetween: 0, //两个slide的间距
loop: false, //循环
//direction : 'horizontal', //滚动方向horizontal/vertical
//speed:300, //动画持续时间
pagination: { //分页器
el: '.swiper-pagination',
type: 'bullets', //式样bullets/fraction/progressbar
clickable: true,
},
navigation: { //前进后退按钮
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
Swiper全屏自适应焦点图轮播
https://www.lanrenzhijia.com/banner/6089.html
动态改变每屏slide的数量
1、初始化时设置每屏slide数量为auto。slidesPerView : 'auto'
2、css响应式设置每个slide的宽度 @media(max-width:1399px){ .swiper-slide{width:25%;} }
身份证号码校验
function idCardValid(a) {
var c, d, e, f, g, h, b = a;
if ("" === b) return !1;
if (/^\d{17}[\dXx]$/.test(b) === !1) return !1;
if (c = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2 ], d = [ "1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2" ],
e = 0, f = 0, 15 == b.length) {
for (b = b.substr(0, 6) + "19" + b.substr(6), f = 0; 17 > f; f++) e += b.substr(f, 1) * c[f];
b += d[e % 11];
}
if (g = {
11:"北京", 12:"天津", 13:"河北", 14:"山西", 15:"内蒙古",
21:"辽宁", 22:"吉林", 23:"黑龙江",
31:"上海", 32:"江苏", 33:"浙江", 34:"安徽", 35:"福建", 36:"江西", 37:"山东",
41:"河南", 42:"湖北", 43:"湖南", 44:"广东", 45:"广西", 46:"海南",
50:"重庆", 51:"四川", 52:"贵州", 53:"云南", 54:"西藏",
61:"陕西", 62:"甘肃", 63:"青海", 64:"宁夏", 65:"新疆",
71:"台湾", 81:"香港", 82:"澳门", 91:"国外"
}, void 0 == g[b.substr(0, 2)]) return !1;
if (h = [ b.substr(6, 4), b.substr(10, 2), b.substr(12, 2) ], h.push(new Date(h.join("-"))),
h.push(new Date().getFullYear()), h[3].getFullYear() != h[0] || h[3].getMonth() + 1 != h[1] || h[3].getDate() != h[2]) return !1;
if (h[4] - h[0] < 0 || h[4] - h[0] > 120) return !1;
if (15 == a.length) return !0;
for (f = 0; 17 > f; f++) e += b.substr(f, 1) * c[f];
return d[e % 11] == b.substr(17, 1);
}
使用js获取用户openid
通过自定义菜单打开url，在网页中用js获取用户openid：
一、回复一条图文消息，将用户openid带在链接上
二、认证服务号可以使用高级接口。参考：
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
http://blog.csdn.net/baronyang/article/details/44489841
http://blog.csdn.net/qq_30632003/article/details/52882592
jQueryUI拖拽排序部件 sortable
DEMO http://jqueryui.com/sortable/
API http://api.jqueryui.com/sortable/
KindEditor编辑器的bug
解决办法：/lang/zh-CN.js 或 kindeditor-all-min.js中把Microsoft Yahei直接替换为中文微软雅黑
2、响应式网站，后台发布新闻等内容时，通常不需要给图片设置宽度和高度，但编辑器图片插件中删除图片宽高中的一项，另一项会变为NaN，
修改kindeditor-all-min.js中的图片插件（或plugins/image/image.js中相应部分）：
D.change(function(){J>0&&E.val(Math.round(K/J*parseInt(this.value,10)))}),E.change(function(){K>0&&D.val(Math.round(J/K*parseInt(this.value,10)))})
改为：
D.change(function(){this.value&&J>0&&E.val(Math.round(K/J*parseInt(this.value,10)))}),E.change(function(){this.value&&K>0&&D.val(Math.round(J/K*parseInt(this.value,10)))})
浏览器全屏
function fullscreen(){
elem=document.body;
if(elem.webkitRequestFullScreen){
elem.webkitRequestFullScreen();
}else if(elem.mozRequestFullScreen){
elem.mozRequestFullScreen();
}else if(elem.requestFullScreen){
elem.requestFullscreen();
}else{
//浏览器不支持全屏API或已被禁用
}
}
function exitFullscreen(){
var elem=document;
$("#fullscreen").show();
if(elem.webkitCancelFullScreen){
elem.webkitCancelFullScreen();
}else if(elem.mozCancelFullScreen){
elem.mozCancelFullScreen();
}else if(elem.cancelFullScreen){
elem.cancelFullScreen();
}else if(elem.exitFullscreen){
elem.exitFullscreen();
}else{
//浏览器不支持全屏API或已被禁用
}
}
js基础知识
WINDOW对象的 postMessage() 方法用于安全地实现跨域通信。
otherWindow.postMessage(message, targetOrigin, [transfer]);
参考：
https://www.w3cschool.cn/fetch_api/fetch_api-lx142x8t.html
https://www.runoob.com/js/met-win-postmessage.html
https://www.jianshu.com/p/ae840f7d7f8b
artDialog 网页对话框插件
通过预加载在图片加载前读取图片尺寸
/***************************************************************************************
* 图片头数据加载就绪获取图片尺寸
* @version 2011.05.27
* @author TangBin
* @see http://www.planeart.cn/?p=1121
* @param {String} 图片路径
* @param {Function} 尺寸就绪
* @param {Function} 加载完毕 (可选)
* @param {Function} 加载错误 (可选)
yundanran_imageSize('http://b.zol-img.com.cn/desk/bizhi/image/5/2560x1600/1409624254331.jpg', function ()
{
alert('size ready: width=' + this.width + '; height=' + this.height);
});
*******************************************************************************************/
var yundanran_imageSize = (function ()
{
var list = [], intervalId = null,
// 用来执行队列
tick = function () {
var i = 0;
for (; i < list.length; i++) {
list[i].end ? list.splice(i--, 1) : list[i]();
};
!list.length && stop();
},
// 停止所有定时器队列
stop = function () {
clearInterval(intervalId);
intervalId = null;
};
return function (url, ready, load, error) {
var onready, width, height, newWidth, newHeight,
img = new Image();
img.src = url;
// 如果图片被缓存，则直接返回缓存数据
if (img.complete) {
ready.call(img);
load && load.call(img);
return;
};
width = img.width;
height = img.height;
// 加载错误后的事件
img.onerror = function () {
error && error.call(img);
onready.end = true;
img = img.onload = img.onerror = null;
};
// 图片尺寸就绪
onready = function () {
newWidth = img.width;
newHeight = img.height;
if (newWidth !== width || newHeight !== height ||
// 如果图片已经在其他地方加载可使用面积检测
newWidth * newHeight > 1024
) {
ready.call(img);
onready.end = true;
};
};
onready();
// 完全加载完毕的事件
img.onload = function () {
// onload在定时器时间差范围内可能比onready快
// 这里进行检查并保证onready优先执行
!onready.end && onready();
load && load.call(img);
// IE gif动画会循环执行onload，置空onload即可
img = img.onload = img.onerror = null;
};
// 加入队列中定期执行
if (!onready.end) {
list.push(onready);
// 无论何时只允许出现一个定时器，减少浏览器性能损耗
if (intervalId === null) intervalId = setInterval(tick, 40);
};
};
})();
http://qianduanblog.com/post/js-learning-10-image-reload-size.html
AlloyImage 图像处理引擎
http://alloyteam.github.io/AlloyPhoto/
1.图层功能，提供图层的添加，删除，交换图层顺序等功能，且包含与PS相对应的17种图层混合模式
2.图像的基本调节功能，包括亮度、对比度，色相、饱和度、明度调节
3.多种滤镜功能，去色、反相、高斯模糊、锐化、浮雕效果、查找边缘、马赛克、腐蚀等
4.处理后文件的保存，处理完成之后，可以将文件输出为base64形式间接使用和保存
5.高级组合效果，如素描，lomo，复古，素描等复合效果 如一个素描效果的实现
