|
|
Line 1: |
Line 1: |
- | <!DOCTYPE HTML> | + | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
- | <html lang=zh-cn> | + | <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> | | <head> |
- | <title>带TAB切换的css3幻灯片</title> | + | <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> |
- | <style> | + | <title>当前页面查看原图</title> |
- | *{margin:0px;padding:0px;}
| + | <style type="text/css"> |
- | body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
| + | div, ul, li { |
- | .tips{width:702px;margin:0 auto;line-height:24px;padding-top:10px;}
| + | margin: 0px; |
- | .bredcolor{color:#fff;}
| + | padding: 0px; |
- | .radiogallery {position:relative; padding:0; margin:50px auto; width:599px; height:492px; border:5px solid #000; border-top-width:1px; overflow:hidden; background:#000; border-radius:5px;}
| + | list-style-type: none; |
- | .radiogallery input {display:none;}
| + | |
- | .radiogallery label {display:block; width:99px; height:66px; border-right:1px solid #fff; border-top:1px solid #fff; float:left; cursor:pointer;}
| + | |
- | .radiogallery label img{width:99px;height:66px;}
| + | |
- | .radiogallery label.set {width:149px; height:25px; position:absolute; top:0; border-top:0; background:#000; border-right:1px solid #fff; border-bottom:1px solid #fff; font:bold 14px/24px arial, sans-serif; color:#fff; text-align:center;}
| + | |
- | .radiogallery label.pos4 {left:0;}
| + | |
- | .radiogallery label.pos3 {left:150px;}
| + | |
- | .radiogallery label.pos2 {left:300px;}
| + | |
- | .radiogallery label.pos1 {left:450px; border-right:0;}
| + | |
- | .radiogallery label.set img {width:150px; height:25px; display:block; position:absolute; left:0; top:0;}
| + | |
- | .radiogallery input#push1,
| + | |
- | .radiogallery input#push2,
| + | |
- | .radiogallery input#push3,
| + | |
- | .radiogallery input#push4 {display:block; margin:0; padding:0; border:0; width:599px; height:56px; opacity:0; filter: alpha(opacity=0);
| + | |
- | -webkit-transition:1s; | + | |
- | -moz-transition:1s; | + | |
- | -ms-transition:1s; | + | |
- | -o-transition:1s;
| + | |
- | transition:1s;
| + | |
| } | | } |
- | | + | #Over { |
- | .radiogallery label.p6 {border-right:0;}
| + | position: absolute; |
- | .radiogallery section.large {position:absolute; left:0; top:26px; width:599px; height:399px; text-align:center; opacity:0; filter: alpha(opacity=0); z-index:100; overflow:hidden;
| + | width: 100%; |
- | -webkit-transition:1s; | + | z-index: 100; |
- | -moz-transition:1s; | + | left: 0px; |
- | -ms-transition:1s;
| + | top: 0px; |
- | -o-transition:1s;
| + | |
- | transition:1s;
| + | |
| } | | } |
- | .radiogallery section.large section {position:absolute; left:0; top:-399px; width:499px; height:299px; background:url(); z-index:300; padding:50px; | + | |
- | -webkit-transition:1s 1s; | + | .img { |
- | -moz-transition:1s 1s; | + | width:90%; |
- | -ms-transition:1s 1s; | + | background-color: #FFF; |
- | -o-transition:1s1s; | + | height: 90%; |
- | transition:1s 1s; | + | padding: 3px; |
| + | border-top-width: 1px; |
| + | border-right-width: 1px; |
| + | border-bottom-width: 1px; |
| + | border-left-width: 1px; |
| + | border-top-style: solid; |
| + | border-right-style: solid; |
| + | border-bottom-style: solid; |
| + | border-left-style: solid; |
| + | } |
| + | |
| + | .content { |
| + | text-align: center; |
| + | width: 400px; |
| + | height:300px; |
| + | margin-right: auto; |
| + | margin-left: auto; |
| + | } |
| + | .EnlargePhoto { |
| + | cursor: pointer; |
| + | } |
| + | .TempContainer { |
| + | position: absolute; |
| + | z-index: 101; |
| + | margin-right: 0px; |
| + | margin-left: 0px; |
| + | text-align: center; |
| + | width: 100%; |
| + | cursor: pointer; |
| } | | } |
- | .radiogallery section.large section h1 {padding:0; margin:0; font:normal 20px/40px arial,sans-serif; color:#fff;}
| |
- | .radiogallery section.large section p {padding:0; margin:0; font:normal 14px/25px arial,sans-serif; color:#ddd; text-align:left;}
| |
- | .radiogallery section.large section ol li {padding:0; margin:0; font:normal 14px/25px arial,sans-serif; color:#ddd; text-align:left;}
| |
- | .radiogallery section.large section a {padding:0; margin:0; font:normal 14px/25px arial,sans-serif; color:#0cf;}
| |
- | .radiogallery section.large section a:hover {text-decoration:none;}
| |
- | .radiogallery section.large:hover section {top:0;}
| |
- | .radiogallery #cover {display:block; background:#fff; width:599px; height:399px; position:absolute; left:0; top:26px; z-index:90;}
| |
- | .radiogallery input#pic1:checked ~ section.pic1,
| |
- | .radiogallery input#pic2:checked ~ section.pic2,
| |
- | .radiogallery input#pic3:checked ~ section.pic3,
| |
- | .radiogallery input#pic4:checked ~ section.pic4,
| |
- | .radiogallery input#pic5:checked ~ section.pic5,
| |
- | .radiogallery input#pic6:checked ~ section.pic6,
| |
- | .radiogallery input#pic1a:checked ~ section.pic1a,
| |
- | .radiogallery input#pic2a:checked ~ section.pic2a,
| |
- | .radiogallery input#pic3a:checked ~ section.pic3a,
| |
- | .radiogallery input#pic4a:checked ~ section.pic4a,
| |
- | .radiogallery input#pic5a:checked ~ section.pic5a,
| |
- | .radiogallery input#pic6a:checked ~ section.pic6a,
| |
- | .radiogallery input#pic1b:checked ~ section.pic1b,
| |
- | .radiogallery input#pic2b:checked ~ section.pic2b,
| |
- | .radiogallery input#pic3b:checked ~ section.pic3b,
| |
- | .radiogallery input#pic4b:checked ~ section.pic4b,
| |
- | .radiogallery input#pic5b:checked ~ section.pic5b,
| |
- | .radiogallery input#pic6b:checked ~ section.pic6b,
| |
- | .radiogallery input#pic1c:checked ~ section.pic1c,
| |
- | .radiogallery input#pic2c:checked ~ section.pic2c,
| |
- | .radiogallery input#pic3c:checked ~ section.pic3c,
| |
- | .radiogallery input#pic4c:checked ~ section.pic4c,
| |
- | .radiogallery input#pic5c:checked ~ section.pic5c,
| |
- | .radiogallery input#pic6c:checked ~ section.pic6c {opacity:1; filter: alpha(opacity=100); z-index:200;}
| |
- | .radiogallery input#push4:checked {height:56px;}
| |
- | .radiogallery input#push3:checked {height:123px;}
| |
- | .radiogallery input#push2:checked {height:190px;}
| |
- | .radiogallery input#push1:checked {height:257px;}
| |
- | .radiogallery input#push1:checked + label,
| |
- | .radiogallery input#push2:checked + label,
| |
- | .radiogallery input#push3:checked + label,
| |
- | .radiogallery input#push4:checked + label {color:#6cf;}
| |
- | .radiogallery input:checked + label img {opacity:0.3; filter: alpha(opacity=30);}
| |
- | .radiogallery input.pics + label:hover img {opacity:0.7; filter: alpha(opacity=70);}
| |
- | .radiogallery input:checked + label:hover img {opacity:0.3; filter: alpha(opacity=30);}
| |
| </style> | | </style> |
| </head> | | </head> |
| + | <script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script> |
| + | <script type="text/javascript"> |
| + | $(document).ready(function(e) { |
| + | var ImgsTObj = $('.EnlargePhoto');//class=EnlargePhoto的都是需要放大的图像 |
| + | if(ImgsTObj){ |
| + | $.each(ImgsTObj,function(){ |
| + | $(this).click(function(){ |
| + | var currImg = $(this); |
| + | CoverLayer(1); |
| + | var TempContainer = $('<div class=TempContainer></div>'); |
| + | with(TempContainer){ |
| + | appendTo("body"); |
| + | css('top',currImg.offset().top); |
| + | html('<img border=0 src=' + currImg.attr('src') + '>'); |
| + | } |
| + | TempContainer.click(function(){ |
| + | $(this).remove(); |
| + | CoverLayer(0); |
| + | }); |
| + | }); |
| + | }); |
| + | } |
| + | else{ |
| + | return false; |
| + | } |
| + | |
| + | //====== 使用/禁用蒙层效果 ======== |
| + | function CoverLayer(tag){ |
| + | with($('#Over')){ |
| + | if(tag==1){ |
| + | css('height',$(document).height()); |
| + | css('display','block'); |
| + | css('opacity',0.9); |
| + | css("background-color","#000"); |
| + | } |
| + | else{ |
| + | css('display','none'); |
| + | } |
| + | } |
| + | } |
| + | }); |
| + | |
| + | |
| + | </script> |
| <body> | | <body> |
- | <section class="radiogallery"> | + | <div class="content"> |
- | <input type="radio" name="push" id="push1" class="pusher"><label for="push1" class="set pos1"><span>Set 4</span></label>
| + | <IMG class="img EnlargePhoto" src="/jscss/demoimg/wall5.jpg"><br /><br /> |
- | <input type="radio" name="push" id="push2" class="pusher"><label for="push2" class="set pos2"><span>Set 3</span></label>
| + | <IMG class="img EnlargePhoto" src="/jscss/demoimg/wall3.jpg"><br /><br /> |
- | <input type="radio" name="push" id="push3" class="pusher"><label for="push3" class="set pos3"><span>Set 2</span></label>
| + | </div> |
- | <input type="radio" name="push" id="push4" class="pusher" checked="checked"><label for="push4" class="set pos4"><span>Set 1</span></label>
| + | |
- | | + | |
- | <input type="radio" name="pic" id="pic1" class="pics"><label for="pic1"><img src="/jscss/demoimg/wall_s1.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic2" class="pics"><label for="pic2"><img src="/jscss/demoimg/wall_s2.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic3" class="pics"><label for="pic3"><img src="/jscss/demoimg/wall_s3.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic4" class="pics"><label for="pic4"><img src="/jscss/demoimg/wall_s4.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic5" class="pics"><label for="pic5"><img src="/jscss/demoimg/wall_s5.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic6" class="pics"><label for="pic6" class="p6"><img src="/jscss/demoimg/wall_s6.jpg" alt=""></label>
| + | |
- | | + | |
- | <input type="radio" name="pic" id="pic1a" class="pics"><label for="pic1a"><img src="/jscss/demoimg/wall_s7.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic2a" class="pics"><label for="pic2a"><img src="/jscss/demoimg/wall_s8.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic3a" class="pics"><label for="pic3a"><img src="/jscss/demoimg/wall_s9.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic4a" class="pics"><label for="pic4a"><img src="/jscss/demoimg/wall_s10.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic5a" class="pics"><label for="pic5a"><img src="/jscss/demoimg/wall_s4.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic6a" class="pics"><label for="pic6a" class="p6"><img src="/jscss/demoimg/wall_s5.jpg" alt=""></label>
| + | |
- | | + | |
- | <input type="radio" name="pic" id="pic1b" class="pics"><label for="pic1b"><img src="/jscss/demoimg/wall_s1.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic2b" class="pics"><label for="pic2b"><img src="/jscss/demoimg/wall_s2.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic3b" class="pics"><label for="pic3b"><img src="/jscss/demoimg/wall_s3.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic4b" class="pics"><label for="pic4b"><img src="/jscss/demoimg/wall_s4.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic5b" class="pics"><label for="pic5b"><img src="/jscss/demoimg/wall_s5.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic6b" class="pics"><label for="pic6b" class="p6"><img src="/jscss/demoimg/wall_s6.jpg" alt=""></label>
| + | |
- | | + | |
- | <input type="radio" name="pic" id="pic1c" class="pics" checked="checked"><label for="pic1c"><img src="/jscss/demoimg/wall_s7.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic2c" class="pics"><label for="pic2c"><img src="/jscss/demoimg/wall_s8.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic3c" class="pics"><label for="pic3c"><img src="/jscss/demoimg/wall_s9.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic4c" class="pics"><label for="pic4c"><img src="/jscss/demoimg/wall_s10.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic5c" class="pics"><label for="pic5c"><img src="/jscss/demoimg/wall_s4.jpg" alt=""></label>
| + | |
- | <input type="radio" name="pic" id="pic6c" class="pics"><label for="pic6c" class="p6"><img src="/jscss/demoimg/wall_s5.jpg" alt=""></label>
| + | |
- | | + | |
- | | + | |
- | | + | |
- | <section class="pic1 large"><img src="/jscss/demoimg/wall1.jpg" alt=""><section>
| + | |
- | <h1>Photograph #1 - set #4</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic2 large"><img src="/jscss/demoimg/wall2.jpg" alt=""><section>
| + | |
- | <h1>Photograph #2 - set #4</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic3 large"><img src="/jscss/demoimg/wall3.jpg" alt=""><section>
| + | |
- | <h1>Photograph #3 - set #4</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic4 large"><img src="/jscss/demoimg/wall4.jpg" alt=""><section>
| + | |
- | <h1>Photograph #4 - set #4</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic5 large"><img src="/jscss/demoimg/wall5.jpg" alt=""><section>
| + | |
- | <h1>Photograph #5 - set #4</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic6 large"><img src="/jscss/demoimg/wall6.jpg" alt=""><section>
| + | |
- | <h1>Photograph #6 - set #4</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic1a large"><img src="/jscss/demoimg/wall7.jpg" alt=""><section>
| + | |
- | <h1>Photograph #1 - set #3</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic2a large"><img src="/jscss/demoimg/wall8.jpg" alt=""><section>
| + | |
- | <h1>Photograph #2 - set #3</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic3a large"><img src="/jscss/demoimg/wall9.jpg" alt=""><section>
| + | |
- | <h1>Photograph #3 - set #3</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic4a large"><img src="/jscss/demoimg/wall10.jpg" alt=""><section>
| + | |
- | <h1>Photograph #4 - set #3</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic5a large"><img src="/jscss/demoimg/wall4.jpg" alt=""><section>
| + | |
- | <h1>Photograph #5 - set #3</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic6a large"><img src="/jscss/demoimg/wall5.jpg" alt=""><section>
| + | |
- | <h1>Photograph #6 - set #3</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic1b large"><img src="/jscss/demoimg/wall7.jpg" alt=""><section>
| + | |
- | <h1>Photograph #1 - set #2</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic2b large"><img src="/jscss/demoimg/wall8.jpg" alt=""><section>
| + | |
- | <h1>Photograph #2 - set #2</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic3b large"><img src="/jscss/demoimg/wall9.jpg" alt=""><section>
| + | |
- | <h1>Photograph #3 - set #2</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic4b large"><img src="/jscss/demoimg/wall10.jpg" alt=""><section>
| + | |
- | <h1>Photograph #4 - set #2</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic5b large"><img src="/jscss/demoimg/wall4.jpg" alt=""><section>
| + | |
- | <h1>Photograph #5 - set #2</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic6b large"><img src="/jscss/demoimg/wall5.jpg" alt=""><section>
| + | |
- | <h1>Photograph #6 - set #2</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic1c large"><img src="/jscss/demoimg/wall7.jpg" alt=""><section>
| + | |
- | <h1>Photograph #1 - set #1</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic2c large"><img src="/jscss/demoimg/wall8.jpg" alt=""><section>
| + | |
- | <h1>Photograph #2 - set #1</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic3c large"><img src="/jscss/demoimg/wall9.jpg" alt=""><section>
| + | |
- | <h1>Photograph #3 - set #1</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic4c large"><img src="/jscss/demoimg/wall10.jpg" alt=""><section>
| + | |
- | <h1>Photograph #4 - set #1</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic5c large"><img src="/jscss/demoimg/wall4.jpg" alt=""><section>
| + | |
- | <h1>Photograph #5 - set #1</h1>
| + | |
- | </section></section>
| + | |
- | <section class="pic6c large"><img src="/jscss/demoimg/wall5.jpg" alt=""><section>
| + | |
- | <h1>Photograph #6 - set #1</h1>
| + | |
- | </section></section>
| + | |
- | <span id="cover"></span>
| + | |
- | </section> | + | |
| </body> | | </body> |
| </html> | | </html> |