Chinaunix首页 | 论坛 | 博客

纸上得来终觉浅

首页　| 　博文目录　| 　关于我

水中残月

  • 博客访问： 158255
  • 博文数量： 42
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 399
  • 用 户 组： 普通用户
  • 注册时间： 2015-09-23 11:47
个人简介

程序猿啊程序猿

文章分类

全部博文（42）

文章存档

2016年（28）

2015年（14）

我的朋友
最近访客
推荐博文
CSS3实现百叶窗轮播效果

分类： Html/Css

2016-07-06 16:07:51


点击(此处)折叠或打开

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <script src="jquery.js"></script>
  6.     <title>百叶窗轮播</title>
  7.     <style>
  8.       *{
  9.           padding:0;
  10.           margin:0;
  11.       }
  12.       .view{
  13.           position: relative;
  14.         width: 400px;
  15.         height: 300px;
  16.         left:200px;
  17.         top:100px;
  18.         overflow: hidden;
  19.       }
  20.       .carousel{
  21.           width: 400px;
  22.           height: 300px;
  23.           position: absolute;
  24.       }
  25.       .part1,.part2,.part3,.part4{
  26.           width: 100px;
  27.           height: 300px;
  28.           float: left;
  29.           position: relative;
  30.       }
  31.       .div{
  32.           background: url(images/1.jpg) no-repeat;
  33.       }
  34.       .div4 .part1{
  35.           background: url(images/1.jpg) no-repeat;
  36.           background-position:0%;
  37.       }
  38.       .div4 .part2{
  39.           background: url(images/1.jpg) no-repeat;
  40.           background-position: 33%;
  41.       }
  42.       .div4 .part3{
  43.         background: url(images/1.jpg) no-repeat;
  44.           background-position: 66%;
  45.       }
  46.       .div4 .part4{
  47.           background: url(images/1.jpg) no-repeat;
  48.           background-position:99%;
  49.       }
  50.       .div3 .part1{
  51.           background: url(images/4.jpg) no-repeat;
  52.           background-position:0%;
  53.       }
  54.       .div3 .part2{
  55.           background: url(images/4.jpg) no-repeat;
  56.           background-position:33%;
  57.       }
  58.       .div3 .part3{
  59.         background: url(images/4.jpg) no-repeat;
  60.           background-position:66%;
  61.       }
  62.       .div3 .part4{
  63.           background: url(images/4.jpg) no-repeat;
  64.           background-position:99%;
  65.       }
  66.      .div1 .part1,.div1 .part2,.div1 .part3,.div1 .part4,.div2 .part1,.div2 .part2,.div2 .part3,.div2 .part4{
  67.           width: 400px;
  68.           height: 75px;
  69.           position: relative;
  70.       }
  71.       .div1 .part1{
  72.           background: url(images/2.jpg) no-repeat;
  73.           background-position: 0 0;
  74.       }
  75.       .div1 .part2{
  76.           background: url(images/2.jpg) no-repeat;
  77.           background-position: 0 33%;
  78.       }
  79.       .div1 .part3{
  80.           background: url(images/2.jpg) no-repeat;
  81.           background-position: 0 66%;
  82.       }
  83.       .div1 .part4{
  84.           background: url(images/2.jpg) no-repeat;
  85.           background-position: 0 99%;
  86.       }

  88.       .div2 .part1{
  89.           background: url(images/3.jpg) no-repeat;
  90.           background-position: 0 0;
  91.       }
  92.       .div2 .part2{
  93.           background: url(images/3.jpg) no-repeat;
  94.           background-position: 0 33%;
  95.       }
  96.       .div2 .part3{
  97.           background: url(images/3.jpg) no-repeat;
  98.           background-position: 0 66%;
  99.       }
  100.       .div2 .part4{
  101.           background: url(images/3.jpg) no-repeat;
  102.           background-position: 0 99%;
  103.       }
  104.     </style>
  105. </head>
  106. <body>
  107.     <div class="view">
  108.         <div class="carousel div">
  109.             
  110.         </div>
  111.         <div class="carousel div1">
  112.             <div class="part1"></div>
  113.             <div class="part2"></div>
  114.             <div class="part3"></div>
  115.             <div class="part4"></div>    
  116.         </div>
  117.         <div class="carousel div2">
  118.             <div class="part1"></div>
  119.             <div class="part2"></div>
  120.             <div class="part3"></div>
  121.             <div class="part4"></div>    
  122.         </div>
  123.         <div class="carousel div3">
  124.             <div class="part1"></div>
  125.             <div class="part2"></div>
  126.             <div class="part3"></div>
  127.             <div class="part4"></div>            
  128.         </div>
  129.         <div class="carousel div4">
  130.             <div class="part1"></div>
  131.             <div class="part2"></div>
  132.             <div class="part3"></div>
  133.             <div class="part4"></div>
  134.         </div>
  135.     </div>
  136. <script>
  137.     //思路如下:
  138.     //一个大的div分成四个等份的小div,然后利用CSS的一个属性 background-position来把背景图片定位在小的div中
  139.     //把四个小的div拼成一个完成图片来实现图片的百叶窗效果
  140.     $(function(){
  141.         function div4M(){
  142.                 $(".div4 .part1").animate({
  143.          top:"300px"
  144.                 },1000,'linear',function(){
  145.                     $(".div4 .part2").animate({
  146.                         top:"300px"
  147.                     },1000,'linear',function(){
  148.                         $(".div4 .part3").animate({
  149.                             top:"300px"
  150.                         },1000,'linear',function(){
  151.                             $(".div4 .part4").animate({
  152.                                 top:"300px"
  153.                             },1000,'linear',function(){
  154.                                 $(".div4 .part1,.div4 .part2,.div4 .part3,.div4 .part4").css("top","0").hide();
  155.                                 $(".div3 .part1,.div3 .part2,.div3 .part3,.div3 .part4").css("top","0").show();
  156.                                 $(".div2 .part1,.div2 .part2,.div2 .part3,.div2 .part4").css("left","0").show();
  157.                                 div3M();
  158.                             })
  159.                         })
  160.                     })
  161.                 })    
  162.         }
  163.         function div3M(){
  164.                     $(".div3 .part4").animate({
  165.                  top:"300px"
  166.                         },1000,'linear',function(){
  167.                             $(".div3 .part3").animate({
  168.                                 top:"300px"
  169.                             },1000,'linear',function(){
  170.                                 $(".div3 .part2").animate({
  171.                                     top:"300px"
  172.                                 },1000,'linear',function(){
  173.                                     $(".div3 .part1").animate({
  174.                                         top:"300px"
  175.                                     },1000,'linear',function(){
  176.                                         $(".div3 .part1,.div3 .part2,.div3 .part3,.div3 .part4").css("top","0").hide();
  177.                                         $(".div2 .part1,.div2 .part2,.div2 .part3,.div2 .part4").css("left","0").show();
  178.                                         $(".div1 .part1,.div1 .part2,.div1 .part3,.div1 .part4").css("right","0").show();
  179.                                         div2M();
  180.                                  })
  181.                              })
  182.                          })
  183.                     })    
  184.         }
  185.         function div2M(){
  186.             $(".div2 .part4").animate({
  187.          left:"400px"
  188.                 },1000,'linear',function(){
  189.                     $(".div2 .part3").animate({
  190.                         left:"400px"
  191.                     },1000,'linear',function(){
  192.                         $(".div2 .part2").animate({
  193.                             left:"400px"
  194.                         },1000,'linear',function(){
  195.                             $(".div2 .part1").animate({
  196.                                 left:"400px"
  197.                             },1000,'linear',function(){
  198.                                 $(".div2 .part1,.div2 .part2,.div2 .part3,.div2 .part4").css("left","0").hide();
  199.                                 $(".div1 .part1,.div1 .part2,.div1 .part3,.div1 .part4").css("right","0").show();
  200.                                 div1M();
  201.                          })
  202.                      })
  203.                  })
  204.             })
  205.         }
  206.         function div1M(){
  207.             $(".div1 .part4").animate({
  208.          right:"400px"
  209.                 },1000,'linear',function(){
  210.                     $(".div1 .part3").animate({
  211.                         right:"400px"
  212.                     },1000,'linear',function(){
  213.                         $(".div1 .part2").animate({
  214.                             right:"400px"
  215.                         },1000,'linear',function(){
  216.                             $(".div1 .part1").animate({
  217.                                 right:"400px"
  218.                             },1000,'linear',function(){
  219.                                 $(".div1 .part1,.div1 .part2,.div1 .part3,.div1 .part4").css("right","0").hide();
  220.                                 $(".div4 .part1,.div4 .part2,.div4 .part3,.div4 .part4").css("top","0").show();
  221.                                 $(".div3 .part1,.div3 .part2,.div3 .part3,.div3 .part4").css("top","0").show();
  222.                                 div4M();
  223.                          })
  224.                      })
  225.                  })
  226.             })
  227.         }
  228.         div4M();
  229.     })
  230. </script>
  231. </body>
  232. </html>

阅读(2574) | 评论(0) | 转发(0) |
0

上一篇：Jquery动画实现NBA2015-2016比赛回顾图

下一篇：《已将博客搬至CSDN》

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6