jQuery Jcrop 图像裁剪插件 Animation / Transitions 动画/过度效果

实例代码“Ctrl+/”提示“F11/ESC”全屏返回格式化恢复运行

<!DOCTYPE html>
<html>
	<head>
		<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
		<link rel="stylesheet" href="//ku.shouce.ren/libs/jcrop/css/jquery.Jcrop.css">
		<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js">
		</script>
		<script src="//ku.shouce.ren/libs/jcrop/js/jquery.Jcrop.min.js">
		</script>
		<script src="//ku.shouce.ren/libs/color/jquery.color-2.0.js">
		</script>
	</head>
	<body>
		<div class="main">
			<div class="inwrap">
				<h1>jQuery Jcrop 图像裁剪插件
				</h1>
				<h2>Animation / Transitions 动画/过度效果
				</h2>
				<div class="detail">
					<p>演示使用 animateTo API 和 过渡背景颜色、透明度选项。
					</p>
					<p>颜色过渡需要 
						jQuery Color Animations 插件的支持，否则颜色不会有过渡效果。
					</p>
					<p>这个演示还需要使用 outerImage 选项定义另外的图像。
					</p>
					<p id="shadetxt" style="display:none;width:600px;color:#900;">
						<b>实验性的有效遮罩。
						</b>Jcrop 现在加入一种更好的透明遮罩（即选框以外的暗影部分），这种遮罩效果相比默认的方法，目前来说不是很稳定，建议只在确实需要的时候再使用。
					</p>
				</div>
				<div class="example">
					<div class="clearfix">
						<div class="left">
							<img src="//ku.shouce.ren/libs/jcrop/img/sago.jpg" id="target" alt="Jcrop Image">
						</div>
						<div id="interface" class="left ml">
							<div>
								<input type="checkbox" id="fadetog" class="checkbox">
								<label for="fadetog">启用过渡 (bgFade: true)
								</label>
							</div>
							<div>
								<input type="checkbox" id="shadetog" class="checkbox">
								<label for="shadetog">使用实现性的遮罩 (shade: true)
								</label>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script>
			jQuery(function($){
				var jcrop_api;
				$('#target').Jcrop({
					bgFade: true,
					bgOpacity: .2,
					setSelect: [ 60, 70, 540, 330 ]
				}
								   ,function(){
					jcrop_api = this;
				}
								  );
				$('#fadetog').change(function(){
					jcrop_api.setOptions({
						bgFade: this.checked
					}
										);
				}
									).attr('checked', 'checked');
				$('#shadetog').change(function(){
					if (this.checked) {
						$('#shadetxt').slideDown();
					}
					else {
						$('#shadetxt').slideUp();
					};
					jcrop_api.setOptions({
						shade: this.checked
					}
										);
				}
									 ).attr('checked', false);
				// Define page sections
				var sections = {
					bgc_buttons: '更改背景颜色',
					bgo_buttons: '更改背景透明度',
					anim_buttons: '选择动画'
				};
				// Define animation buttons
				var ac = {
					anim1: [217, 122, 382, 284],
					anim2: [20, 20, 580, 380],
					anim3: [24, 24, 176, 376],
					anim4: [347, 165, 550, 355],
					anim5: [136, 55, 472, 183]
				};
				// Define bgOpacity buttons
				var bgo = {
					Low: .2,
					Mid: .5,
					High: .8,
					Full: 1
				};
				// Define bgColor buttons
				var bgc = {
					R: '#900',
					B: '#4BB6F0',
					Y: '#F0B207',
					G: '#46B81C',
					W: 'white',
					K: 'black'
				};
				// Create fieldset targets for buttons
				for (i in sections) {
					insertSection(i, sections[i]);
				};
				function create_btn(c) {
					var $o = $('<button/>').addClass('button green');
					if (c) {
						$o.append(c);
					};
					return $o;
				};
				var a_count = 1;
				// Create animation buttons
				for(i in ac) {
					$('#anim_buttons .button_group').append(
						create_btn(a_count++).click(animHandler(ac[i])),
						' '
					);
				};
				$('#anim_buttons .button_group').append(
					create_btn('Bye!').click(function(e){
						$(e.target).addClass('active');
						jcrop_api.animateTo(
							[300, 200, 300, 200],
							function(){
								this.release();
								$(e.target).closest('.button_group').find('.active').removeClass('active');
							}
						);
						return false;
					}
											)
				);
				// Create bgOpacity buttons
				for (i in bgo) {
					$('#bgo_buttons .button_group').append(
						create_btn(i).click(setoptHandler('bgOpacity', bgo[i])),
						' '
					);
				}
				// Create bgColor buttons
				for (i in bgc) {
					$('#bgc_buttons .button_group').append(
						create_btn(i).css({
							background: bgc[i],
							color: ((i == 'K') || (i == 'R')) ? 'white' : 'black'
						}
										 ).click(setoptHandler('bgColor', bgc[i])), ' '
					);
				}
				// Function to insert named sections into interface
				function insertSection(k, v) {
					$('#interface').prepend(
						$('<fieldset></fieldset>').attr('id', k).append(
							$('<legend></legend>').append(v),
							'<div class="button_group"></div>'
						)
					);
				};
				// Handler for option-setting buttons
				function setoptHandler(k, v) {
					return function(e) {
						$(e.target).closest('.button_group').find('.active').removeClass('active');
						$(e.target).addClass('active');
						var opt = {
						};
						opt[k] = v;
						jcrop_api.setOptions(opt);
						return false;
					};
				};
				// Handler for animation buttons
				function animHandler(v) {
					return function(e) {
						$(e.target).addClass('active');
						jcrop_api.animateTo(v, function(){
							$(e.target).closest('.button_group').find('.active').removeClass('active');
						}
										   );
						return false;
					};
				};
				$('#bgo_buttons .button:first, #bgc_buttons .button:last').addClass('active');
				$('#interface').show();
			}
				  );
		</script>
	</body>
</html>

​x
 
<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
        <link rel="stylesheet" href="//ku.shouce.ren/libs/jcrop/css/jquery.Jcrop.css">
        <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js">
        </script>
        <script src="//ku.shouce.ren/libs/jcrop/js/jquery.Jcrop.min.js">
        </script>
        <script src="//ku.shouce.ren/libs/color/jquery.color-2.0.js">
        </script>
    </head>
    <body>
        <div class="main">
            <div class="inwrap">
                <h1>jQuery Jcrop 图像裁剪插件
                </h1>
                <h2>Animation / Transitions 动画/过度效果
                </h2>
                <div class="detail">
                    <p>演示使用 animateTo API 和 过渡背景颜色、透明度选项。
                    </p>