经验分享程序开发文档资料数据资源其它资源

jQuery立体相册鼠标点击切换代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery立体相册鼠标点击切换代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery立体相册鼠标点击切换代码

HTML代码(index.html):

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>jQuery立体相册鼠标点击切换代码</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
  <div class="card-container-1">
    <div class="card"> 
      <h1>1</h1>
    </div>
    <div class="card"> 
      <h1>2</h1>
    </div>
    <div class="card"> 
      <h1>3</h1>
    </div>
  </div>
  <div class="card-container-2">
    <div class="controller right"></div>
    <div class="controller left"></div>
    <div class="card-holder">
      <div class="card"> 
        <h1>1</h1>
      </div>
      <div class="card"> 
        <h1>2</h1>
      </div>
      <div class="card"> 
        <h1>3</h1>
      </div>
    </div>
  </div>
  <div class="card-container-3"><span class="controller right"></span><span class="controller left"></span>
    <div class="card"> 
      <h1>1</h1>
    </div>
    <div class="card"> 
      <h1>2</h1>
    </div>
    <div class="card"> 
      <h1>3</h1>
    </div>
  </div>
  <div class="card-container-4">
    <div class="card first">
      <h1>1</h1>
    </div>
    <div class="card second">
      <h1>2</h1>
    </div>
    <div class="card third">
      <h1>3</h1>
    </div>
  </div>
  <div class="card-container-5">
    <div class="card">
      <h1>1</h1>
    </div>
    <div class="card">
      <h1>2</h1>
    </div>
    <div class="card">
      <h1>3</h1>
    </div>
  </div>
  <div class="card-container-6">
    <div class="card">
      <h1>1</h1>
    </div>
    <div class="card">
      <h1>2</h1>
    </div>
    <div class="card">
      <h1>3</h1>
    </div>
  </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>

CSS代码(reset.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}

CSS代码(style.css):

body{background:#000;font-family:'avenir Next','sans-serif';width:100%;}
.container{position:relative;-webkit-transition:all .3s ease;transition:all .3s ease;padding:40px 0;}
div[class*='card-container-']{position:relative;margin:40px auto;width:200px;height:200px;-webkit-perspective:500px;perspective:500px;}
.card h1{font-size:2em;font-weight:600;padding:1em 0 0 1em;}
.card-container-1{cursor:pointer;cursor:hand;color:#bfd3f8;}
.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;}
.card-container-1 .card:last-of-type{background-color:#324b77;z-index:80;}
.card-container-1 .card:nth-last-of-type(2){background-color:#4b70b2;z-index:90;}
.card-container-1 .card:first-of-type{background-color:cornflowerblue;z-index:100;}
.card-container-1:hover .card:first-of-type{-webkit-transform:rotateX(-20deg) translateZ(0px);transform:rotateX(-20deg) translateZ(0px);}
.card-container-1:hover .card:nth-last-of-type(2){-webkit-transform:rotateX(-20deg) translateZ(-100px);transform:rotateX(-20deg) translateZ(-100px);}
.card-container-1:hover .card:last-of-type{-webkit-transform:rotateX(-20deg) translateZ(-200px);transform:rotateX(-20deg) translateZ(-200px);}
.card-container-2{cursor:pointer;cursor:hand;color:#ff887b;}
.card-container-2 .controller{position:absolute;z-index:200;top:0;width:50%;height:100%;background:none;}
.card-container-2 .controller.left{left:0;}
.card-container-2 .controller.right{right:0;}
.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;}
.card-container-2 .card:first-of-type{z-index:100;opacity:1;}
.card-container-2 .card:nth-of-type(n+2){-webkit-transform:scale(0.8);transform:scale(0.8);}
.card-container-2:hover .card:first-of-type{-webkit-transform:scale(0.9);transform:scale(0.9);-webkit-transform-origin:center;transform-origin:center;}
.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;}
.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;}
.card-container-3{color:#998100;}
.card-container-3 .controller{cursor:pointer;cursor:hand;position:absolute;z-index:200;top:0;width:30%;height:100%;background:none;}
.card-container-3 .controller.left{left:0;}
.card-container-3 .controller.right{right:0;}
.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);}
.card-container-3 .card:first-of-type{z-index:100;}
.card-container-3 .card:nth-of-type(2){z-index:90;}
.card-container-3 .card:last-of-type{z-index:80;}
.card-container-3 .right:hover ~ .card:first-of-type{-webkit-transform:rotateY(20deg) translateZ(0px);transform:rotateY(20deg) translateZ(0px);}
.card-container-3 .right:hover ~ .card:nth-last-of-type(2){-webkit-transform:rotateY(20deg) translateZ(-100px);transform:rotateY(20deg) translateZ(-100px);}
.card-container-3 .right:hover ~ .card:last-of-type{-webkit-transform:rotateY(20deg) translateZ(-200px);transform:rotateY(20deg) translateZ(-200px);}
.card-container-3 .left:hover ~ .card:first-of-type{-webkit-transform:rotateY(-20deg) translateZ(0px);transform:rotateY(-20deg) translateZ(0px);}
.card-container-3 .left:hover ~ .card:nth-last-of-type(2){-webkit-transform:rotateY(-20deg) translateZ(-100px);transform:rotateY(-20deg) translateZ(-100px);}
.card-container-3 .left:hover ~ .card:last-of-type{-webkit-transform:rotateY(-20deg) translateZ(-200px);transform:rotateY(-20deg) translateZ(-200px);}
.card-container-4{color:#ffb9ad;}
.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);}
.card-container-4 .card:last-of-type{z-index:80;}
.card-container-4 .card:nth-last-of-type(2){z-index:90;}
.card-container-4 .card:first-of-type{z-index:100;}
.card-container-4:hover .card:first-of-type{opacity:.8;}
.card-container-4:hover .card:first-of-type:hover{top:0;}
.card-container-4:hover .card:first-of-type ~ .card{cursor:pointer;cursor:hand;}
.card-container-4:hover .first{-webkit-transform:scale(0.5) translateX(-105%);transform:scale(0.5) translateX(-105%);}
.card-container-4:hover .second{-webkit-transform:scale(0.5) translateX(0);transform:scale(0.5) translateX(0);}
.card-container-4:hover .third{-webkit-transform:scale(0.5) translateX(105%);transform:scale(0.5) translateX(105%);}
.card-container-4:hover .card:hover{top:-5px;}
.card-container-5{cursor:pointer;cursor:hand;color:#793c11;}
.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;}
.card-container-5 .card:last-of-type{z-index:80;}
.card-container-5 .card:nth-last-of-type(2){z-index:90;}
.card-container-5 .card:first-of-type{z-index:100;}
.card-container-5:hover .card{border-bottom-left-radius:10px;}
.card-container-5:hover .card:first-of-type{-webkit-transform:rotate(-10deg);transform:rotate(-10deg);}
.card-container-5:hover .card:nth-of-type(2){-webkit-transform:rotate(-5deg);transform:rotate(-5deg);}
.card-container-5:hover .card:last-of-type{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
.card-container-6{color:#1ec71e;}
.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);}
.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;}
.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;}
.card-container-6 .card:first-of-type{z-index:100;-webkit-transform-origin:top center;transform-origin:top center;}
.card-container-6:hover .card:first-of-type{-webkit-transform:scale(0.8) translateY(-21px);transform:scale(0.8) translateY(-21px);}
.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%);}
.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%);}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
34.93 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
34.93 KB
立即下载
潘珠卿
了解
打赏作者 鼓励作者
Html Js 图片切换触摸1
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章