微博，QQ空间图片预览，图片旋转的JS代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>微博，QQ空间图片预览效果</title>
<style>
*{ margin:0; padding:0;}
body { background:#333; }
.main{ width:890px; height:auto; overflow:hidden; background:#303030;}
.box{ width:559px; height:auto; background:url(//ku.shouce.ren/files/images/201601/56a34d3982a5a.jpg) no-repeat center top; margin:0 auto; overflow:hidden;}
.photo{ margin:60px 0 10px 75px; overflow:hidden;}
.photo img{ padding:5px; border:1px #3d3d3d solid; cursor:-moz-zoom-in;cursor:-o-zoom-in; cursor:-webkit-zoom-in;cursor:url() no-repeat; margin:0 auto;}
.icon1,.icon2,.icon3{ width:24px; height:21px; overflow:hidden; background:url(//ku.shouce.ren/files/images/201601/56a34d39eb701.gif) no-repeat; display:block; float:left; display:inline; margin:0 10px 0 0;}
.icon2{ background:url(//ku.shouce.ren/files/images/201601/56a34d3a57e09.gif) no-repeat;}
.icon3{ background:url(//ku.shouce.ren/files/images/201601/56a34d3ab49cb.gif) no-repeat;}
</style>
<script>
window.onload = function(){
	var oMain = document.getElementById('main');
	var aPhoto = getElementsByClassName(oMain,'div','photo');
	var aPhoto2 =  getElementsByClassName(oMain,'div','photo2');
	var aButton =  getElementsByClassName(oMain,'div','button');
	for(var i=0;i<aPhoto.length;i++){
		aPhoto[i].index = i;
		aPhoto2[i].index = i;	
		aPhoto[i].onclick = toBig;
		aPhoto2[i].onclick = toSmall;
		aButton[i].onclick = function(ev){ 
			var ev = ev || event;
			ev.cancelBubble = true;
		};
		aPhoto[i].style.width = first(aPhoto[i]).width + 12 +'px';
		aPhoto2[i].style.width = last(aPhoto2[i]).width + 12 +'px';
	}
	function toBig(){
		this.style.display = 'none';
		addClass(aPhoto2[this.index],'photo3');
	}
	function toSmall(){
		removeClass(this,'photo3');
		aPhoto[this.index].style.display = 'block';
	}
};
function drawImage(ImgD){
    var image = new Image();
    image.src = ImgD.src;
    var width = ImgD.width;
    var height = ImgD.height;
    if(image.width > 0 && image.height > 0){
        if(image.width / image.height >= width / height){
            if(image.width > width){
                ImgD.width = width;
                ImgD.height = (image.height * width) / image.width;
            }
			else{
                ImgD.width = image.width;
                ImgD.height = image.height;
            }
        } 
		else{
            if(image.height > height){
                ImgD.height = height;
                ImgD.width = (image.width * height) / image.height;
            }
			else{
                ImgD.width = image.width;
                ImgD.height = image.height;
            }
        }
    }
}
function getElementsByClassName(oElem, strTagName, strClassName){   
	var arrElements = (strTagName == '*' && oElem.all) ? oElem.all : oElem.getElementsByTagName(strTagName);
	var returnArrElements = new Array();   
	var oRegExp =  new RegExp('(^|\\s)' + strClassName + '($|\\s)');   
	for(var i=0; i<arrElements.length; i++){   
		if (oRegExp.test(arrElements[i].className)){   
			returnArrElements.push(arrElements[i]);   
			}   
		}   
	return (returnArrElements);
}
function addClass(element, className){
	if(!element.className){
	element.className = className;
	}
	else{
		element.className+= " "+className;		
	}
}
function removeClass(element, className){
	if (!element) return;
	var elementClassName = element.className;
	if (elementClassName.length == 0) return;
	if(elementClassName == className){
		element.className = "";
		return;
	}
	if(elementClassName.match(new RegExp("(^|\\s)" + className + "(\\s|$)"))){
		element.className = elementClassName.replace((new RegExp("(^|\\s)" + className + "(\\s|$)"))," ");
	}
}
function next(elem){
	do{
		elem = elem.nextSibling;
	} 
	while(elem && elem.nodeType != 1);
	return elem;
}
function prev(elem){
    do{
    	elem = elem.previousSibling;
    } 
	while(elem && elem.nodeType != 1);
    return elem;
}
function first(elem){
	elem = elem.firstChild;
	return elem && elem.nodeType != 1 ?
		next(elem) : elem;
}
function last(elem){
    elem = elem.lastChild;
    return elem && elem.nodeType != 1 ?
        prev(elem) : elem;
}
</script>
</head>
<body>
<div id="main" class="main">
	<div class="box">
    	<div class="photo"><img width="150" height="150" onload="drawImage(this)" src="//ku.shouce.ren/files/images/201601/56a34a1f8e441.jpg" /></div>
        <div class="photo2">
        	<div class="button">
            	<a href="javascript:void(0);" class="icon1" title="逆时针旋转"></a>
                <a href="javascript:void(0);" class="icon2" title="顺时针旋转"></a>
                <a href="javascript:void(0);" class="icon3" title="查看原图"></a>
            </div>
        	<img width="400" height="400" onload="drawImage(this)" src="//ku.shouce.ren/files/images/201601/56a34a1f8e441.jpg" />
        </div>
    </div>
    <div class="text"></div>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

微博，QQ空间图片预览，图片旋转的JS代码

分类

图片代码

描述

经常在听到有朋友问起QQ空间的图片预览效果该如何实现，问得人多了，我们感觉有必要给大家说明一下实现过程， <br>　　当点一下略缩图时，就可以放大当前图片，并且图片的上面，会出现三个功能按钮：左旋转、右旋转、全屏预览。 <br>　　...