基于jQuery动画图片切换效果前端开发入门效果分享

由前端开发者 · 2018年5月13日21:31:01

摘要：基于jquery动画图片切换效果前端开发入门效果分享|前端开发者 html 代码 <!DOCTYPE html><br /> <html lang=”en”><br /> <head><br /> <meta charset=……

基于jquery动画图片切换效果前端开发入门效果分享|前端开发者

html 代码

<!DOCTYPE <span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html">html</a></span>><br /><br /> <<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html">html</a></span> lang=”en”><br /><br /> <head><br /><br /> <meta charset=”UTF-8″><br /><br /> <title>多种基于<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a></span>的动画图片切换效果示例</title><br /><br /> <style type=”text/<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/css" title="css">css</a></span>”><br /><br /> * { margin: 0; padding: 0; list-style: none }<br /><br /> body { background: #000; font-family: ‘avenir Next’, ‘sans-serif’; width: 100%; }<br /><br /> .container { position: relative; -webkit-transition: all .3s ease; transition: all .3s ease; padding: 40px 0; }<br /><br /> div[class*=’card-container-‘] { position: relative; margin: 40px auto; width: 200px; height: 200px; -webkit-perspective: 500px; perspective: 500px; }<br /><br /> .card h1 { font-size: 2em; font-weight: 600; padding: 1em 0 0 1em; }<br /><br /> .card-container-1 { cursor: pointer; cursor: hand; color: #bfd3f8; }<br /><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 /><br /> .card-container-1 .card:last-of-type { background-color: #324b77; z-index: 80; }<br /><br /> .card-container-1 .card:nth-last-of-type(2) { background-color: #4b70b2; z-index: 90; }<br /><br /> .card-container-1 .card:first-of-type { background-color: cornflowerblue; z-index: 100; }<br /><br /> .card-container-1:hover .card:first-of-type { -webkit-transform: rotateX(-20deg) translateZ(0px); transform: rotateX(-20deg) translateZ(0px); }<br /><br /> .card-container-1:hover .card:nth-last-of-type(2) { -webkit-transform: rotateX(-20deg) translateZ(-100px); transform: rotateX(-20deg) translateZ(-100px); }<br /><br /> .card-container-1:hover .card:last-of-type { -webkit-transform: rotateX(-20deg) translateZ(-200px); transform: rotateX(-20deg) translateZ(-200px); }<br /><br /> .card-container-2 { cursor: pointer; cursor: hand; color: #ff887b; }<br /><br /> .card-container-2 .controller { position: absolute; z-index: 200; top: 0; width: 50%; height: 100%; background: none; }<br /><br /> .card-container-2 .controller.left { left: 0; }<br /><br /> .card-container-2 .controller.right { right: 0; }<br /><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 /><br /> .card-container-2 .card:first-of-type { z-index: 100; opacity: 1; }<br /><br /> .card-container-2 .card:nth-of-type(n+2) { -webkit-transform: scale(0.8); transform: scale(0.8); }<br /><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 /><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 /><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 /><br /> .card-container-3 { color: #998100; }<br /><br /> .card-container-3 .controller { cursor: pointer; cursor: hand; position: absolute; z-index: 200; top: 0; width: 30%; height: 100%; background: none; }<br /><br /> .card-container-3 .controller.left { left: 0; }<br /><br /> .card-container-3 .controller.right { right: 0; }<br /><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 /><br /> .card-container-3 .card:first-of-type { z-index: 100; }<br /><br /> .card-container-3 .card:nth-of-type(2) { z-index: 90; }<br /><br /> .card-container-3 .card:last-of-type { z-index: 80; }<br /><br /> .card-container-3 .right:hover ~ .card:first-of-type { -webkit-transform: rotateY(20deg) translateZ(0px); transform: rotateY(20deg) translateZ(0px); }<br /><br /> .card-container-3 .right:hover ~ .card:nth-last-of-type(2) { -webkit-transform: rotateY(20deg) translateZ(-100px); transform: rotateY(20deg) translateZ(-100px); }<br /><br /> .card-container-3 .right:hover ~ .card:last-of-type { -webkit-transform: rotateY(20deg) translateZ(-200px); transform: rotateY(20deg) translateZ(-200px); }<br /><br /> .card-container-3 .left:hover ~ .card:first-of-type { -webkit-transform: rotateY(-20deg) translateZ(0px); transform: rotateY(-20deg) translateZ(0px); }<br /><br /> .card-container-3 .left:hover ~ .card:nth-last-of-type(2) { -webkit-transform: rotateY(-20deg) translateZ(-100px); transform: rotateY(-20deg) translateZ(-100px); }<br /><br /> .card-container-3 .left:hover ~ .card:last-of-type { -webkit-transform: rotateY(-20deg) translateZ(-200px); transform: rotateY(-20deg) translateZ(-200px); }<br /><br /> .card-container-4 { color: #ffb9ad; }<br /><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 /><br /> .card-container-4 .card:last-of-type { z-index: 80; }<br /><br /> .card-container-4 .card:nth-last-of-type(2) { z-index: 90; }<br /><br /> .card-container-4 .card:first-of-type { z-index: 100; }<br /><br /> .card-container-4:hover .card:first-of-type { opacity: .8; }<br /><br /> .card-container-4:hover .card:first-of-type:hover { top: 0; }<br /><br /> .card-container-4:hover .card:first-of-type ~ .card { cursor: pointer; cursor: hand; }<br /><br /> .card-container-4:hover .first { -webkit-transform: scale(0.5) translateX(-105%); transform: scale(0.5) translateX(-105%); }<br /><br /> .card-container-4:hover .second { -webkit-transform: scale(0.5) translateX(0); transform: scale(0.5) translateX(0); }<br /><br /> .card-container-4:hover .third { -webkit-transform: scale(0.5) translateX(105%); transform: scale(0.5) translateX(105%); }<br /><br /> .card-container-4:hover .card:hover { top: -5px; }<br /><br /> .card-container-5 { cursor: pointer; cursor: hand; color: #793c11; }<br /><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 /><br /> .card-container-5 .card:last-of-type { z-index: 80; }<br /><br /> .card-container-5 .card:nth-last-of-type(2) { z-index: 90; }<br /><br /> .card-container-5 .card:first-of-type { z-index: 100; }<br /><br /> .card-container-5:hover .card { border-bottom-left-radius: 10px; }<br /><br /> .card-container-5:hover .card:first-of-type { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); }<br /><br /> .card-container-5:hover .card:nth-of-type(2) { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); }<br /><br /> .card-container-5:hover .card:last-of-type { -webkit-transform: rotate(0deg); transform: rotate(0deg); }<br /><br /> .card-container-6 { color: #1ec71e; }<br /><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 /><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 /><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 /><br /> .card-container-6 .card:first-of-type { z-index: 100; -webkit-transform-origin: top center; transform-origin: top center; }<br /><br /> .card-container-6:hover .card:first-of-type { -webkit-transform: scale(0.8) translateY(-21px); transform: scale(0.8) translateY(-21px); }<br /><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 /><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 /><br /> </style><br /><br /> </head><br /><br /> <body><br /><br /> <!– 代码部分begin –><br /><br /> <div class=”container”><br /><br /> <div class=”card-container-1″><br /><br /> <div class=”card”><h1>1</h1></div><br /><br /> <div class=”card”><h1>2</h1></div><br /><br /> <div class=”card”><h1>3</h1></div><br /><br /> </div></p><br /> <p> <div class=”card-container-2″><br /><br /> <div class=”controller right”></div><br /><br /> <div class=”controller left”></div><br /><br /> <div class=”card-holder”><br /><br /> <div class=”card”><h1>1</h1></div><br /><br /> <div class=”card”><h1>2</h1></div><br /><br /> <div class=”card”><h1>3</h1></div><br /><br /> </div><br /><br /> </div></p><br /> <p> <div class=”card-container-3″><br /><br /> <span class=”controller right”></span><br /><br /> <span class=”controller left”></span><br /><br /> <div class=”card”><h1>1</h1></div><br /><br /> <div class=”card”><h1>2</h1></div><br /><br /> <div class=”card”><h1>3</h1></div><br /><br /> </div></p><br /> <p> <div class=”card-container-4″><br /><br /> <div class=”card first”><h1>1</h1></div><br /><br /> <div class=”card second”><h1>1</h1></div><br /><br /> <div class=”card third”><h1>1</h1></div><br /><br /> </div></p><br /> <p> <div class=”card-container-5″><br /><br /> <div class=”card”><h1>1</h1></div><br /><br /> <div class=”card”><h1>2</h1></div><br /><br /> <div class=”card”><h1>3</h1></div><br /><br /> </div></p><br /> <p> <div class=”card-container-6″><br /><br /> <div class=”card”><h1>1</h1></div><br /><br /> <div class=”card”><h1>2</h1></div><br /><br /> <div class=”card”><h1>3</h1></div><br /><br /> </div></p><br /> <p> </div><br /><br /> <script src=”http://libs.baidu.com/<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a></span>/1.11.1/<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/jquery" title="jquery">jquery</a></span>.min.<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/javascript" title="js">js</a></span>”></script><br /><br /> <script><br /><br /> //card-container-1<br /><br /> var cc1 = $(‘.card-container-1’);<br /><br /> cc1.on(‘click’,function(){<br /><br /> var disappear = {<br /><br /> top: ’40px’,<br /><br /> opacity: ‘0’<br /><br /> },<br /><br /> appear={<br /><br /> top:’0′,<br /><br /> opacity:’1′<br /><br /> }<br /><br /> var firstCard = cc1.children(‘.card’).first();<br /><br /> firstCard.<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/css" title="css">css</a></span>(disappear);<br /><br /> var x = setTimeout(function(){<br /><br /> firstCard.css(appear);<br /><br /> $(‘.card-container-1’).append(firstCard);<br /><br /> },200);<br /><br /> })<br /><br /> </script><br /><br /> <script><br /><br /> //card-container-2<br /><br /> var cc2 = $(‘.card-container-2’);<br /><br /> cc2.children(‘.right’).on(‘click’,function(){<br /><br /> var firstCard = $(‘.card-container-2 .card’).first();<br /><br /> cc2.children(‘.card-holder’).append(firstCard);<br /><br /> });<br /><br /> cc2.children(‘.left’).on(‘click’,function(){<br /><br /> var lastCard = $(‘.card-container-2 .card’).last();<br /><br /> cc2.children(‘.card-holder’).prepend(lastCard);<br /><br /> });<br /><br /> </script><br /><br /> <script><br /><br /> //card-container-3<br /><br /> var cc3 = $(‘.card-container-3′);<br /><br /> var cssLeft = {<br /><br /> left: ’20px’,<br /><br /> opacity: 0<br /><br /> },<br /><br /> cssRight = {<br /><br /> left: ‘-20px’,<br /><br /> opacity: 0<br /><br /> },<br /><br /> cssReset = {<br /><br /> right: 0,<br /><br /> left: 0,<br /><br /> opacity: 1<br /><br /> };<br /><br /> cc3.children(‘.right’).click(function(){<br /><br /> var firstCard = $(‘.card-container-3 .card’).first();<br /><br /> firstCard.css(cssLeft);<br /><br /> setTimeout(function(){<br /><br /> cc3.append(firstCard);<br /><br /> firstCard.css(cssReset);<br /><br /> },300)<br /><br /> });<br /><br /> cc3.children(‘.left’).click(function(){<br /><br /> var lastCard = $(‘.card-container-3 .card’).last();<br /><br /> lastCard.css(cssRight);<br /><br /> lastCard.insertAfter(cc3.children(‘.controller.left’));<br /><br /> setTimeout(function(){<br /><br /> lastCard.css(cssReset);<br /><br /> },300)<br /><br /> });<br /><br /> </script><br /><br /> <script><br /><br /> //card-container-4<br /><br /> var cc4 = $(‘.card-container-4’);<br /><br /> cc4.children(‘.card’).click(function(){<br /><br /> cc4.prepend($(this));<br /><br /> })<br /><br /> </script><br /><br /> <script><br /><br /> //card-container-5<br /><br /> var cc5 = $(‘.card-container-5’);<br /><br /> cc5.click(function(){<br /><br /> var firstCard = cc5.children(‘.card’).first(),<br /><br /> cssRoll = {<br /><br /> transform: ‘rotate(-45deg)’,<br /><br /> opacity:0<br /><br /> };<br /><br /> firstCard.css(cssRoll);<br /><br /> setTimeout(function(){<br /><br /> cc5.append(firstCard);<br /><br /> firstCard.attr(‘style’,”);<br /><br /> },300);<br /><br /> });<br /><br /> </script><br /><br /> <script><br /><br /> //card-container-6<br /><br /> var cc6 = $(‘.card-container-6’),<br /><br /> cssAppear = {<br /><br /> opacity: 0<br /><br /> }<br /><br /> cc6.children(‘.card’).click(function(e){<br /><br /> cc6.prepend($(this));<br /><br /> })<br /><br /> </script><br /><br /> <!– 代码部分end –><br /><br /> </body><br /><br /> </<span class='wp_keywordlink_affiliate'><a href="https://www.rokub.com/category/html" title="html">html</a></span>>

https://www.rokub.com

» 本文来自：前端开发者 » 《基于jQuery动画图片切换效果前端开发入门效果分享》

» 本文链接地址：https://www.rokub.com/2737.html

» 您也可以订阅本站：https://www.rokub.com