代码片段 1
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- </title>
- <style>
- *{margin: 0;padding: 0;} input{outline: none;} .img-box{width: 400px;height:340px;position:
- relative;margin: 200px auto;} .img-box img{position: absolute;left: 14%;top:
- 20px;} .img0{-webkit-transform:rotate(17deg);transform:rotate(17deg);z-index:
- 0;} .img1{-webkit-transform:rotate(-6deg);transform:rotate(-6deg);z-index:
- 1;} .img2{-webkit-transform:rotate(150deg);transform:rotate(150deg);z-index:
- 2;} .img3{-webkit-transform:rotate(67deg);transform:rotate(67deg);z-index:
- 3} .img4{-webkit-transform:rotate(108deg);transform:rotate(108deg);z-index:
- 4} .button1,.button2{position: absolute;bottom: 0;width: 80px;height: 40px;box-shadow:
- 2px 2px red;background: black;border-radius: 2px;color: #fff;cursor: pointer;
- /* 对于正方形元素 border-radius 设置为 50% 刚好变成圆形 */ border-radius: 50%; /* 宽度为 10px
- 的, 不透明度为 0.7 的黑色边框效果 */ border: 4px solid hsla(0,0%,0%,.7); /* 通过边框阴影实现立体按钮效果,
- inset 是内阴影效果 */ box-shadow: inset 0 4px 4px -1px hsla(0,0%,100%,.7), inset
- 0 -5px 2px -4px hsla(0,0%,0%,.6), 0 3px 5px 2px hsla(0,0%,0%,.3); background-position:
- center; /* 初始缩放 0.66 倍 */ transform: scale(.66); /* 在失去焦点时根据自定义的贝塞尔时间曲线做动画变换效果
- */ transition: transform .5s cubic-bezier(.32,0,.15,1);} .button1:hover
- { /* 悬停时恢复原始大小 */ transform: scale(1); /* 鼠标悬停时根据自定义的贝塞尔时间曲线做动画变换效果 */
- transition: transform .2s cubic-bezier(.32,0,.15,1); } .button1{left:20px;}
- input:hover { /* 悬停时恢复原始大小 */ transform: scale(1); /* 鼠标悬停时根据自定义的贝塞尔时间曲线做动画变换效果
- */ transition: transform .2s cubic-bezier(.32,0,.15,1); } .button2{right:
- 20px;}
- </style>
- </head>
- <body>
- <div class="img-box">
- <img src="images/img_0.jpg" class="img0" />
- <img src="images/img_1.jpg" class="img1" />
- <img src="images/img_2.jpg" class="img2" />
- <img src="images/img_3.jpg" class="img3" />
- <img src="images/img_0.jpg" class="img4" />
- <input type="button" value='上一张' class="button1" />
- <input type="button" value='下一张' class="button2" />
- </div>
- </body>
- <script type="text/javascript" src='http://s.thsi.cn/js/jquery-1.7.2.min.js'>
- </script>
- <script type="text/javascript">
- $(function() {
- var button1 = $('.button1');
- var button2 = $('.button2');
- var len = $('.img-box').children('img').length;
- $('.button1').click(function() {
- sildePic('down', button1, button2);
- });
- $('.button2').click(function() {
- sildePic('up', button1, button2);
- });
- function sildePic(deriction, button1, button2) {
- var c = 1;
- var k, q;
- button1.attr("disabled", true);
- button2.attr("disabled", true);
- for (var i = 0; i < len; i++) {
- if (deriction == 'down') {
- if ($('img').eq(i).CSS('zIndex') == 0) {
- k = i;
- c = 1;
- q = len - 1;
- }
- } else if (deriction == 'up') {
- if ($('img').eq(i).css('zIndex') == len - 1) {
- k = i;
- c = -1;
- q = 0;
- }
- }
- }
- $('img').eq(k).animate({
- top: c * 300,
- zIndex: q
- },
- 600,
- function() {
- $('img').eq(k).animate({
- top: 20
- },
- 600);
- button1.attr("disabled", false);
- button2.attr("disabled", false);
- for (var i = 0; i < len; i++) {
- if (i != k) {
- $('img').eq(i).css('zIndex',
- function(index, value) {
- return parseFloat(value) - c * 1;
- });
- }
- }
- });
- }
- // $('.button2').click(function() {
- // $(this).attr("disabled", true);
- // for ( var i = 0 ;i < len ; i++ ) {
- // if ( $('img').eq(i).css('zIndex') == 3 ) {
- // var k = i;
- // $('img').eq(k).animate({top:-300,zIndex:0},600,function() {
- // $('img').eq(k).animate({top:20},600);
- // $('.button2').attr("disabled", false);
- // for ( var i = 0 ;i < len ; i++ ) {
- // if ( i != k ) {
- // $('img').eq(i).css('zIndex',function(index, value) {return parseFloat(value) + 1;});
- // }
- // }
- // });
- // }
- // }
- // });
- // $('.button1').click(function() {
- // $(this).attr("disabled", true);
- // for ( var i = 0 ;i < len ; i++ ) {
- // if ( $('img').eq(i).css('zIndex') == 0 ) {
- // var k = i;
- // $('img').eq(k).animate({top:300,zIndex:3},600,function() {
- // $('img').eq(k).animate({top:20},600);
- // $('.button1').attr("disabled", false);
- // for ( var i = 0 ;i < len ; i++ ) {
- // if ( i != k ) {
- // $('img').eq(i).css('zIndex',function(index, value) {return parseFloat(value) - 1;});
- // }
- // }
- // });
- // }
- // }
- // });
- })
- </script>
- </html>
来源: http://www.qdfuns.com/article/15098/5354fbbe1b29b6ae571935bf9d0d8328.html