jQuery微博简约贴图缩放插件特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery微博简约贴图缩放插件特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery微博简约贴图缩放插件</title>
<script src="js/jquery-1.6.1.min.js"></script>
<script src="js/jquery.artZoom.js"></script>
<link href="css/jquery.artZoom.css" rel="stylesheet" type="text/css">
<script>
jQuery(function ($) {
	$('.artZoom').artZoom({
		path: './images',	// 设置artZoom图片文件夹路径
		preload: true,		// 设置是否提前缓存视野内的大图片
		blur: true,			// 设置加载大图是否有模糊变清晰的效果
		
		// 语言设置
		left: '左旋转',		// 左旋转按钮文字
		right: '右旋转',		// 右旋转按钮文字
		source: '看原图'		// 查看原图按钮文字
	});
	
	$('#myEmail').html(1987 + '.tangbin@' + 'gmail.com');
});
</script>
<style type="text/css">
/*演示*/

.artZoom {
	padding:3px;
	background:#FFF;
	border:1px solid #EBEBEB;
}
body {
	font-size:75%;
	font-family:'微软雅黑';
	padding-bottom:200px;
}
img {
	border:0 none;
}
#demo {
	width:540px;
	padding:5px;
	background:#FBFCFD;
}
#demo p, #demo ul {
	padding:0;
	margin:0;
}
#demo ul, #demo ol, #demo li {
	list-style:none;
}
#about {
	width:550px;
	padding-bottom:20px;
	border-bottom:1px solid #CCC;
	font-size:14px;
}
#about .planeart, #about .planeart a {
	color:#CCC;
}
.footer { color:#666; width:550px; }
.content {
	padding:20px;
	background:#f3f6fa;
	border:1px solid #e3e7ed;
	border-radius: 10px;
}
.help {
	font-size:12px;
	font-weight:normal;
	color:#808080;
	cursor:help;
}
dt {
	font-size:18px;
	font-weight:bold;
}
dd {
	padding:20px 0;
}
ul.imgList {
}
ul.imgList li {
	margin-top:10px;
}

</style>
</head>
<body>
<center>
<div id="demo">
  <h2>演示</h2>
  <ul class="imgList">
    <li> <a href="images/01.jpg" rel="images/01.jpg"><img class="artZoom" src="images/01m.jpg" /></a> </li>
    <li> <img class="artZoom" src="images/03m.jpg" data-artZoom-show="images/03.jpg" data-artZoom-source="images/03m.jpg" /> </li>
    <li> <a href="images/04.jpg" data-artZoom-source="images/04.jpg"> <img class="artZoom" src="images/04m.jpg" data-artZoom-source="images/01m.jpg" /> </a> </li>
    <li> <a href="images/05.jpg" rel="images/05.jpg"><img class="artZoom" src="images/05m.jpg" /></a> </li>
  </ul>
  <p><em>下面是一张特别长的图片，这种种图片在微博中非常常见，如果使用artZoom，用户将无需等待图片完全下载完毕即可观看大图：</em></p>
  <p><img class="artZoom" src="images/min.jpg" data-artZoom-show="images/big.jpg" data-artZoom-source="images/big.jpg" /></p>
</div>
</center>
</body>
</html>

JS代码(jquery.artZoom.js):

/* * artZoom 1.0.7 * Date:2011-06-22 * (c) 2009-2011 TangBin,http://www.planeArt.cn * * This is licensed under the GNU LGPL,version 2.1 or later. * For details,see:http://creativecommons.org/licenses/LGPL/2.1/ */
(function (document,$,log){
	$.fn.artZoom = function (config){
	config = $.extend({
}
,$.fn.artZoom.defaults,config);
	var tmpl,viewport,$this = this,loadImg ={
}
,path = config.path,loading = path + '/loading.gif',max = path + '/zoomin.cur',min = path + '/zoomout.cur';
	new Image().src = loading;
	max = 'url(\'' + max + '\'),pointer';
	min = 'url(\'' + min + '\'),pointer';
	tmpl = ['<div class="ui-artZoom-toolbar" style="display:none">','<span class="ui-artZoom-buttons" style="display:none">','<a href="#" data-go="left" class="ui-artZoom-left"><span></span>',config.left,'</a>','<a href="#" data-go="right" class="ui-artZoom-right"><span></span>',config.right,'</a>','<a href="#" data-go="source" class="ui-artZoom-source"><span></span>',config.source,'</a>','<a href="#" data-go="hide" class="ui-artZoom-hide"><span></span>',config.hide,'</a>','</span>','<span class="ui-artZoom-loading">','<img data-live="stop" src="',loading,'" style="','display:inline-block;
	*zoom:1;
	*display:inline;
	vertical-align:middle;
	','width:16px;
	height:16px;
	"',' />',' <span>Loading..</span>','</span>','</div>','<div class="ui-artZoom-box" style="display:none">','<span class="ui-artZoom-photo" data-go="hide"',' style="display:inline-block;
	*display:inline;
	*zoom:1;
	overflow:hidden;
	position:relative;
	cursor:',min,'">','<img data-name="thumb" data-go="hide" data-live="stop" src="',loading,'" />','</span>','</div>'].join('');
	// jQuery事件代理this.live('click',function (event){
	if (this.nodeName !== 'IMG' && this.getAttribute('data-live') === 'stop') return false;
	var $artZoom,buttonClick,that = this,$this = $(that),$parent = $this.parent(),src = that.src,show = $this.attr('data-artZoom-show') || src,source = $this.attr('data-artZoom-source') || show,maxWidth = config.maxWidth || ($parent[0].nodeName === 'A' ? $this.parent():$this).parent().width(),maxHeight = config.maxHeight || 99999;
	maxWidth = maxWidth - config.borderWidth;
	// 对包含在链接内的图片进行特殊处理if ($parent[0].nodeName === 'A'){
	show = $parent.attr('data-artZoom-show') || $parent.attr('href');
	source = $parent.attr('data-artZoom-source') || $parent.attr('rel');
}
;
	// 第一次点击if (!$this.data('artZoom')){
	var wrap = document.createElement('div'),$thumb,$box,$show;
	$artZoom = $(wrap);
	wrap.className = 'ui-artZoom ui-artZoom-noLoad';
	wrap.innerHTML = tmpl;
	($parent[0].nodeName === 'A' ? $this.parent():$this).before(wrap);
	$this.data('artZoom',$artZoom);
	$box = $artZoom.find('.ui-artZoom-box');
	$thumb = $artZoom.find('[data-name=thumb]');
	// 快速获取大图尺寸imgReady(show,function (){
	var width = this.width,height = this.height,maxWidth2 = Math.min(maxWidth,width);
	height = maxWidth2 / width * height;
	width = maxWidth2;
	// 插入大图并使用逐渐清晰加载的效果$thumb.attr('src',src).css(config.blur ?{
	width:width + 'px',height:height + 'px'}
:{
	display:'none'}
).after(['<img class="ui-artZoom-show" title="',that.title,'" alt="',that.alt,'" src="',show,'" style="width:',width,'px;
	height:',height,// IE8 超长图片height属性失效BUG，改用CSS'px;
	position:absolute;
	left:0;
	top:0;
	background:transparent"',' />'].join(''));
	$show = $artZoom.find('.ui-artZoom-show');
	$thumb.attr('class','ui-artZoom-show');
	$artZoom.addClass('ui-artZoom-ready');
	$artZoom.find('.ui-artZoom-buttons').show();
	$this.data('artZoom-ready',true);
	$this.hide();
	$box.show();
	// 大图完全加载完毕}
,function (){
	$thumb.removeAttr('class').hide();
	$show.css({
	position:'static',left:'auto',top:'auto'}
);
	$artZoom.removeClass('ui-artZoom-noLoad');
	$artZoom.find('.ui-artZoom-loading').hide();
	$this.data('artZoom-load',true);
	// 图片加载错误}
,function (){
	$artZoom.addClass('ui-artZoom-error');
	log('jQuery.fn.artZoom:Load "' + show + '" Error!');
}
);
}
else{
	$this.hide();
}
;
	$artZoom = $this.data('artZoom');
	buttonClick = function (event){
	var target = this,go = target.getAttribute('data-go'),live = target.getAttribute('data-live'),degree = $this.data('artZoom-degree') || 0,elem = $artZoom.find('.ui-artZoom-show')[0];
	if (live === 'stop') return false;
	if (/img|canvas$/i.test(target.nodeName)) go = 'hide';
	switch (go){
	case 'left':degree -= 90;
	degree = degree === -90 ? 270:degree;
	break;
	case 'right':degree += 90;
	degree = degree === 360 ? 0:degree;
	break;
	case 'source':window.open(source || show || src);
	break;
	case 'hide':$this.show();
	$artZoom.find('.ui-artZoom-toolbar').hide();
	$artZoom.hide();
	$artZoom.find('[data-go]').die('click',buttonClick);
	break;
}
;
	if ((go === 'left' || go === 'right') && $this.data('artZoom-load')){
	imgRotate(elem,degree,maxWidth,maxHeight);
	$this.data('artZoom-degree',degree);
}
;
	return false;
}
;
	$artZoom.show().find('.ui-artZoom-toolbar').slideDown(150);
	$artZoom.find('[data-go]').live('click',buttonClick);
	return false;
}
);
	// 给目标缩略图应用外部指针样式this.live('mouseover',function (){
	if (this.className !== 'ui-artZoom-show') this.style.cursor = max;
}
);
	// 预加载指针形状图标if (this[0]) this[0].style.cursor = max;
	return this;
}
;
	$.fn.artZoom.defaults ={
	path:'./images',left:'\u5de6\u65cb\u8f6c',right:'\u53f3\u65cb\u8f6c',source:'\u770b\u539f\u56fe',hide:'\xd7',blur:true,preload:true,maxWidth:null,maxHeight:null,borderWidth:18}
;
	/** * 图片旋转 * @version2011.05.27 * @authorTangBin * @param{
	HTMLElement}
图片元素 * @param{
	Number}
旋转角度 (可用值:0,90,180,270) * @param{
	Number}
最大宽度限制 * @param{
	Number}
最大高度限制 */
var imgRotate = $.imgRotate = function (){
	var eCanvas = '{
	$canvas}
',isCanvas = !!document.createElement('canvas').getContext;
	return function (elem,degree,maxWidth,maxHeight){
	var x,y,getContext,resize = 1,width = elem.naturalWidth,height = elem.naturalHeight,canvas = elem[eCanvas];
	// 初次运行if (!elem[eCanvas]){
	// 获取图像未应用样式的真实大小 (IE和Opera早期版本)if (!('naturalWidth' in elem)){
	var run = elem.runtimeStyle,w = run.width,h = run.height;
	run.width = run.height = 'auto';
	elem.naturalWidth = width = elem.width;
	elem.naturalHeight = height = elem.height;
	run.width = w;
	run.height = h;
}
;
	elem[eCanvas] = canvas = document.createElement(isCanvas ? 'canvas':'span');
	elem.parentNode.insertBefore(canvas,elem.nextSibling);
	elem.style.display = 'none';
	canvas.className = elem.className;
	canvas.title = elem.title;
	if (!isCanvas){
	canvas.img = document.createElement('img');
	canvas.img.src = elem.src;
	canvas.appendChild(canvas.img);
	canvas.style.cssText = 'display:inline-block;
	*zoom:1;
	*display:inline;
	' +// css reset'padding:0;
	margin:0;
	border:none 0;
	position:static;
	float:none;
	overflow:hidden;
	width:auto;
	height:auto';
}
;
}
;
	var size = function (isSwap){
	if (isSwap) width = [height,height = width][0];
	if (width > maxWidth){
	resize = maxWidth / width;
	height = resize * height;
	width = maxWidth;
}
;
	if (height > maxHeight){
	resize = resize * maxHeight / height;
	width = maxHeight / height * width;
	height = maxHeight;
}
;
	if (isCanvas) (isSwap ? height:width) / elem.naturalWidth;
}
;
	switch (degree){
	case 0:x = 0;
	y = 0;
	size();
	break;
	case 90:x = 0;
	y = -elem.naturalHeight;
	size(true);
	break;
	case 180:x = -elem.naturalWidth;
	y = -elem.naturalHeightsize();
	break;
	case 270:x = -elem.naturalWidth;
	y = 0;
	size(true);
	break;
}
;
	if (isCanvas){
	canvas.setAttribute('width',width);
	canvas.setAttribute('height',height);
	getContext = canvas.getContext('2d');
	getContext.rotate(degree * Math.PI / 180);
	getContext.scale(resize,resize);
	getContext.drawImage(elem,x,y);
}
else{
	canvas.style.width = width + 'px';
	canvas.style.height = height + 'px';
	// 解决IE8使用滤镜后高度不能自适应canvas.img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + degree / 90 + ')';
	canvas.img.width = elem.width * resize;
	canvas.img.height = elem.height * resize;
}
;
}
;
}
();
	/** * 图片头数据加载就绪事件 - 更快获取图片尺寸 * @version2011.05.27 * @authorTangBin * @seehttp://www.planeart.cn/?p=1121 * @param{
	String}
图片路径 * @param{
	Function}
尺寸就绪 * @param{
	Function}
加载完毕 (可选) * @param{
	Function}
加载错误 (可选) * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png',function (){
	alert('size ready:width=' + this.width + ';
	height=' + this.height);
}
);
	*/
var imgReady = (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);
}
;
}
;
}
)();
}
(document,jQuery,function (msg){
	window.console && console.log(msg)}
));

CSS代码(jquery.artZoom.css):

@charset "utf-8";.ui-artZoom img{-ms-interpolation-mode:bicubic;}
.ui-artZoom-toolbar{height:26px;line-height:26px;padding:5px 0;}
.ui-artZoom-buttons{display:inline-block;*display:inline;*zoom:1;height:26px;line-height:0;margin-right:5px;border-radius:5px;transition:box-shadow linear .2s;-moz-transition:-moz-box-shadow linear .2s;-webkit-transition:-webkit-box-shadow linear .2s;outline:none;}
.ui-artZoom-buttons:hover{-webkit-box-shadow:0 0 3px rgba(29,79,132,.2);box-shadow:0 0 3px rgba(29,79,132,.2);}
.ui-artZoom-buttons:hover a{border-color:#ABABAB;}
.ui-artZoom-loading{color:#808080;font-size:12px;text-shadow:0 1px 0 rgba(255,255,255,.7);}
.ui-artZoom-buttons a{display:inline-block;padding:5px 8px;font:12px/1.11 "Microsoft Yahei",Tahoma,Arial,Helvetica,STHeiti;_font-family:Tahoma,Arial,Helvetica,STHeiti;-o-font-family:Tahoma,Arial;_font-size:12px;color:#3C3C3D;text-shadow:1px 1px 0 #FFFFFF;background:#ECECEC url('css3buttons_backgrounds.png') 0 0 no-repeat;white-space:nowrap;overflow:visible;cursor:pointer;text-decoration:none;border:1px solid #CACACA;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;outline:none;position:relative;zoom:1;*display:inline;*vertical-align:middle;-moz-user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-user-select:none;-webkit-touch-callout:none;}
.ui-artZoom-buttons a:hover{color:#FFFFFF;border-color:#388AD4;text-decoration:none;text-shadow:-1px -1px 0 rgba(0,0,0,0.3);background-position:0 -40px;background-color:#2D7DC5;}
.ui-artZoom-buttons a:active{top:1px;background-position:0 -81px;border-color:#347BBA;background-color:#0F5EA2;color:#FFFFFF;text-shadow:none;}
.ui-artZoom-noLoad a.ui-artZoom-left,.ui-artZoom-noLoad a.ui-artZoom-right{background-position:0 0;border-color:#CACACA;color:#999;cursor:default;text-shadow:1px 1px 0 #FFFFFF;filter:Alpha(opacity=50);opacity:.5;}
.ui-artZoom-ready .ui-artZoom-loading span{width:5px;overflow:hidden;visibility:hidden;}
a.ui-artZoom-left{-webkit-border-bottom-right-radius:0px;-webkit-border-top-right-radius:0px;-moz-border-radius-bottomright:0px;-moz-border-radius-topright:0px;border-bottom-right-radius:0px;border-top-right-radius:0px;margin-right:0px;border-right:none;}
a.ui-artZoom-right{margin-right:0px;margin-left:0px;-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;border-right:none;}
a.ui-artZoom-source{-webkit-border-bottom-left-radius:0px;-webkit-border-top-left-radius:0px;-moz-border-radius-bottomleft:0px;-moz-border-radius-topleft:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;margin-left:0px;}
a.ui-artZoom-left:active,a.ui-artZoom-right:active,a.ui-artZoom-source:active{top:0px}
.ui-artZoom-buttons a span{display:inline-block;width:12px;height:12px;margin:auto 3px auto auto;position:relative;top:0;*top:0px;background-image:url('icons.png');background-repeat:no-repeat;*font-size:0;vertical-align:middle;}
.ui-artZoom-hide{display:none !important;}
a.ui-artZoom-right span,.ui-artZoom-noLoad .ui-artZoom-buttons a.ui-artZoom-right span{background-position:0 -0;}
a.ui-artZoom-left span,.ui-artZoom-noLoad .ui-artZoom-buttons a.ui-artZoom-left span{background-position:-12px 0;}
a.ui-artZoom-source span{background-position:-24px 0;}
a.ui-artZoom-right:hover span,a.ui-artZoom-right:active span{background-position:0 -12px;}
a.ui-artZoom-left:hover span,a.ui-artZoom-left:active span{background-position:-12px -12px;}
a.ui-artZoom-source:hover span,a.ui-artZoom-source:active span{background-position:-24px -12px;}
.ui-artZoom-show{background:transparent;border:3px solid #FFF!important;border-radius:3px;}
.ui-artZoom-ready .ui-artZoom-photo{font-size:0;line-height:0;border:1px solid #D6D6D6;background:#FFF url(img.png) repeat;border-radius:3px;box-shadow:1px 1px 3px rgba(0,0,0,.1);}

附件:下载该文件资源,减少时间成本(增值服务)