王新阳

电子相册

电子书、电子杂志参考
官网 https://www.fliphtml5.com/

云展网企业宣传册制作：https://www.yunzhan365.com/
https://book.yunzhan365.com/pteyi/dckd/mobile/index.html
https://book.yunzhan365.com/rvdk/vggc/mobile/index.html

photoswipe兼容手机版，支持拖动、缩放

https://photoswipe.com/

https://github.com/dimsemenov/photoswipe

fancybox 不支持拖动、缩放

2019-06-15

回应

使用jquery.qrcode.js生成二维码-支持中英文混合输入

官网：https://larsjung.de/jquery-qrcode/
github：https://github.com/lrsjng/jquery-qrcode
演示：https://larsjung.de/jquery-qrcode/latest/demo/

<div id="qrcodeTable"></div>
<img id="logoimg" src="logo.png">
<script>
$('#qrcodeTable').qrcode({
    // render method: 'canvas', 'image' or 'div'
    render: 'image',

    // version range somewhere in 1 .. 40
    minVersion: 1,
    maxVersion: 40,

    // error correction level: 'L', 'M', 'Q' or 'H'
    ecLevel: 'L',

    // offset in pixel if drawn onto existing canvas
    left: 0,
    top: 0,

    // size in pixel
    size: 200, //二维码尺寸

    // code color or image element
    fill: '#000', //二维码颜色

    // background color or image element, null for transparent background
    background: '#fff', //背景色

    // content
    text: '汉a字',

    // corner radius relative to module width: 0.0 .. 0.5
    radius: 0,

    // quiet zone in modules
    quiet: 2, //可理解为css的padding，大小为quiet*6像素

    // modes
    // 0: normal 无文字、无logo
    // 1: label strip
    // 2: label box 显示文字
    // 3: image strip
    // 4: image box 显示logo
    mode: 4,

    mSize: 0.1, //logo尺寸
    mPosX: 0.5, //logo位置
    mPosY: 0.5,

    label: 'hello', //使用文字代替logo
    fontname: 'sans',
    fontcolor: '#000',

    image: null, //$('#logoimg')[0]
});
</script>

<script>
$('#qrcodeTable').qrcode({
    render: 'image', //canvas|image|div
    size: 200, //二维码尺寸
    text: '汉a字',
    quiet: 2, //可理解为css的padding，大小为quiet*6像素
});
</script>

2019-06-07

回应(1)

encodeURI、encodeURIComponent、escape

encodeURI(string) 把字符串作为 URI 进行编码，编码后为utf-8格式

decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码

在使用url进行参数传递时，经常会传递一些中文名的参数或URL地址，在后台处理时会发生转换错误。在有些传递页面使用GB2312，而在接收页面使用UTF8，这样接收到的参数就可能会与原来发生不一致。使用服务器端的urlEncode函数编码的URL，与使用客户端javascript的encodeURI函数编码的URL，结果就不一样。

javaScript中的编码方法：

escape() 方法：

采用ISO Latin字符集对指定的字符串进行编码。所有的空格符、标点符号、特殊字符以及其他非ASCII字符都将被转化成%xx格式的字符编码（xx等于该字符在字符集表里面的编码的16进制数字）。比如，空格符对应的编码是%20。unescape方法与此相反。不会被此方法编码的字符： @ * / +

encodeURI() 方法：

把URI字符串采用UTF-8编码格式转化成escape格式的字符串。不会被此方法编码的字符：! @ # $& * ( ) = : / ; ? + '

encodeURIComponent() 方法：

把URI字符串采用UTF-8编码格式转化成escape格式的字符串。与encodeURI()相比，这个方法将对更多的字符进行编码，比如 / 等字符。所以如果字符串里面包含了URI的几个部分的话，不能用这个方法来进行编码，否则 / 字符被编码之后URL将显示错误。不会被此方法编码的字符：! * ( )

因此，对于中文字符串来说，如果不希望把字符串编码格式转化成UTF-8格式的（比如原页面和目标页面的charset是一致的时候），只需要使用escape。如果你的页面是GB2312或者其他的编码，而接受参数的页面是UTF-8编码的，就要采用encodeURI或者encodeURIComponent。

另外，encodeURI/encodeURIComponent是在javascript1.5之后引进的，escape则在javascript1.0版本就有。

decodeURIComponent -- 解码encodeURIComponent函数编码的字符串

2019-06-06

回应

iscroll仿系统滚动插件

http://caibaojian.com/iscroll-5/

https://segmentfault.com/a/1190000003113280

https://blog.csdn.net/amyloverice/article/details/79383712

http://www.jq22.com/jquery-info13446

CDN https://www.bootcdn.cn/iScroll/

2019-03-01

回应

最简单的js日历

<meta charset="utf-8">
<div id="calendar"></div>
<script>
/**
 * edgesun@126.com
 * 20190207
 */
function myCalendar(YEAR,MONTH){
	function isLng(num){return /^(0|([1-9]\d*))$/.test(''+num);}
	var myDate=new Date(), today={year:myDate.getFullYear(), month:myDate.getMonth(), date:myDate.getDate(), ymd:''}; //当前日期
	today.ymd = today.year+ (today.month<9?'0':'')+(today.month+1)+(today.date<10?'0':'')+today.date;
	if(isLng(YEAR) && isLng(MONTH)){
		if(YEAR<2010 || YEAR>2037){alert('不能再翻啦~');return;}
		if(MONTH>11){alert('参数month应该为0到11的整数');return;}
		myDate.setFullYear(YEAR, MONTH, 1);
	}else{
		YEAR = today.year;
		MONTH = today.month;
	}
	
	var PrevNext=[[0,0],[0,0]]; //依次为上一月的年、月，下一月的年、月
	if(MONTH==0){
		PrevNext = [[YEAR-1,11],[YEAR,1]];
	}else if(MONTH==11){
		PrevNext = [[YEAR,10],[YEAR+1,0]];
	}else{
		PrevNext = [[YEAR,MONTH-1],[YEAR,MONTH+1]];
	}
	
	myDate.setDate(1); //当前显示月的第一天
	var weekday=myDate.getDay()?myDate.getDay():7; //当前显示月的第一天是星期几(星期天重置为7，即每周最后一天)
	myDate.setMonth(MONTH+1);
	myDate.setDate(0);
	var totalDays = myDate.getDate(); //当前显示月的总天数
	var html='<table width="100%" border="1" cellpadding="5" cellspacing="0"><thead><tr><th onclick="myCalendar('+PrevNext[0][0]+','+PrevNext[0][1]+')">上个月</th><th colspan="5">'+YEAR+'年'+(MONTH+1)+'月</th><th onClick="myCalendar('+PrevNext[1][0]+','+PrevNext[1][1]+')">下个月</th></tr><tr><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr></th><tbody>';
	var n=0, ymd='';
	for(var i=1; i<=42; ++i){
		if(i%7==1) html+='<tr>';
		if(i>=weekday && i<totalDays+weekday){
			++n;
			ymd=''+YEAR+(MONTH<9?'0':'')+(MONTH+1)+(n<10?'0':'')+n;
			html+='<td'+(ymd==today.ymd?' style="background-color:#ddf;"':'')+' data-date="'+ymd+'">'+n+'</td>';
		}else{
			html+='<td></td>';
		}
		if(i%7==0){
			html+='</tr>';
			if(i>=(totalDays+weekday-1))break;
		}
	}
	html+='</tbody></table>';
	document.getElementById('calendar').innerHTML=html;
}

myCalendar();
</script>

2019-02-07

回应

一个不错的js颜色选择器

https://github.com/claviska/jquery-minicolors

演示： http://www.jq22.com/jquery-info204

更多js拾色器：http://www.jq22.com/jquery-plugins%E6%8B%BE%E8%89%B2%E5%99%A8-1-jq

如果同步设置input背景色，可能会出现input内text颜色与背景色难以区分的情况，可以使用如下方法自动设置文字颜色：（hex为获取到的颜色，如：#ffcc00）

var r = parseInt(hex.substr(1, 2), 16);
var g = parseInt(hex.substr(3, 2), 16);
var b = parseInt(hex.substr(5, 2), 16);
var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
$(this).css({'background-color':hex, 'color': (yiq >= 128) ? 'black' : 'white'});

配置：

$('.js-color-input').each( function() {
	$(this).minicolors({
		control: $(this).attr('data-control') || 'hue',
		defaultValue: $(this).attr('data-defaultValue') || '#ff0000',
		format: $(this).attr('data-format') || 'hex',
		keywords: $(this).attr('data-keywords') || '',
		inline: $(this).attr('data-inline') === 'true',
		letterCase: $(this).attr('data-letterCase') || 'lowercase',
		opacity: $(this).attr('data-opacity'),
		position: $(this).attr('data-position') || 'bottom',
		swatches: $(this).attr('data-swatches') ? $(this).attr('data-swatches').split('|') : [],
		change: function(hex, opacity){
			if(! hex)return;
			var r = parseInt(hex.substr(1, 2), 16);
			var g = parseInt(hex.substr(3, 2), 16);
			var b = parseInt(hex.substr(5, 2), 16);
			var yiq = ((r * 299) + (g * 587) + (b * 114)) / 1000;
			$(this).css({'background-color':hex, 'color': (yiq >= 128) ? 'black' : 'white'});
		},
		theme: 'default',
	});
});

2018-09-19

回应

wow.js与fullpage.js结合使用时失效的解决办法

第一屏可以正常显示，从第二屏开始，使用wow效果的元素就不显示了 visibility:hidden;

原因：fullpage.js 配置中使用了 scrollBar:false，隐藏了滚动条，wow无法判断滚动条位置。

解决办法：fullpage.js配置中显示滚动条 scrollBar:true，然后使用css中隐藏滚动条 body{overflow:hidden !important;}。不能直接在<body>标签上设置style，会被fullpage.js重置overflow值。

如果还不行就在fullpage运行后执行wow，设置方法： $('#fullpage').fullpage({afterRender: function(){new WOW().init();}});。我程序中这两个的执行顺序并没有影响，看别人这么说的，记录下。

2018-08-22

回应

wow.js

http://mynameismatthieu.com/WOW/

https://github.com/matthieua/WOW

http://570109268.iteye.com/blog/2411836

https://www.cnblogs.com/yangjunfei/p/6746926.html

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></div>

类名前面的wow是每一个带动画的元素都要加的，slideInLeft就是说明动画样式。后面的data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可选可不选。

fullpage滚动到第二屏后wow失效的解决方法：
1、fullpage配置中 scrollBar : true
2、css body{overflow:hidden !important;}

2018-08-21

回应

jquery.fullpage.js

使用方法：

详细 https://www.cnblogs.com/EnSnail/p/5880385.html

http://www.dowebok.com/77.html

https://www.cnblogs.com/windy-xmwh/p/8279635.html

演示 http://www.shouce.ren/post/view/id/113203

https://www.jb51.net/article/98824.htm

说明，演示 http://www.jq22.com/jquery-info1124

2018-08-21

回应

js阻止事件冒泡的两种方法

<div>
	<input type="button" value="submit">
</div>

方法一：event.stopPropagation( );

$("input").click(function(event){
alert('click');
event.stopPropagation(); //阻止冒泡
});

方法二：event.target

现在，事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，但是没有被所有浏览器实现。jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器中都能够使用这个属性。通过.target，可以确定DOM中首先接收到事件的元素（即实际被单击的元素）

$("input").click(function(event){
if(event.target != this)return; //阻止冒泡
alert("click");
});

2018-05-27

回应

1 2 3 4 5 6 7 8