基于jquery动画图片切换效果前端开发入门效果分享|前端开发者 html 代码 <!DOCTYPE html><br /> <html lang=”en”><br /> <head><br /> <meta charset=”UTF-8″><br /> <title>多种基于jquery的动画图片切换效果示例</title><br /> <style type=”text/css”><br /> * { margin: 0; padding: 0; list-style: none }<br /> body { background: #000; font-family: ‘avenir Next’, ‘sans-serif’; width: 100%; }<br /> .container { position: relative; -webkit-transition: all .3s ease; transition: all .3s ease; padding: 40px 0; }<br /> div[class*=’card-container-‘] { position: relative; margin: 40px auto; width: 200px; height: 200px; -webkit-perspective: 500px; perspective: 500px; }<br /> .card h1 { font-size: 2em; font-weight: 600; padding: 1em 0 0 1em; }<br /> .card-container-1 { cursor: pointer; cursor: hand; color: #bfd3f8; }<br /> .card-container-1 .card { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: all .2s ease; transition: all .2s ease; border-radius: 2px; }<br /> .card-container-1 .card:last-of-type { background-color: #324b77; z-index: 80; }<br /> .card-container-1 .card:nth-last-of-type(2) { background-color: #4b70b2; z-index: 90; }<br /> .card-container-1 .card:first-of-type { background-color: cornflowerblue; z-index: 100; }<br /> .card-container-1:hover .card:first-of-type { -webkit-transform: rotateX(-20deg) translateZ(0px); transform: rotateX(-20deg) translateZ(0px); }<br /> .card-container-1:hover .card:nth-last-of-type(2) { -webkit-transform: rotateX(-20deg) translateZ(-100px); transform: rotateX(-20deg) translateZ(-100px); }<br /> .card-container-1:hover .card:last-of-type { -webkit-transform: rotateX(-20deg) translateZ(-200px); transform: rotateX(-20deg) translateZ(-200px); }<br /> .card-container-2 { cursor: pointer; cursor: hand; color: #ff887b; }<br /> .card-container-2 .controller { position: absolute; z-index: 200; top: 0; width: 50%; height: 100%; background: none; }<br /> .card-container-2 .controller.left { left: 0; }<br /> .card-container-2 .controller.right { right: 0; }<br /> .card-container-2 .card { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: all .3s ease; transition: all .3s ease; border-radius: 2px; background-color: mistyrose; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); z-index: 90; opacity: .9; }<br /> .card-container-2 .card:first-of-type { z-index: 100; opacity: 1; }<br /> .card-container-2 .card:nth-of-type(n+2) { -webkit-transform: scale(0.8); transform: scale(0.8); }<br /> .card-container-2:hover .card:first-of-type { -webkit-transform: scale(0.9); transform: scale(0.9); -webkit-transform-origin: center; transform-origin: center; }<br /> .card-container-2:hover .card:nth-last-of-type(2) { -webkit-transform: scale(0.8) rotate(-5deg) translateY(-20px); transform: scale(0.8) rotate(-5deg) translateY(-20px); -webkit-transform-origin: bottom left; transform-origin: bottom left; }<br /> .card-container-2:hover .card:last-of-type { -webkit-transform: scale(0.8) rotate(5deg) translateY(-20px); transform: scale(0.8) rotate(5deg) translateY(-20px); -webkit-transform-origin: bottom right; transform-origin: bottom right; }<br /> .card-container-3 { color: #998100; }<br /> .card-container-3 .controller { cursor: pointer; cursor: hand; position: absolute; z-index: 200; top: 0; width: 30%; height: 100%; background: none; }<br /> .card-container-3 .controller.left { left: 0; }<br /> .card-container-3 .controller.right { right: 0; }<br /> .card-container-3 .card { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: all .3s ease; transition: all .3s ease; border-radius: 2px; background-color: gold; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); }<br /> .card-container-3 .card:first-of-type { z-index: 100; }<br /> .card-container-3 .card:nth-of-type(2) { z-index: 90; }<br /> .card-container-3 .card:last-of-type { z-index: 80; }<br /> .card-container-3 .right:hover ~ .card:first-of-type { -webkit-transform: rotateY(20deg) translateZ(0px); transform: rotateY(20deg) translateZ(0px); }<br /> .card-container-3 .right:hover ~ .card:nth-last-of-type(2) { -webkit-transform: rotateY(20deg) translateZ(-100px); transform: rotateY(20deg) translateZ(-100px); }<br /> .card-container-3 .right:hover ~ .card:last-of-type { -webkit-transform: rotateY(20deg) translateZ(-200px); transform: rotateY(20deg) translateZ(-200px); }<br /> .card-container-3 .left:hover ~ .card:first-of-type { -webkit-transform: rotateY(-20deg) translateZ(0px); transform: rotateY(-20deg) translateZ(0px); }<br /> .card-container-3 .left:hover ~ .card:nth-last-of-type(2) { -webkit-transform: rotateY(-20deg) translateZ(-100px); transform: rotateY(-20deg) translateZ(-100px); }<br /> .card-container-3 .left:hover ~ .card:last-of-type { -webkit-transform: rotateY(-20deg) translateZ(-200px); transform: rotateY(-20deg) translateZ(-200px); }<br /> .card-container-4 { color: #ffb9ad; }<br /> .card-container-4 .card { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: all .3s ease; transition: all .3s ease; border-radius: 2px; background-color: tomato; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); }<br /> .card-container-4 .card:last-of-type { z-index: 80; }<br /> .card-container-4 .card:nth-last-of-type(2) { z-index: 90; }<br /> .card-container-4 .card:first-of-type { z-index: 100; }<br /> .card-container-4:hover .card:first-of-type { opacity: .8; }<br /> .card-container-4:hover .card:first-of-type:hover { top: 0; }<br /> .card-container-4:hover .card:first-of-type ~ .card { cursor: pointer; cursor: hand; }<br /> .card-container-4:hover .first { -webkit-transform: scale(0.5) translateX(-105%); transform: scale(0.5) translateX(-105%); }<br /> .card-container-4:hover .second { -webkit-transform: scale(0.5) translateX(0); transform: scale(0.5) translateX(0); }<br /> .card-container-4:hover .third { -webkit-transform: scale(0.5) translateX(105%); transform: scale(0.5) translateX(105%); }<br /> .card-container-4:hover .card:hover { top: -5px; }<br /> .card-container-5 { cursor: pointer; cursor: hand; color: #793c11; }<br /> .card-container-5 .card { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: all .3s ease; transition: all .3s ease; border-radius: 2px; background-color: chocolate; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); -webkit-transform-origin: bottom left; transform-origin: bottom left; }<br /> .card-container-5 .card:last-of-type { z-index: 80; }<br /> .card-container-5 .card:nth-last-of-type(2) { z-index: 90; }<br /> .card-container-5 .card:first-of-type { z-index: 100; }<br /> .card-container-5:hover .card { border-bottom-left-radius: 10px; }<br /> .card-container-5:hover .card:first-of-type { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }<br /> .card-container-5:hover .card:nth-of-type(2) { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }<br /> .card-container-5:hover .card:last-of-type { -webkit-transform: rotate(0deg); transform: rotate(0deg); }<br /> .card-container-6 { color: #1ec71e; }<br /> .card-container-6 .card { position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: all .3s ease; transition: all .3s ease; border-radius: 2px; background-color: lightgreen; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2); }<br /> .card-container-6 .card:last-of-type { z-index: 80; -webkit-transform: scale(0.45); transform: scale(0.45); -webkit-transform-origin: bottom center; transform-origin: bottom center; }<br /> .card-container-6 .card:nth-last-of-type(2) { z-index: 90; -webkit-transform: scale(0.45); transform: scale(0.45); -webkit-transform-origin: bottom center; transform-origin: bottom center; }<br /> .card-container-6 .card:first-of-type { z-index: 100; -webkit-transform-origin: top center; transform-origin: top center; }<br /> .card-container-6:hover .card:first-of-type { -webkit-transform: scale(0.8) translateY(-21px); transform: scale(0.8) translateY(-21px); }<br /> .card-container-6:hover .card:nth-of-type(2) { cursor: hand; cursor: pointer; -webkit-transform: scale(0.38) translate(-55%, 35%); transform: scale(0.38) translate(-55%, 35%); }<br /> .card-container-6:hover .card:last-of-type { cursor: hand; cursor: pointer; -webkit-transform: scale(0.38) translate(55%, 35%); transform: scale(0.38) translate(55%, 35%); }<br /> </style><br /> </head><br /> <body><br /> <!– 代码部分begin –><br /> <div class=”container”><br /> <div class=”card-container-1″><br /> <div class=”card”><h1>1</h1></div><br /> <div class=”card”><h1>2</h1></div><br /> <div class=”card”><h1>3</h1></div><br /> </div></p> <p> <div class=”card-container-2″><br /> <div class=”controller right”></div><br /> <div class=”controller left”></div><br /> <div class=”card-holder”><br /> <div class=”card”><h1>1</h1></div><br /> <div class=”card”><h1>2</h1></div><br /> <div class=”card”><h1>3</h1></div><br /> </div><br /> </div></p> <p> <div class=”card-container-3″><br /> <span class=”controller right”></span><br /> <span class=”controller left”></span><br /> <div class=”card”><h1>1</h1></div><br /> <div class=”card”><h1>2</h1></div><br /> <div class=”card”><h1>3</h1></div><br /> </div></p> <p> <div class=”card-container-4″><br /> <div class=”card first”><h1>1</h1></div><br /> <div class=”card second”><h1>1</h1></div><br /> <div class=”card third”><h1>1</h1></div><br /> </div></p> <p> <div class=”card-container-5″><br /> <div class=”card”><h1>1</h1></div><br /> <div class=”card”><h1>2</h1></div><br /> <div class=”card”><h1>3</h1></div><br /> </div></p> <p> <div class=”card-container-6″><br /> <div class=”card”><h1>1</h1></div><br /> <div class=”card”><h1>2</h1></div><br /> <div class=”card”><h1>3</h1></div><br /> </div></p> <p> </div><br /> <script src=”http://libs.baidu.com/jquery/1.11.1/jquery.min.js”></script><br /> <script><br /> //card-container-1<br /> var cc1 = $(‘.card-container-1’);<br /> cc1.on(‘click’,function(){<br /> var disappear = {<br /> top: ’40px’,<br /> opacity: ‘0’<br /> },<br /> appear={<br /> top:’0′,<br /> opacity:’1′<br /> }<br /> var firstCard = cc1.children(‘.card’).first();<br /> firstCard.css(disappear);<br /> var x = setTimeout(function(){<br /> firstCard.css(appear);<br /> $(‘.card-container-1’).append(firstCard);<br /> },200);<br /> })<br /> </script><br /> <script><br /> //card-container-2<br /> var cc2 = $(‘.card-container-2’);<br /> cc2.children(‘.right’).on(‘click’,function(){<br /> var firstCard = $(‘.card-container-2 .card’).first();<br /> cc2.children(‘.card-holder’).append(firstCard);<br /> });<br /> cc2.children(‘.left’).on(‘click’,function(){<br /> var lastCard = $(‘.card-container-2 .card’).last();<br /> cc2.children(‘.card-holder’).prepend(lastCard);<br /> });<br /> </script><br /> <script><br /> //card-container-3<br /> var cc3 = $(‘.card-container-3′);<br /> var cssLeft = {<br /> left: ’20px’,<br /> opacity: 0<br /> },<br /> cssRight = {<br /> left: ‘-20px’,<br /> opacity: 0<br /> },<br /> cssReset = {<br /> right: 0,<br /> left: 0,<br /> opacity: 1<br /> };<br /> cc3.children(‘.right’).click(function(){<br /> var firstCard = $(‘.card-container-3 .card’).first();<br /> firstCard.css(cssLeft);<br /> setTimeout(function(){<br /> cc3.append(firstCard);<br /> firstCard.css(cssReset);<br /> },300)<br /> });<br /> cc3.children(‘.left’).click(function(){<br /> var lastCard = $(‘.card-container-3 .card’).last();<br /> lastCard.css(cssRight);<br /> lastCard.insertAfter(cc3.children(‘.controller.left’));<br /> setTimeout(function(){<br /> lastCard.css(cssReset);<br /> },300)<br /> });<br /> </script><br /> <script><br /> //card-container-4<br /> var cc4 = $(‘.card-container-4’);<br /> cc4.children(‘.card’).click(function(){<br /> cc4.prepend($(this));<br /> })<br /> </script><br /> <script><br /> //card-container-5<br /> var cc5 = $(‘.card-container-5’);<br /> cc5.click(function(){<br /> var firstCard = cc5.children(‘.card’).first(),<br /> cssRoll = {<br /> transform: ‘rotate(-45deg)’,<br /> opacity:0<br /> };<br /> firstCard.css(cssRoll);<br /> setTimeout(function(){<br /> cc5.append(firstCard);<br /> firstCard.attr(‘style’,”);<br /> },300);<br /> });<br /> </script><br /> <script><br /> //card-container-6<br /> var cc6 = $(‘.card-container-6’),<br /> cssAppear = {<br /> opacity: 0<br /> }<br /> cc6.children(‘.card’).click(function(e){<br /> cc6.prepend($(this));<br /> })<br /> </script><br /> <!– 代码部分end –><br /> </body><br /> </html> https://www.rokub.com » 本文来自:前端开发者 » 《基于jQuery动画图片切换效果前端开发入门效果分享》 » 本文链接地址:https://www.rokub.com/2737.html » 您也可以订阅本站:https://www.rokub.com
评论前必须登录!
注册