旋转木马轮播图（转）

首页 > 代码库 > 旋转木马轮播图（转）

2024-09-22 12:40:02 222人阅读

<!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="http://www.mamicode.com/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 &amp; 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 = http://www.mamicode.com/["舞台位置窗体区域垂直居中", "垂直位置还原"];

            eleButton.type = "button";
            eleButton.value = http://www.mamicode.com/arrValue[0];    
            eleButton.className = "chrome_fix";
            eleButton.addEventListener("click", function() {
                this.value = http://www.mamicode.com/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 = http://www.mamicode.com/(‘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>

View Code

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;}

View Code

旋转木马轮播图（转）

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 旋转木马轮播图（转）

旋转木马轮播图（转）

看完仍有疑问？有类似问题直接问程序猿