Template:SUSTC/3

From 2012.igem.org

(Difference between revisions)
Line 88: Line 88:
   width:130px;
   width:130px;
  <!-- background-color:black;-->
  <!-- background-color:black;-->
 +
  background-color:#C3D46A ;
}
}
#sustc_menu li ul { /* second-level lists */
#sustc_menu li ul { /* second-level lists */
Line 98: Line 99:
         border-style:solid;
         border-style:solid;
         border-radius: 7px;
         border-radius: 7px;
 +
        background-color:#C3D46A ;
}
}
#sustc_menu li:hover ul
#sustc_menu li:hover ul
Line 106: Line 108:
-
 
+
.ibox
-
 
+
{
-
 
+
  width:900px;
-
/* --------------------------[ The below is just for non-javscript users ]--------------------------*/
+
  height:210px;
-
#nav li li{ float:none; }
+
<!-- background:#ddd;  -->
-
 
+
<!-- margin:3em auto;  -->
-
#nav li li a{ /* Just submenu links*/
+
  margin-top:5em;
-
position:relative;
+
  margin-left:2em;
-
float:none;
+
 +
  border:1em solid #F6C739 ;
 +
  position:relative;
 +
  overflow:hidden;
 +
  z-index:-1;
 +
  border-radius:7px;
}
}
-
 
+
.ibox .showbox{position:absolute;left:0;width:2550px;height:170px;background:#fff;}
-
#nav li ul { /* second-level lists */
+
.ibox .showbox ul li{float:left;margin:7px;}
-
position: absolute;
+
.ibox .showbox ul li img{width:150px;height:150px;border:3px solid #a40000;}
-
width: 10em;
+
.ibox span{position:absolute;padding:2px 5px;background:#fff;cursor:pointer;}
-
margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
+
.ibox span.pre{left:10px;bottom:0;}
-
margin-top:2.2em;
+
.ibox span.next{right:10px;bottom:0;}
 +
.ibox span.num
 +
{
 +
  right:45%;
 +
  bottom:0;
 +
  background:#C3D46A;
 +
  line-height:18px;
 +
}
 +
.ibox span.num li
 +
{
 +
  display:inline;
 +
  margin:0 5px;
 +
  padding:1px 5px;
 +
  line-height:18px;  
}
}
 +
.ibox span.num .numcur{background:#a40000;color:#fff;}
-
/* third-and-above-level lists */
 
-
#nav li ul ul { margin: -1em 0 0 -1000em; }
 
-
#nav li:hover ul ul { margin-left: -1000em; }
 
-
/* lists nested under hovered list items */
 
-
#nav li:hover ul{ margin-left: 0; }
 
-
#nav li li:hover ul { margin-left: 10em; margin-top:-2.5em;}
 
-
 
-
/* extra positioning rules for limited noscript keyboard accessibility */
 
-
#nav li a:focus + ul {  margin-left: 0; margin-top:2.2em; }
 
-
#nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;}
 
-
#nav li li a:focus {left:0;  margin-left:1000em; width:10em;  margin-top:0;}
 
-
#nav li li li a:focus {left:0; margin-left: 2010em; width: 10em;  margin-top:-1em;}
 
-
#nav li:hover a:focus{ margin-left: 0; }
 
-
#nav li li:hover a:focus + ul { margin-left: 10em; }
 
-
 
-
 
-
/* --------------------------[ The above is just for non-javscript users ]--------------------------*/
 
</style>
</style>
 +
<script src="http://www.csrcode.cn/images/jquery-1.4.min.js"></script>
<script type="text/javascript">
<script type="text/javascript">
-
function mainMenuBtnMouseOver()
+
/**
-
{
+
* @author Mr.Think
-
  document.image1.src="https://static.igem.org/mediawiki/2012/0/0f/Arrow_down.gif";
+
* @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)
 +
                }, 500);//改变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>
-
function mainMenuBtnMouseOut()
 
-
{
 
-
  document.image1.src="https://static.igem.org/mediawiki/2012/0/02/Arrow_down_over.gif";
 
-
}
 
-
</script>
 
</head>
</head>
Line 212: Line 299:
   
   
       </div>
       </div>
 +
<br />
 +
<br />
 +
<br />
 +
<div id="demo" class="ibox">
 +
<div class="showbox">
 +
  <ul>
 +
  <li><img src="/images/m01.jpg" alt="demo" title="demo"></li>
 +
  <li><img src="/images/m02.jpg" alt="demo" title="demo"></li>
 +
  <li><img src="/images/m03.jpg" alt="demo" title="demo"></li>
 +
  <li><img src="/images/m01.jpg" alt="demo" title="demo"></li>
 +
  <li><img src="/images/m02.jpg" alt="demo" title="demo"></li>
 +
  <li><img src="/images/m04.jpg" alt="demo" title="demo"></li>
 +
  <li><img src="/images/m05.jpg" alt="demo" title="demo"></li>
 +
  <li><img src="/images/m06.jpg" alt="demo" title="demo"></li>
 +
  <li><img src="/images/m04.jpg" alt="demo" title="demo"></li>
 +
  <li><img src="/images/m05.jpg" alt="demo" title="demo"></li>
 +
  <li><img src="/images/m07.jpg" alt="demo" title="demo"></li>
 +
  <li><img src="/images/m08.jpg" alt="demo" title="demo"></li>
 +
  <li><img src="/images/m09.jpg" alt="demo" title="demo"></li>
 +
  </ul>
 +
</div>
 +
    <span class="pre">«向左滚动</span><span class="next">向右滚动»</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 header-->
 +
 +
 +

Revision as of 11:37, 1 August 2012




  • demo
  • demo
  • demo
  • demo
  • demo
  • demo
  • demo
  • demo
  • demo
  • demo
  • demo
  • demo
  • demo
«向左滚动向右滚动»
  1. 1
  2. 2
  3. 3

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