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

发布时间：2018-08-21 02:19:56 所属栏目：Asp教程来源：站长网

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

　　经常在听到有朋友问起QQ空间的图片预览效果该如何实现，问得人多了，我们感觉有必要给大家说明一下实现过程，

　　当点一下略缩图时，就可以放大当前图片，并且图片的上面，会出现三个功能按钮：左旋转、右旋转、全屏预览。

　　点了以后，图片会相应作出变化。注意：如果用谷歌浏览器打开QQ空间的话，当拖拽时，会有小bug，图片会被选中，体验性不太好，我们会在效果里加以改进。

　　示例：

<!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(/jscss/demoimg/201106/bgpic1.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(/jscss/demoimg/201106/cursor_out.cur),pointer9;vertical-align:bottom;} .photo2{ height:0; overflow:hidden; margin:0;} .photo3{ height:auto; overflow:visible; margin:60px 0 10px 75px;} .button{ overflow:hidden; margin:0 0 10px 0;} .photo3 img{ cursor:-moz-zoom-out;cursor:-o-zoom-out; cursor:-webkit-zoom-out;cursor:url(/jscss/demoimg/201106/cursor_in.cur),pointer9;vertical-align:bottom;} .text{ width:559px; height:76px; background:url(/jscss/demoimg/201106/bgpic2.jpg) no-repeat; margin:0 auto;} .icon1,.icon2,.icon3{ width:24px; height:21px; overflow:hidden; background:url(/jscss/demoimg/201106/icon1.gif) no-repeat; display:block; float:left; display:inline; margin:0 10px 0 0;} .icon2{ background:url(/jscss/demoimg/201106/icon2.gif) no-repeat;} .icon3{ background:url(/jscss/demoimg/201106/icon3.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="/uploads/common/images/p8.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="/uploads/common/images/p8.jpg" /> </div> </div> <div class="text"></div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：辽源站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!