jQuery图片裁剪插件jQuery-photoClip

一款支持手势的裁图插件插件

由于目前网上很难找到一款支持手势的裁图插件,因此自己动手写了一个。为了快速开发,依赖了很多其他的开源插件。不过目前仅解决需求即可。

依赖插件

  • [jquery.transit.js] 插件 (v1.4 中已经移除了对该插件的依赖)
  • [iscroll-zoom.js] 插件(由于原插件的zoom扩展存在几个bug,所以建议使用demo中提供的iscroll-zoom.js文件,本人已经将这些bug修复)
  • [hammer.js] 插件
  • [lrz.all.bundle.js] 插件

操作说明

在移动设备上双指捏合为缩放,双指旋转可根据旋转方向每次旋转90度

在PC设备上鼠标滚轮为缩放,每次双击则顺时针旋转90度

使用方法及参数配置简介

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="clipArea"></div>
<input type="file" id="file">
<button id="clipBtn">截取</button>
<div id="view"></div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/iscroll-zoom.min.js"></script>
<script src="js/lrz.all.bundle.js"></script>
<script src="js/jquery.photoClip.min.js"></script>
<script>
var clipArea = new bjj.PhotoClip("#clipArea", {
    size: [260, 260], // 截取框的宽和高组成的数组。默认值为[260,260]
    outputSize: [640, 640], // 输出图像的宽和高组成的数组。默认值为[0,0],表示输出图像原始大小
    //outputType: "jpg", // 指定输出图片的类型,可选 "jpg" 和 "png" 两种种类型,默认为 "jpg"
    file: "#file", // 上传图片的<input type="file">控件的选择器或者DOM对象
    view: "#view", // 显示截取后图像的容器的选择器或者DOM对象
    ok: "#clipBtn", // 确认截图按钮的选择器或者DOM对象
    loadStart: function(file) {}, // 开始加载的回调函数。this指向 fileReader 对象,并将正在加载的 file 对象作为参数传入
    loadComplete: function(src) {}, // 加载完成的回调函数。this指向图片对象,并将图片地址作为参数传入
    loadError: function(event) {}, // 加载失败的回调函数。this指向 fileReader 对象,并将错误事件的 event 对象作为参数传入
    clipFinish: function(dataURL) {}, // 裁剪完成的回调函数。this指向图片对象,会将裁剪出的图像数据DataURL作为参数传入
});
</script>

Destroy

1
clipArea.destroy();

实用的loading插件 一个兼容移动端pc以及ie10以上的loading插件

loading

一个兼容移动端pc以及ie10以上的loading插件

演示地址: http://www.daiwei.org/components/loading/

direction

方向,column纵向 row 横向

animateIn

进入类型,这里不需要引用animatecss(因为个人觉得loading效果不需要太花哨,默认fadeInNoTransform,其他设置都不会有动画效果)

title

loading的title名称 为” 则不显示

titleColor

title的文字颜色

name

loading的name名称 这算是唯一标识,重复的name的loading不会再生成,因此每次需要给一个name属性

type

loading显示的样式   是转动的小圆球 origin 还是图片 pic

discription

loading的描述  为” 则不显示

discColor

loading的描述颜色

loadingWidth

默认260 loading的宽度

loadingBg

默认 ‘rgba(0, 0, 0, 0.6)’ loading的背景色

borderRadius

默认12 loading的圆角

loadingMaskBg

默认 transparent loading的遮罩层背景色

zIndex

默认 1000001 loading的层级

圆形旋转的loading样式  (origin)

originDivWidth

默认 60 loading内部圆球区域的宽度

originDivHeight

默认 60 loading内部圆球区域的高度

originWidth

默认 8 小圆球的宽度

originHeight

默认 8 小圆球的高度

originBg

默认’#fefefe’ 小圆球的背景色

smallLoading

默认 false 是否显示更小一点的旋转小球效果

这是图片的样式   (pic)

imgSrc

默认的图片地址

imgDivWidth

默认 80 图片的宽度

imgDivHeight

默认 80 图片的高度

flexCenter

默认false, 是否用flex布局让loading-div垂直水平居中

flexDirection

默认’row’ row column flex的方向 横向 和 纵向

mustRelative

默认false 调用loading的元素是否规定relative

 

https://github.com/IFmiss/loading

使用pushState()改变url而不刷新

原文链接:http://caibaojian.com/pushstate.html

编者注:这个pushState()是一个HTML5的新接口,你可能在一些科技博客如36kr上看到过,ajax加载新的文章,并且改变网址却不需要刷新页面,本站也用到了这个,当你在首页往下拉时,加载分页内容,网址也随着改变,有利于后退和增加用户体验。

HTML5 的 pushState+Ajax

HTML5提供history接口,把URL以state的形式添加或者替换到浏览器中,其实现函数正是 pushState 和 replaceState。

pushState 例子

pushState() 的基本参数是:

window.history.pushState(state, title, url);

其中state和title都可以为空,但是推荐不为空,应当创建state来配合popstate监听。·

例如,我们通过pushState现改变URL而不刷新页面。

var state = ( {

url: ~href, title: ~title, ~additionalKEY: ~additionalVALUE

} );

window.history.pushState(state, ~title, ~href);

其中带有“~”符号的是自定义内容。就可以把这个~href(URL)推送到浏览器的历史里。如果想要改变网页的标题,应该:

document.title= ~newTitle;

注意只是pushState是不能改变网页标题的哦。

Demo 演示

(实现函数onclick = history.pushState( null, null, ‘/test-string’); )。实际上这个博客在文章之间也部署了这个技术。

replaceState 同理

window.history.replaceState( state, ~title, ~href);

pushState、replaceState 的区别

pushState()可以创建历史,可以配合popstate事件,而replaceState()则是替换掉当前的URL,不会产生历史。

限制因素

只能用同域的URL替换,例如你不能用http://baidu.com去替换http://google.com。而且state对象不存储不可序列化的对象如DOM。

Ajax 配合 pushState 例子

现在用Ajax + pushState来提供全新的ajax调用风格。以jQuery为例,为了seo需要,应该为a标签的onclick添加方法。

//code from http://caibaojian.com/pushstate.html
$("~target a").click(function(evt){

evt.preventDefault(); // 阻止默认的跳转操作

var uri=$(this).attr('href');

var newTitle=ajax_Load(uri); // 你自定义的Ajax加载函数,例如它会返回newTitle

document.title=newTitle; // 分配新的页面标题

if(history.pushState){

var state=({

url: uri, title: newTitle

});

window.history.pushState(state, newTitle, uri);

}else{ window.location.href="#!"+~fakeURI; } // 如果不支持,使用旧的解决方案

return false;

});

function ajax_Load(uri){ ... return newTitle; } // 你自定义的ajax函数,例如它会返回newTitle

即可完成pushState。至于新标题newTitle的获取就是另外的问题了,例如你可以为a标签分配data-newtitle=~title属性并届时读取,或者如果你用的$.ajax()函数,可以用$(result).filter(“title”).text()来获取。

另外如果需要对新加载的页面的连接同样使用这个ajax,则需要对新内容的a标签重新部署,例如

$("~newContentTarget a").click(function(evt){ ... });

pushState 配合 popstate 监听

想要良好的支持浏览器的历史前进后退操作,应当部署popstate监听:

window.addEventListener('popstate', function(evt){

var state = evt.state;

var newTitle = ajax_Load(state.url); //你自定义的ajax加载函数,例如它会返回newTitle

document.title=newTitle;

}, false);

来源:前端开发博客

微信 WEUI原生以及使用webuploader插件上传方法

摘要: weui构架下的原生及webuploader插件上传js代码

weui1.0.0

webuploder-0.1.5

不多说,直接看代码

		$(function() {
			// 允许上传的图片类型
			var allowTypes = [ 'image/jpg', 'image/jpeg', 'image/png', 'image/gif' ];
			// 1024KB,也就是 1MB
			var maxSize = 1024 * 1024;
			// 图片最大宽度
			var maxWidth = 300;
			// 最大上传图片数量
			var maxCount = 6;
			$('.js_file').on('change', function(event) {
				var files = event.target.files;
				// 如果没有选中文件,直接返回
				if (files.length === 0) {
					return;
				}
				for (var i = 0, len = files.length; i < len; i++) {
					var file = files[i];
					var reader = new FileReader();
					// 如果类型不在允许的类型范围内
					if (allowTypes.indexOf(file.type) === -1) {
						$.weui.alert({
							text : '该类型不允许上传'
						});
						continue;
					}
 					if (file.size > maxSize) {
 						$.weui.alert({
 							text : '图片太大,不允许上传'
 						});
 						continue;
 					}
 					if ($('.weui_uploader_file').length >= maxCount) {
 						$.weui.alert({
 							text : '最多只能上传' + maxCount + '张图片'
 						});
 						return;
 					}
					reader.onload = function(e) {
						var img = new Image();
						img.onload = function() {
							// 不要超出最大宽度
							var w = Math.min(maxWidth, img.width);
							// 高度按比例计算
							var h = img.height * (w / img.width);
							var canvas = document.createElement('canvas');
							var ctx = canvas.getContext('2d');
							// 设置 canvas 的宽度和高度
							canvas.width = w;
							canvas.height = h;
							ctx.drawImage(img, 0, 0, w, h);
							var base64 = canvas.toDataURL('image/png');

							// 插入到预览区
							var $preview = $('<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url('
									+ base64 + ')"><div class="weui-uploader__file-content">0%</div></li>');

							$('.weui-uploader__files').append($preview);

							// 然后假装在上传,可以post base64格式,也可以构造blob对象上传,也可以用微信JSSDK上传
							var progress = 0;
							function uploading() {
								$preview.find('.weui-uploader__file-content').text(++progress + '%');
								if (progress < 100) {
									setTimeout(uploading, 30);
								} else {
									// 如果是失败,塞一个失败图标
									//$preview.find('.weui-uploader__file-content').html('<i class="weui_icon_warn"></i>');
									$preview.removeClass('weui-uploader__file_status')
											.find('.weui-uploader__file-content')
											.remove();
								}
							}
							setTimeout(uploading, 30);
						};
						img.src = e.target.result;
					};
					reader.readAsDataURL(file);
				}
			});
		});



html

<div class="weui-cells weui-cells_form">
	<form method="post">
		<div class="weui-cells__title">照片</div>
		<div class="weui-cell">
			<div class="weui-cell__bd">
				<div class="weui-uploader__bd">
					<ul class="weui-uploader__files">
						<li class="weui-uploader__file" style="background-image:url(http://imgsize.ph.126.net/?imgurl=http://cms-bucket.nosdn.127.net/ba2d23de68ad4dcc8ed67622f911f14c20170113154227.png_140x88x1x85.jpg)">
						</li>
					</ul>
					<div class="weui-uploader__input-box">
						<input id="uploaderInput" class="weui-uploader__input js_file" type="file" accept="image/*" multiple>
					</div>
				</div>
			</div>
		</div>
		<div class="weui-btn-area"><a href="javascript:;" class="weui-btn weui-btn_primary">保存</a></div>
	</form>
</div>

上面是搜到的原生解决办法,这个基础上可以将base64上传到七牛,详见:

https://support.qiniu.com/question/69078

下面是webuploader插件上传代码,本例上传七牛

var uploader = WebUploader.create({
	auto: true,
	swf: '/statics/webuploader-0.1.5/Uploader.swf',
	server: 'http://upload.qiniu.com/',
	pick: '#imgInput',
	accept: {
		title: 'Images',
		extensions: 'gif,jpg,jpeg,bmp,png',
		mimeTypes: 'image/*'
	},
	method: 'POST',
	formData: {'token':'%token%'}
});
uploader.on('uploadStart',function(file) {
	this.options.formData.key='image/'+new Date().getTime()+'/'+file.name.replace(/,/g, '');
});
uploader.on('fileQueued', function(file) {
	var $preview = $('<li id="'+file.id+'" class="weui-uploader__file weui-uploader__file_status"><div class="weui-uploader__file-content">0%</div></li>');
	$('#imgList').append($preview);
	uploader.makeThumb(file, function( error, src) {
	$('#'+file.id).css('background-image','url('+src+')');
    }, 79, 79 );
});
uploader.on('uploadProgress', function(file, percentage ) {
	$('#'+file.id).find('.weui-uploader__file-content').html(percentage+'%');
});
uploader.on('uploadSuccess', function(file, response) {
	$('#'+file.id).removeClass('weui-uploader__file_status')
	.find('.weui-uploader__file-content')
	.remove();
// 上传成功,想干点什么就在这里干吧
});

html

<div class="weui-cell">
	<div class="weui-cell__bd">
		<div class="weui-uploader__bd">
			<ul class="weui-uploader__files" id="imgList">
				<li id="" class="weui-uploader__file" style="background-image:url()"></li>
			</ul>
			<div class="weui-uploader__input-box">
				<div id="imgInput" class="weui-uploader__input">选择图片</div>
			</div>
		</div>
	</div>
</div>

https://my.oschina.net/illone/blog/826574

html5 css3 实现瀑布流布局

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Mauris eu risus.
  • Vestibulum auctor dapibus neque.
  • Consectetuer adipiscing elit.
  • Eu risus.
  • Vestibulum auctor dapibus neque.
  • Lorem ipsum dolor sit amet
  • Aliquam tincidunt mauris eu risus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  • Vestibulum auctor dapibus neque.

.example {
-webkit-columns: 150px;
-moz-columns: 150px;
columns: 150px;
-webkit-column-gap: 2em;
-moz-column-gap: 2em;
column-gap: 2em;
}

body {
font-size: 12px;
font-family: ‘Georgia’, serif;
font-weight: 400;
line-height: 1.45;
color: #333;
background: #ecf0f1;
padding: 1em;
}

li {
background: white;
padding: 1em;
margin-bottom: 1.3em;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}

使用clipboard.js实现页面内容复制到剪贴板

clipboard.js是一个github上的开源项目,可以实现纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。

1、访问clipboard.js项目主页——https://github.com/zenorocha/clipboard.js

2、下载clipboard.min.js,并在页面中引用

  1. <!– clipboard Script –>
  2.         <script type=“text/javascript” src=“script/clipboard.min.js”></script>

 

3、在script中写实例化语句:

  1. <script type=“text/javascript”>
  2.         $(document).ready(function(){
  3.             var clipboard = new Clipboard(‘.btn’);
  4. }
  5. </script>

4、写页面按钮,实现点击按钮复制指定内容

  1. <button class=“btn” data-clipboard-text=“http://www.hbcloudwide.com/oss/video/7”>点击复制</button>

当然,clipboard.js还可以实现多种复制或剪切效果。具体用法参看github项目主页即可。

 

http://blog.csdn.net/softwave/article/details/50054477

html 表格布局 简单dome


<style type="text/css">
/*表格*/
.table_vs .td1{background:#ded1e9;width: 30%; height: 45px;}
.table_vs .td2{background: #efe9ff;}
.table_vs .td3{background:#fee2b5; width: 35%;}
</style>

<table align="center" border="0" cellpadding="0" cellspacing="1" style="text-align: center;" width="100%" class="table_vs">
<thead>
<tr>
<td class="td1" style="background-color: #ee2a39; color:#fff; text-align:center; font-weight:bold; font-size:17px; padding-top:2%; padding-bottom:2%;">真爱医院</td>
<td class="td2" style="background-color: #ffdadd; color:#fff; font-weight:bold; font-size:17px; padding-top:2%; padding-bottom:2%">VS</td>
<td class="td3" style="background-color: #4c4c4c; color:#fff; text-align:center; font-weight:bold; font-size:17px; padding-top:2%; padding-bottom:2%;">其他医院</td>
</tr>
</thead>
<tbody>
<tr >
<td class="td1">
<p>必要的检查,大约在200元左右</p></td>
<td class="td2">
术前</td>
<td class="td3">
<p>200-500元</p></td>
</tr>

<tr >
<td class="td1">
<p>根据孕囊大小、手术方式不同,价格大约在600-2000元不等</p></td>
<td class="td2">
术中</td>
<td class="td3">
<p>1000-3000元</p></td>
</tr>

<tr >
<td class="td1">
<p>术后消炎药约百元左右 </p></td>
<td class="td2">
术后</td>
<td class="td3">
<p>1000-3000元</p></td>
</tr>

<tr >
<td class="td1">
<p>1000-2000元左右</p></td>
<td class="td2">
总计</td>
<td class="td3">
<p>1000-3000元</p></td>
</tr>
</tbody>
</table>