Team:LZU-China/tempfortest

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+
<!DOCTYPE HTML>
-
<html>
+
<html lang=zh-cn>
-
        <head>
+
<head>
-
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
<meta charset=utf-8>
-
                <title>图片提示效果</title>
+
<title>纯css3手风琴效果</title>
-
                <script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script>
+
<style>
-
                <style type="text/css">
+
*{margin:0px;padding:0px;}
-
                  body{margin:0 ;padding:40px;line-height:180%;}
+
body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}
-
                  img{border:none;}
+
b#p1, b#p2, b#p3, b#p4, b#p5 {display:none;}
-
                  ul,li{margin:0 ;padding:0;}
+
#accordian {padding:0; margin:20px auto; list-style:none; width:730px; height:300px; overflow:hidden; position:relative; border:1px solid #682;}
-
                  li{list-style:none;display:inline; border:1px solid #999;float:left; margin-right:10px;}
+
#accordian li {width:50px; height:300px; float:left;
-
                  /*tooltip*/
+
-moz-transition: 0.7s;
-
                  #tooltip{position:absolute;border:1px solid #CCC;display:none;color:#FFF; padding:2px; background:#333;}
+
-ms-transition: 0.7s;
-
                </style>
+
-o-transition: 0.7s;
-
                <script type="text/javascript">
+
-webkit-transition: 0.7s;
-
                        $(function(){
+
transition: 0.7s;
-
                                var x = 10;
+
}
-
                                var y = 20;
+
#accordian div {width:530px; height:300px; position:relative;}
-
            $("a.tooltip").mouseover(function(e){
+
#accordian div span {display:block; background:rgba(0,0,0,.3); width:460px; height:30px; position:absolute; bottom:300px; right:0; padding:10px; color:#fff; font:normal 13px/30px 'georgia', serif; border-top:1px solid #000;
-
                      this.myTitle = this.title;
+
}
-
                          this.title = "";
+
#accordian div span a {color:#fff;}
-
                      var imgTitle = this.myTitle?"<br>"+ this.myTitle : "";
+
#accordian li div > a {display:block; width:49px; height:300px; float:left; position:relative; color:#fff; text-decoration:none;box-shadow:-10px 0 10px -10px rgba(0,0,0,0.6);}
-
                      var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素
+
#accordian li div > a b {display:block; width:280px; padding-left:20px; height:50px; position:absolute; left:50px; bottom:0; font:bold 24px/50px 'georgia', serif; text-shadow:0 0 2px rgba(0, 0, 0, 0.6);
-
                        $("body").append(tooltip);       //把它追加到文档中
+
transform: rotate(-90deg);
-
                        $("#tooltip").css({
+
transform-origin:bottom left;
-
                                  "top": (e.pageY+y) + "px",
+
-ms-transform: rotate(-90deg);
-
                                  "left": (e.pageX+x)  + "px"
+
-ms-transform-origin:bottom left;
-
                          }).fadeIn(600);         //设置x坐标和y坐标，并且显示
+
-webkit-transform: rotate(-90deg);
-
            }).mouseout(function(){
+
-webkit-transform-origin:bottom left;
-
                        this.title = this.myTitle;
+
-moz-transform: rotate(-90deg);
-
                        $("#tooltip").remove();         //移除
+
-moz-transform-origin:bottom left;
-
              }).mousemove(function(e){
+
-o-transform: rotate(-90deg);
-
                          $("#tooltip").css({
+
-o-transform-origin:bottom left;
-
                                "top": (e.pageY+y) + "px",
+
}
-
                                "left": (e.pageX+x)  + "px"
+
#accordian li div > a b {*left:0;}
-
                        });
+
#accordian li img {display:block; float:left;}
-
                });
+
#accordian li.p1 {width:530px;}
-
                })
+
#accordian li.p1 div span {bottom:0;}
-
                </script>
+
#accordian li a.a1 {background:#460; border-left:1px solid #682;}
-
        </head>
+
#accordian li a.a2 {background:#793; border-left:1px solid #9b5;}
-
    <body>
+
#accordian li a.a3 {background:#ac3; border-left:1px solid #ce5;}
-
          <h3>效果</h3>
+
#accordian li a.a4 {background:#cd5; border-left:1px solid #ef7;}
-
                <ul>
+
#accordian li a.a5 {background:#069; border-left:1px solid #28b;}
-
                <li><a class="tooltip" title="苹果 iPod" href="/jscss/demoimg/wall1.jpg"><img src="/jscss/demoimg/wall_s1.jpg" alt="苹果 iPod"></a></li>
+
#p1:target ~ #accordian li {width:50px;}
-
                <li><a class="tooltip" title="苹果 iPod nano" href="/jscss/demoimg/wall2.jpg"><img src="/jscss/demoimg/wall_s2.jpg" alt="苹果 iPod nano"></a></li>
+
#p1:target ~ #accordian li div span {bottom:300px;}
-
                <li><a class="tooltip" title="苹果 iPone" href="/jscss/demoimg/wall3.jpg"><img src="/jscss/demoimg/wall_s3.jpg" alt="苹果 iPone"></a></li>
+
#p1:target ~ #accordian li.p1 {width:530px;}
-
                <li><a class="tooltip" title="苹果 Mac" href="/jscss/demoimg/wall4.jpg"><img src="/jscss/demoimg/wall_s4.jpg" alt="苹果 Mac"></a></li>
+
#p1:target ~ #accordian li.p1 div span {bottom:0;}
-
            </ul>
+
#p2:target ~ #accordian li {width:50px;}
-
        </body>
+
#p2:target ~ #accordian li div span {bottom:300px;}
 +
#p2:target ~ #accordian li.p2 {width:530px;}
 +
#p2:target ~ #accordian li.p2 div span {bottom:0;}
 +
#p3:target ~ #accordian li {width:50px;}
 +
#p3:target ~ #accordian li div span {bottom:300px;}
 +
#p3:target ~ #accordian li.p3 {width:530px;}
 +
#p3:target ~ #accordian li.p3 div span {bottom:0;}
 +
#p4:target ~ #accordian li {width:50px;}
 +
#p4:target ~ #accordian li div span {bottom:300px;}
 +
#p4:target ~ #accordian li.p4 {width:530px;}
 +
#p4:target ~ #accordian li.p4 div span {bottom:0;}
 +
#p5:target ~ #accordian li {width:50px;}
 +
#p5:target ~ #accordian li div span {bottom:300px;}
 +
#p5:target ~ #accordian li.p5 {width:530px;}
 +
#p5:target ~ #accordian li.p5 div span {bottom:0;}
 +
</style>
 +
</head>
 +
<body>
 +
<div id="info">
 +
<b id="p1"></b>
 +
<b id="p2"></b>
 +
<b id="p3"></b>
 +
<b id="p4"></b>
 +
<b id="p5"></b>
 +
<ul id="accordian">
 +
<li class="p1">
 +
<div>
 +
<a class="a1" href="#p1"><b>MYNAME</b></a>
 +
<img src="/jscss/demoimg/201209/pic1.jpg" alt="" title="">
 +
<span>幻灯片一的介绍</span>
 +
</div>
 +
</li>
 +
<li class="p2">
 +
<div>
 +
<a class="a2" href="#p2"><b>HOME</b></a>
 +
<img src="/jscss/demoimg/201209/pic2.jpg" alt="" title="">
 +
<span>幻灯片二的介绍</span>
 +
</div>
 +
</li>
 +
<li class="p3">
 +
<div>
 +
<a class="a3" href="#p3"><b>THIS</b></a>
 +
<img src="/jscss/demoimg/201209/pic3.jpg" alt="" title="">
 +
<span>幻灯片三的介绍</span>
 +
</div>
 +
</li>
 +
<li class="p4">
 +
<div>
 +
<a class="a4" href="#p4"><b>ZOUQILAI</b></a>
 +
<img src="/jscss/demoimg/201209/pic4.jpg" alt="" title="">
 +
<span>幻灯片三的介绍</span>
 +
</div>
 +
</li>
 +
<li class="p5">
 +
<div>
 +
<a class="a5" href="#p5"><b>FINISH</b></a>
 +
<img src="/jscss/demoimg/201209/pic5.jpg" alt="" title="">
 +
<span>幻灯片四的介绍</span>
 +
</div>
 +
</li>
 +
</ul>
 +
</div>
 +
</body>
</html>
</html>

Revision as of 09:28, 6 September 2014

<!DOCTYPE HTML> 纯css3手风琴效果

  • MYNAME 幻灯片一的介绍
  • HOME 幻灯片二的介绍
  • THIS 幻灯片三的介绍
  • ZOUQILAI 幻灯片三的介绍
  • FINISH 幻灯片四的介绍

Retrieved from "http://2014.igem.org/Team:LZU-China/tempfortest"