Template:SUSTC/5

From 2012.igem.org

(Difference between revisions)
(Created page with "<!--#F6C739 土黄色 #C3D46A 深绿色 #00BFFF深天蓝 #FF69B4 hotpink--> <html> <head> <style type="text/css"> body { background-color:#383838; } </style> <styl...")
Line 25: Line 25:
body
body
{
{
-
  background-color:#CCFFCC;
 
-
}
 
-
#sustc_wrapper
 
-
{
 
-
  width:100%;
 
-
  margin:0 auto;
 
-
}
 
-
 
-
#sustc_header
 
-
{
 
-
  height:285px;
 
-
 
-
  border-width:4px;
 
-
  border-color: #FF9900 ;
 
-
  border-style:solid none solid none;
 
-
  background-color:#CCFFCC;
 
-
 
 
   
   
}
}
Line 53: Line 36:
<!--  background-color:yellow;-->
<!--  background-color:yellow;-->
   border-radius: 7px;
   border-radius: 7px;
-
  background-color:#CCFFCC;
+
//  background-color:#CCFFCC;
   
   
}
}
Line 62: Line 45:
   float:left;
   float:left;
   display:block;
   display:block;
-
   margin-left:10px;
+
   margin-left:3px;
  <!-- background-color:green;-->
  <!-- background-color:green;-->
   height:35px;
   height:35px;
-
   width:130px;
+
   width:70px;
-
   border-radius:7px;
+
   border-radius:3px;
   text-align:center;
   text-align:center;
    
    
Line 77: Line 60:
#sustc_menu a
#sustc_menu a
{
{
-
   padding-top:10px;
+
   padding-top:3px;
-
   padding-left:10px;
+
   padding-left:3px;
}
}
#sustc_menu li:hover
#sustc_menu li:hover
{
{
  <!-- background-color:red-->
  <!-- background-color:red-->
-
   border-radius: 7px;
+
   border-radius: 3px;
   text-decoration;
   text-decoration;
-
   background-color:#FF9900;
+
   background-color:#F0FFF0;
}
}
Line 92: Line 75:
{
{
   margin:0;
   margin:0;
-
   padding-bottom:10px;
+
   padding-bottom:3px;
   display:block;
   display:block;
}
}
#sust_menu a:hover
#sust_menu a:hover
{
{
-
   background-color:#FF9900
+
   background-color:#00CED1
}
}
Line 105: Line 88:
   float:none;
   float:none;
   text-align:left;
   text-align:left;
-
   padding-left:10px;
+
   padding-left:5px;
   padding-top:5px;
   padding-top:5px;
-
   width:130px;
+
   width:70px;
  <!-- background-color:black;-->
  <!-- background-color:black;-->
-
   background-color:#C3D46A ;
+
   background-color:#00CED1;
}
}
#sustc_menu li ul { /* second-level lists */
#sustc_menu li ul { /* second-level lists */
position: absolute;
position: absolute;
-
width: 140px;
+
width: 70px;
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
margin-top:2.2em;
margin-top:2.2em;
         border-width:1px;
         border-width:1px;
-
         border-color: #C3D46A ;
+
         border-color:#00CED1 ;
         border-style:solid;
         border-style:solid;
         border-radius: 7px;
         border-radius: 7px;
-
         background-color:#C3D46A ;
+
         background-color:#00CED1;
         z-index:2;
         z-index:2;
}
}
Line 132: Line 115:
   background-color:#FF69B4 ;
   background-color:#FF69B4 ;
}
}
-
 
-
.ibox{width:900px;height:210px;background:#FF9900;margin:1em auto;border:1em solid #ddd;position:relative;overflow:hidden;border-color:#FF9900;  border-radius:7px;
 
-
        z-index:1;}
 
-
.ibox .showbox{position:absolute;left:0;width:2700px;height:170px;background:#fff;border-radius:7px;}
 
-
.ibox .showbox ul li{float:left;margin:7px;list-style:none;}
 
-
.ibox .showbox ul li img{border:3px solid #a40000;}
 
-
.ibox span{position:absolute;padding:2px 5px;background:#fff;cursor:pointer;}
 
-
.ibox span.pre{left:10px;bottom:0;background-color:#00BFFF;border-radius:7px;}
 
-
.ibox span.next{right:10px;bottom:0;background-color:#00BFFF;border-radius:7px;}
 
-
.ibox span.num{right:45%;bottom:0;background:#FF9900;line-height:18px;}
 
-
.ibox span.num li{display:inline;margin:0 5px;padding:1px 5px;line-height:18px;}
 
-
.ibox span.num .numcur{background:#FF69B4;color:#fff;}
 
-
 
-
 
-
 
</style>
</style>
-
<script src="http://www.csrcode.cn/images/jquery-1.4.min.js"></script>
 
-
<script type="text/javascript">
 
-
/**
 
-
* @author Mr.Think
 
-
* @author blog http://mrthink.net
 
-
* @2010.07.23
 
-
* 可自由转载及使用,但请注明版权归属
 
-
*/
 
-
$(function(){
 
-
    //@Mr.Think***变量
 
-
    var $cur = 1;//初始化显示的版面
 
-
    var $i = 5;//每版显示数
 
-
    var $len = $('.showbox>ul>li').length;//计算列表总长度(个数)
 
-
    var $pages = Math.ceil($len / $i);//计算展示版面数量
 
-
    var $w = $('.ibox').width();//取得展示区外围宽度
 
-
    var $showbox = $('.showbox');
 
-
    var $num = $('span.num li')
 
-
    var $pre = $('span.pre')
 
-
    var $next = $('span.next');
 
-
    var $autoFun;
 
-
//@Mr.Think***调用自动滚动
 
-
    autoSlide();
 
-
//@Mr.Think***向前滚动
 
-
    $pre.click(function(){
 
-
        if (!$showbox.is(':animated')) {//判断展示区是否动画
 
-
            if ($cur == 1) {//在第一个版面时,再向前滚动到最后一个版面
 
-
                $showbox.animate({
 
-
                    left: '-=' + $w * ($pages - 1)
 
-
                }, 1000);//改变left值,切换显示版面,500(ms)为滚动时间,下同
 
-
                $cur = $pages;//初始化版面为最后一个版面
 
-
            }
 
-
            else {
 
-
                $showbox.animate({
 
-
                    left: '+=' + $w
 
-
                }, 500);//改变left值,切换显示版面
 
-
                $cur--;//版面累减
 
-
            }
 
-
            $num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur');//为对应的版面数字加上高亮样式,并移除同级元素的高亮样式
 
-
        }
 
-
    });
 
-
    //@Mr.Think***向后滚动
 
-
    $next.click(function(){
 
-
        if (!$showbox.is(':animated')) {//判断展示区是否动画
 
-
            if ($cur == $pages) {//在最后一个版面时,再向后滚动到第一个版面
 
-
                $showbox.animate({
 
-
                    left: 0
 
-
                }, 500);//改变left值,切换显示版面,500(ms)为滚动时间,下同
 
-
                $cur = 1;//初始化版面为第一个版面
 
-
            }
 
-
            else {
 
-
                $showbox.animate({
 
-
                    left: '-=' + $w
 
-
                }, 500);//改变left值,切换显示版面
 
-
                $cur++;//版面数累加
 
-
            }
 
-
            $num.eq($cur - 1).addClass('numcur').siblings().removeClass('numcur');//为对应的版面数字加上高亮样式,并移除同级元素的高亮样式
 
-
        }
 
-
    });
 
-
    //@Mr.Think***数字点击事件
 
-
    $num.click(function(){
 
-
        if (!$showbox.is(':animated')) {//判断展示区是否动画
 
-
            var $index = $num.index(this);//索引出当前点击在列表中的位置值
 
-
            $showbox.animate({
 
-
                left: '-' + ($w * $index)
 
-
            }, 500);//改变left值,切换显示版面,500(ms)为滚动时间
 
-
            $cur = $index + 1;//初始化版面值,这一句可避免当滚动到第三版时,点击向后按钮,出面空白版.index()取值是从0开始的,故加1
 
-
            $(this).addClass('numcur').siblings().removeClass('numcur');//为当前点击加上高亮样式,并移除同级元素的高亮样式
 
-
        }
 
-
    });
 
-
    //@Mr.Think***停止滚动
 
-
    clearFun($showbox);
 
-
    clearFun($pre);
 
-
    clearFun($next);
 
-
    clearFun($num);
 
-
    //@Mr.Think***事件划入时停止自动滚动
 
-
    function clearFun(elem){
 
-
        elem.hover(function(){
 
-
            clearAuto();
 
-
        }, function(){
 
-
            autoSlide();
 
-
        });
 
-
    }
 
-
    //@Mr.Think***自动滚动
 
-
    function autoSlide(){
 
-
        $next.trigger('click');
 
-
        $autoFun = setTimeout(autoSlide, 3000);//此处不可使用setInterval,setInterval是重复执行传入函数,这会引起第二次划入时停止失效
 
-
    }
 
-
    //@Mr.Think***清除自动滚动
 
-
    function clearAuto(){
 
-
        clearTimeout($autoFun);
 
-
    }
 
-
});
 
-
</script>
 
</head>
</head>
-
<body class="bkcolor" >
+
<body >
-
<div id="sustc_wrapper">
+
-
  <div id="sustc_header">
+
     <div id="sustc_menu">
     <div id="sustc_menu">
   
   
Line 299: Line 172:
   
   
       </div>
       </div>
-
 
-
<div id="demo" class="ibox">
 
-
<div class="showbox">
 
-
  <ul>
 
-
  <li ><a href="http://www.sustc.edu.cn/"><img src="https://static.igem.org/mediawiki/2012/3/38/SUSTC_Logo.jpg" alt="logo of SUSTC" title="logo of SUSTC"
 
-
              style="margin-top:40px" width="200px"  height="60px"/>    </a></li>
 
-
 
-
    <li ><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A"><img src="https://static.igem.org/mediawiki/2012/b/bd/Team_logo.png" alt="Team logo"
 
-
            title="Team logo" style="margin-top:-3px" width="130px"  height="150px"/>    </a></li>
 
-
 
-
    <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Project"><img src="https://static.igem.org/mediawiki/2012/3/33/Search_page.png" alt="search page"
 
-
            title="search page" style="margin-top:-3px" width="80px"  height="150px"></a></li>
 
-
 
 
-
    <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Project"><img src="https://static.igem.org/mediawiki/2012/2/2e/Detail_search_result_page.png "
 
-
          alt="search result page" title="search result page" style="margin-top:-3px" width="80px"  height="150px"></a></li>
 
-
 
-
    <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Project"><img src="https://static.igem.org/mediawiki/2012/8/84/Part_device_page.png" alt="category page"
 
-
            title="category page" style="margin-top:-3px" width="80px"  height="150px"></a></li>
 
-
 
-
    <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Project"><img src="https://static.igem.org/mediawiki/2012/1/1f/Help_page.png " alt="help page"
 
-
            title="help page" style="margin-top:-3px" width="80px"  height="150px"></a></li>
 
-
 
-
    <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Project"><img src="https://static.igem.org/mediawiki/2012/4/47/Bookmark_page.png  " alt="bookmark page"
 
-
            title="bookmark page" style="margin-top:-3px" width="80px"  height="150px"></a></li>
 
-
 
-
  <li><img src="https://static.igem.org/mediawiki/2012/1/14/IMG_1180change%281%29.jpg" alt="Trip to BGI" title="Trip to BGI" style="margin-top:-3px" width="260px" 
 
-
            height="150px"></li>
 
-
 
-
  <li><a href="https://2012.igem.org/Team:SUSTC-Shenzhen-A/Team"><img src="https://static.igem.org/mediawiki/2012/a/a3/SUSTC-Shenzhen-A_team.png" alt="Team"
 
-
            title="We are working" style="margin-top:-3px" width="260px"  height="150px"></a></li>
 
-
 
-
  <li ><a href="http://www.sustc.edu.cn/"><img  src="https://static.igem.org/mediawiki/2012/d/d4/Logo.jpg" alt="SUSTC" title="SUSTC"  style="margin-top:20px"
 
-
            width="200px"  height="100px"/></a></li>
 
-
 
-
  <li ><a href="http://www.sustc.edu.cn/"><img  src="https://static.igem.org/mediawiki/2012/a/aa/School_view.jpg " alt="SUSTC" title="SUSTC"  style="margin-top:20px"
 
-
            width="200px"  height="100px"/></a></li>
 
-
 
-
  <li><img src="/images/m04.jpg" alt="demo" title="demo"></li>
 
-
  <li><img src="/images/m05.jpg" alt="demo" title="demo"></li>
 
-
  </ul>
 
-
</div>
 
-
    <span class="pre">&lt;&lt;Roll to the left</span><span class="next">Roll to the right&gt;&gt;</span><span class="num"><ol><li class="numcur">1</li><li>2</li><li>3</li></ol></sapn>
 
-
</div>
 
-
 
-
 
-
  </div>    <!--end of header-->
 
-
 
-
 
-
 
-
</div>      <!--end of wrapper-->
 

Revision as of 19:42, 20 September 2012

Retrieved from "http://2012.igem.org/Template:SUSTC/5"