旋转木马轮播图（转）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了旋转木马轮播图（转）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="description" content="CSS3 transform实现图片旋转木马3D浏览效果 ? 张鑫旭-鑫空间-鑫生活" /> <meta name="description" content="张鑫旭web前端学习实例页面 CSS3 transform实现图片旋转木马3D浏览效果" /> <meta name="keywords" content="CSS3, 3D, translateZ, perspective" /> <meta name="author" content="张鑫旭, zhangxixnu" /> <title>CSS3 transform实现图片旋转木马3D浏览效果 ? 张鑫旭-鑫空间-鑫生活</title> <link rel="stylesheet" href="../css/demo.css" type="text/css" /> <style> .stage_area { width: 900px; min-height: 100px; margin-left: auto; margin-right: auto; padding: 100px 50px; background-color: #f0f0f0; box-shadow: inset 0 0 3px rgba(0,0,0,.35); -webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px; -webkit-transition: top .5s; position: relative; top: 0; } .container { width: 128px; height: 100px; margin-left: -64px; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; position: absolute; left: 50%; } .piece { width: 128px; box-shadow: 0 1px 3px rgba(0,0,0,.5); -webkit-transition: opacity 1s, -webkit-transform 1s; -moz-transition: opacity 1s, -moz-transform 1s; transition: opacity 1s, transform 1s; position: absolute; bottom: 0; } .remind { position: absolute; left: 1em; top: 1em; } .chrome_fix { position: absolute; left: 1em; top: 3em; } </style> </head> <body> <div id="header"> <a href="http://www.zhangxinxu.com/" class="logo" title="回到鑫空间-鑫生活首页"> <img src="http://www.zhangxinxu.com/php/image/zxx_home_logo.png" border="0" /> </a> </div> <div id="main"> <h1>CSS3 transform实现图片旋转木马3D浏览效果实例页面</h1> <div id="body" class="light"> <div id="content" class="show"> <h3>展示（可以使用iPad等访问）</h3> <div class="article_new"><a href="http://www.zhangxinxu.com/wordpress/?p=2592">回到相关文章 ?</a></div> <div class="demo"> <div id="stage" class="stage_area"> <strong class="remind">点击任意图片浏览：</strong> <div id="container" class="container"></div> </div> </div> </div> </div> </div> <div id="footer"> Designed & Powerd by <a href="http://www.zhangxinxu.com/">zhangxinxu</a><br /> Copyright? 张鑫旭-鑫空间-鑫生活<br> <a href="http://www.miibeian.gov.cn/" target="_blank">鄂ICP备09015569号</a> </div> <script> (function() { if (typeof window.screenX === "number") { // 随机颜色HSL var randomHsl = function() { return "hsla(" + Math.round(360 * Math.random()) + "," + "60%, 50%, .75)"; } // CSS transform变换应用 , transform = function(element, value, key) { key = key || "Transform"; ["Moz", "O", "Ms", "Webkit", ""].forEach(function(prefix) { element.style[prefix + key] = value; }); return element; } // 浏览器选择器API , $ = function(selector) { return document.querySelector(selector); }, $$ = function(selector) { return document.querySelectorAll(selector); }; // 显示图片 var htmlPic = ‘‘, arrayPic = [1, 8, 3, 4, 6, 7, 10, 13, 15], rotate = 360 / arrayPic.length; arrayPic.forEach(function(i) { htmlPic = htmlPic + ‘<img id="piece‘+ i +‘" src="http://image.zhangxinxu.com/image/study/s/s128/mm‘+ i +‘.jpg" class="piece" />‘; }); // 元素 var eleStage = $("#stage"), eleContainer = $("#container"), indexPiece = 0; // 元素 var elePics = $$(".piece"), transZ = 64 / Math.tan((rotate / 2 / 180) * Math.PI); eleContainer.innerHTML = htmlPic; eleContainer.addEventListener("click", function() { transform(this, "rotateY("+ (-1 * rotate * ++indexPiece) +"deg)"); }); arrayPic.forEach(function(i, j) { transform($("#piece" + i), "rotateY("+ j * rotate +"deg) translateZ("+ (transZ + 20) +"px)"); }); // 垂直位置居中 - Chrome浏览器 var funStageValign = function(element) { var scrollTop = document.documentElement.scrollTop, clientHeight = document.documentElement.clientHeight; offsetTop = element.getBoundingClientRect().top; if (parseInt(window.getComputedStyle(element).top) === 0) { element.style.top = scrollTop + (window.innerHeight - 300) / 2 - offsetTop; } else { element.style.top = "0px"; } }; if (/chrome/i.test(navigator.userAgent)) { // 创建Chrome浏览器视区修正按钮 var eleButton = document.createElement("input"); var arrValue = ["舞台位置窗体区域垂直居中", "垂直位置还原"]; eleButton.type = "button"; eleButton.value = arrValue[0]; eleButton.className = "chrome_fix"; eleButton.addEventListener("click", function() { this.value = arrValue[Number(this.value !== arrValue[1])]; var stage = this.parentNode; funStageValign(stage); }); eleStage.appendChild(eleButton); } } else { alert("你好，养猪场不是飞机场，是开不了战斗机的！"); } })(); </script> <div id="ad"> <script type="text/javascript"> google_ad_client = "pub-0090627341039040";google_ad_slot = "2041257798";google_ad_width = 468;google_ad_height = 60;</script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push([‘_setAccount‘, ‘UA-11205167-1‘]); _gaq.push([‘_trackPageview‘]); (function() { var ga = document.createElement(‘script‘); ga.type = ‘text/javascript‘; ga.async = true; ga.src = (‘https:‘ == document.location.protocol ? ‘https://ssl‘ : ‘http://www‘) + ‘.google-analytics.com/ga.js‘; var s = document.getElementsByTagName(‘script‘)[0]; s.parentNode.insertBefore(ga, s); })(); </script> </div> </body> </html>
css:
body{background:#a0b3d6; font-size:87.5%; margin:0; line-height:1.5; color:#333; font-family:Arial, sans-serif;}
a{color:#34538b; text-decoration:none;}a:hover{text-decoration:underline;}
a img { border: 0; }
input,select,textarea{font-size:100%;}
#header{height:60px; padding:0 0 0 40px;}
#header .logo{margin-top:12px; overflow:hidden; float:left;}
#main{width:100%; background:#beceeb; overflow:hidden;}
#main h1{line-height:40px; margin:0; text-align:center; font-size:18px; background:#c1d5eb; font-family:‘kaiti‘,‘microsoft yahei‘; text-shadow:0px 1px 0px #f2f2f2;}
#body{padding:0; overflow:hidden;}
#body .part{width:50%; min-height:400px; _height:400px; background:white;}
#code{float:left; margin-left:-1px; margin-bottom:-999em; padding-bottom:999em;}
#effect{float:right; margin-right:-1px; margin-bottom:-999em; padding-bottom:999em;}
#body h3{line-height:30px; margin:0; font-size:15px; background:#f0f3f9; padding-left:10px; border-bottom:1px solid #ededed; color:#4e4e4e; text-shadow:0px 1px 0px white; font-family: ‘microsoft yahei‘;}
#footer{line-height:1.4; font-size:12px; padding:15px 0; border-top:1px solid #486aaa; font-family:‘Lucida Grande‘,Verdana, Sans-Serif; text-align:center; text-shadow:1px 1px #cad5eb;}
#footer:before{display:block; height:1px; content:‘‘; background-color:#909BAF; color:#aaa; overflow:hidden; position:relative; top:-15px;}
#footer img{margin-bottom:-3px;}
.show{padding-bottom:20px;}
.show h5{font-size:13px; line-height:20px; padding:10px 0 2px 2px; margin:0 0 0 8px;}
.demo{padding:10px; *zoom:1;}
.demo:after{display:table; content:""; clear:both;}
.demo .remind {
color: gray;
font-size: 12px;
}
pre{
font:14px/1.3 Consolas, Monaco, monospace;
padding:5px 10px;
margin:0;
white-space:pre-wrap;
word-wrap:break-word;
}
#ad {display:block!important; text-align:center; }
.ad { height:60px; position: absolute; top: 0; right: 0; left: 250px; text-align:right; overflow:hidden; }
@media screen and (max-width: 700px) {
.ad { display: none; }
}
.light{background:#f0f3f9;}
.description{font-size:12px; color:gray;}
#content{min-height:500px; _height:500px; background:white; border:solid #cad5eb; border-width:0 2px; font-family:‘Lucida Grande‘,Verdana;}
.article{font-family:Arial; padding:10px 0; font-size:12px; clear:both;}
.article_new{ margin:-31px 10px 0 0; line-height: 20px; font-family:Arial; padding:5px 0; font-size:12px; clear:both; text-align:right;}
.article_new a { display: inline-block; }
#back{line-height:40px;margin-top:-40px; position:absolute; right:0; padding: 0 10px 0 13px; font-size: 12px; background-color: #fff;}
以上是关于旋转木马轮播图（转）的主要内容，如果未能解决你的问题，请参考以下文章