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

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

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

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

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>微博简约贴图缩放插件</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="js/jquery-1.3.2.min.js" type=text/javascript></script>
<script src="js/artZoom.js" type=text/javascript></script>
<link href="style/artZoom.css" type=text/css rel=stylesheet>
</head>
<body>
<ul class=imgList>
  <li>
	  <a class="miniImg artZoom" href="images/xixi.jpg" rel=images/a01.jpg><IMG class="small" src="images/xixi-small.jpg"></a>
  </li>
</ul>
</body>
</html>

JS代码(artZoom.js):

/*微博简约贴图缩放插件Version:1.0.2 [2010-05-28]Author:tangbinEmail:1987.tangbin@gmail.comWebsite:www.planeArt.cn*/
(function($){
	$.fn.artZoom = function(){
	$(this).live('click',function(){
	var maxImg = $(this).attr('href'),viewImg = $(this).attr('rel').length === '0' ? $(this).attr('rel'):maxImg;
	// 如果连接含有rel属性，则新窗口打开的原图地址为此rel里面的地址if ($(this).find('.loading').length == 0) $(this).append('<span class="loading" title="Loading..">Loading..</span>');
	imgTool($(this),maxImg,viewImg);
	return false;
}
);
	// 图片预先加载var loadImg = function (url,fn){
	var img = new Image();
	img.src = url;
	if (img.complete){
	fn.call(img);
}
else{
	img.onload = function(){
	fn.call(img);
}
;
}
;
}
;
	// 图片工具条var imgTool = function(on,maxImg,viewImg){
	var width = 0,height = 0,tool = function(){
	on.find('.loading').remove();
	on.hide();
	if (on.next('.artZoomBox').length != 0){
	return on.next('.artZoomBox').show();
}
;
	// 等比例限制宽度var maxWidth = on.parent().innerWidth() - 12;
	// 获取父级元素宽度if (width > maxWidth){
	height = maxWidth / width * height;
	width = maxWidth;
}
;
	var html = '<div class="artZoomBox"><div class="tool"><a class="hideImg" href="#" title="收起">收起</a><a class="imgLeft" href="#" title="向左转">向左转</a><a class="imgRight" href="#" title="向右转">向右转</a><a class="viewImg" href="' + viewImg + '" title="查看原图">查看原图</a></div><a href="' + viewImg + '" class="maxImgLink"> <img class="maxImg" width="' + width + '" height="' + height + '" src="' + maxImg + '" /></a></div>';
	on.after(html);
	var box = on.next('.artZoomBox');
	box.hover(function(){
	box.addClass('js_hover');
}
,function(){
	box.removeClass('js_hover');
}
);
	box.find('a').bind('click',function(){
	// 收起if($(this).hasClass('hideImg') || $(this).hasClass('maxImgLink')){
	box.hide();
	box.prev().show();
}
;
	// 左旋转if($(this).hasClass('imgLeft')){
	box.find('.maxImg').rotate('left')}
;
	// 右旋转if($(this).hasClass('imgRight')){
	box.find('.maxImg').rotate('right')}
;
	// 新窗口打开if($(this).hasClass('viewImg')) window.open(viewImg);
	return false;
}
);
}
;
	loadImg(maxImg,function(){
	width = this.width;
	height= this.height;
	tool();
}
);
	// 图片旋转// 方案修改自：http://byzuo.com/$.fn.rotate = function(p){
	var img = $(this)[0],n = img.getAttribute('step');
	// 保存图片大小数据if (!this.data('width') && !$(this).data('height')){
	this.data('width',img.width);
	this.data('height',img.height);
}
;
	if(n == null) n = 0;
	if(p == 'left'){
	(n == 3) ? n = 0:n++;
}
else if(p == 'right'){
	(n == 0)? n = 3:n--;
}
;
	img.setAttribute('step',n);
	// IE浏览器使用滤镜旋转if(document.all){
	img.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ n +')';
	// IE8高度设置if ($.browser.version == 8){
	switch(n){
	case 0:this.parent().height('');
	//this.height(this.data('height'));
	break;
	case 1:this.parent().height(this.data('width') + 10);
	//this.height(this.data('width'));
	break;
	case 2:this.parent().height('');
	//this.height(this.data('height'));
	break;
	case 3:this.parent().height(this.data('width') + 10);
	//this.height(this.data('width'));
	break;
}
;
}
;
	// 对现代浏览器写入HTML5的元素进行旋转： canvas}
else{
	var c = this.next('canvas')[0];
	if(this.next('canvas').length == 0){
	this.css({
	'visibility':'hidden','position':'absolute'}
);
	c = document.createElement('canvas');
	c.setAttribute('class','maxImg canvas');
	img.parentNode.appendChild(c);
}
var canvasContext = c.getContext('2d');
	switch(n){
	default:case 0:c.setAttribute('width',img.width);
	c.setAttribute('height',img.height);
	canvasContext.rotate(0 * Math.PI / 180);
	canvasContext.drawImage(img,0,0);
	break;
	case 1:c.setAttribute('width',img.height);
	c.setAttribute('height',img.width);
	canvasContext.rotate(90 * Math.PI / 180);
	canvasContext.drawImage(img,0,-img.height);
	break;
	case 2:c.setAttribute('width',img.width);
	c.setAttribute('height',img.height);
	canvasContext.rotate(180 * Math.PI / 180);
	canvasContext.drawImage(img,-img.width,-img.height);
	break;
	case 3:c.setAttribute('width',img.height);
	c.setAttribute('height',img.width);
	canvasContext.rotate(270 * Math.PI / 180);
	canvasContext.drawImage(img,-img.width,0);
	break;
}
;
}
;
}
;
}
;
}
;
	// 给所有含'artZoom'类的链接绑定本效果$('a.artZoom').artZoom();
}
)(jQuery);

CSS代码(artZoom.css):

/* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
p{line-height:30px}
.clearfloat{height:0;font-size:1px;clear:both;line-height:0;}
ul.imgList{margin:50px auto;}
.artZoomBox{background:url(../images/bg01.png) no-repeat left top #f6f6f6;width:474px;padding-top:20px;}
A.artZoom{CURSOR:url(../images/zoomin.cur),pointer;COLOR:#ccc;PADDING-TOP:3px;POSITION:relative;}
A.artZoom:hover{TEXT-DECORATION:none}
A.artZoom SPAN.loading{DISPLAY:block;PADDING-LEFT:20px;FONT-SIZE:9px;BACKGROUND:url(../images/loading.gif) #fff no-repeat 0px 0px;FILTER:alpha(opacity=70);MARGIN:2px 0px;WIDTH:130px;LINE-HEIGHT:16px;HEIGHT:16px;opacity:0.7}
.artZoomBox{POSITION:relative;width:474px;text-align:center;margin:0 auto;}
.artZoomBox .tool{LEFT:34px;VISIBILITY:hidden;POSITION:absolute;TOP:20px}
.js_hover.artZoomBox .tool{VISIBILITY:visible}
.artZoomBox .tool A{DISPLAY:block;FILTER:alpha(opacity=50);FLOAT:left;BACKGROUND-IMAGE:url(../images/photoTool.gif);OVERFLOW:hidden;WIDTH:24px;COLOR:#fff;TEXT-INDENT:-9999em;BACKGROUND-REPEAT:no-repeat;HEIGHT:24px;BACKGROUND-COLOR:#3a6ea5;TEXT-DECORATION:none;opacity:0.5}
.artZoomBox .tool A:hover{FILTER:alpha(opacity=80);opacity:0.8}
.artZoomBox .tool A.hideImg{DISPLAY:none}
.artZoomBox .tool A.imgLeft{BACKGROUND-POSITION:0px 0px}
.artZoomBox .tool A.imgLeft{BACKGROUND-POSITION:-24px 0px}
.artZoomBox .tool A.viewImg{BACKGROUND-POSITION:0px -24px}
.artZoomBox A.maxImgLink{DISPLAY:inline;CURSOR:url(../images/zoomout.cur),pointer;ZOOM:1}
.artZoomBox A.maxImgLink .maxImg{width:406px;}
.artZoomBox A.maxImgLink{display:block;background:url(../images/bg02.png) no-repeat left bottom;width:474px;padding-bottom:20px;}
.small{width:120px;height:68px;padding:3px;border:1px solid #ccc;}
a.miniImg{padding-bottom:0;}

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