圆形图片切换效果

来源：互联网发布：配音秀软件编辑：程序博客网时间：2024/05/30 04:06

圆形图片切换效果

这个效果是我在qq空间的一个婚纱广告的图片切换效果，感觉很漂亮

贴代码

html 部分

<body> <div class="div5"> <div class="radius radius0"> <div class="pic0 pic"></div> </div> <div class="radius radius1"> <div class="pic1 pic"></div> </div> <div class="radius radius2"> <div class="pic2 pic"></div> </div> <div class="radius radius3"> <div class="pic3 pic"></div> </div> <div class="radius radius4"> <div class="pic4 pic"></div> </div> <div class="radius radius5"> <div class="pic5 pic"></div> </div> <div class="radius radius6"> <div class="pic6 pic"></div> </div> <div class="radius radius7"> <div class="pic7 pic"></div> </div> <div class="radius radius8"> <div class="pic8 pic"></div> </div> <div class="radius radius9"> <div class="pic9 pic"></div> </div> <div class="radius radius10"> <div class="pic10 pic"></div> </div> <div class="radius radius11"> <div class="pic11 pic"></div> </div> </div> </body>

css部分

body{ width: 1920px; height: 1080px; position: relative; overflow: hidden; } .div5{ position: absolute; width: 1920px; height: 1080px; z-index: 50; top:0; left: 0; opacity: 1; } .div5 .pic{ width: 869px; height: 669px; background-size: 869px 669px; position: absolute; background-repeat: no-repeat; top: 196px; left: 121px; } .div5 .pic0{ background-image:url(images/t1-1.png) ; } .div5 .pic1{ background-image: url(images/t1-2.png) ; } .div5 .pic2{ background-image: url(images/t1-3.png) ; } .div5 .pic3{ background-image: url(images/46.png) ; } .div5 .pic4{ background-image: url(images/47.png) ; } .div5 .pic5{ background-image: url(images/48.png) ; } .div5 .pic6{ background-image: url(images/49.png) ; } .div5 .pic7{ background-image: url(images/50.png) ; } .div5 .pic8{ background-image: url(images/51.png) ; } .div5 .pic9{ background-image: url(images/52.png) ; } .div5 .pic10{ background-image: url(images/53.png) ; } .div5 .pic11{ background-image: url(images/54.png) ; } .div5 .radius{ width: 0px; height: 0px; border-radius: 50%; position: absolute; top:0px; left:0px; overflow: hidden; } .div5 .radius1{ width: 1100px; height: 1100px; } </style>

js部分

function div5(){ var timer=null; var b=0; timer=setInterval(function(){ b++; $(".div5 .radius"+b).animate({"width":"1100px","height":"1100px"},1500); if(b==12){ clearInterval(timer) } },6000) } div5()

阅读全文

0 0