Team:LZU-China/tempfortest

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
<!DOCTYPE html>
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
<html>
<head>
<head>
-
<title>响应式图片切换jQuery选项卡</title>
+
<title>cxSlide带缩略图和描述焦点图</title>
<style>
<style>
-
html,body,div,img,q,dl,dt,dd,ol,ul,li{margin:0;padding:0;}
+
*{margin:0;padding:0;list-style:none;}
-
img,a img{border-style:none;border-width:0;}
+
img{border:0;}
-
a,a:hover{ text-decoration:none}
+
/*焦点图 透明过度*/
-
html {margin:0 auto;}
+
.slide_fade{overflow:hidden;position:relative;margin:20px auto;width:960px;height:370px;background:#bbb;}
-
ol,ul,li{list-style: none;}:focus{outline: 0;}
+
.slide_fade .box{overflow:hidden;position:relative;width:960px;height:270px;background:#000;z-index:4;}
-
body{background-color:#eef9f8; color:#666}
+
.slide_fade .box a{color:#fff;}
-
a,a:visited{ color:#666}
+
.slide_fade .box a:hover{text-decoration:none;}
-
a:hover {color:#009966;}
+
.slide_fade .list{overflow:hidden;height:9999px;}
-
.main{ font-family:宋体; color:#666; width:912px; margin:0 auto}
+
.slide_fade .list li{position:relative;width:960px;height:270px;}
-
.slider-scroll{margin-top:12px; overflow:hidden;height:421px;}
+
.slide_fade .list img{_vertical-align:top;}
-
#showArea{ width:664px; float:left;height:419px;border:1px solid #bebebe; border-right:none}
+
.slide_fade .txt{cursor:pointer;position:absolute;top:20px;left:45px;font:14px/24px "\5fae\8f6f\96c5\9ed1";}
-
#showArea img{ opacity:0; display:none;}
+
.slide_fade .txt h3{font:40px/80px "\5fae\8f6f\96c5\9ed1";}
-
#scrollDiv{float:left; width:246px; height:421px; background:url(/jscss/demoimg/201402/slider_side.jpg) 0 0 no-repeat}
+
.slide_fade .btn{position:absolute;bottom:0;left:0;height:97px;background:#fff;z-index:5;}
-
#scrollDiv ul{ padding:19px 0 0 0}
+
.slide_fade .btn a{color:#555;text-decoration:none;}
-
#scrollDiv li{width:220px;height:57px;padding:10px 0 10px 26px; cursor:pointer; font-family:微软雅黑;}
+
.slide_fade .btn li{overflow:hidden;float:left;width:150px;height:90px;margin:0 0 0 12px;padding-top:7px;color:#333;
-
#scrollDiv li.on{ background:#003030; position:relative;}
+
_margin:0 10px 0 0;_height:87px;}
-
#scrollDiv li a{display:block; font-size:16px; height:35px; line-height:35px; color:#fff;}
+
.slide_fade .btn li:first-child{margin-left:0;}
-
#scrollDiv li span{display:block; color:#66ffff; font-size:14px; height:15px; line-height:15px; }
+
.slide_fade .btn .selected{position:relative;top:-3px;border-top:3px solid #f32465;}
-
#scrollDiv li span.entity-triangle{ display:none; }
+
.slide_fade .btn h3{padding:4px 0 0 0;font:12px/20px "\5b8b\4f53";text-indent:2px;}
-
#scrollDiv li.on span.entity-triangle{position:absolute; top:31px; left:-6px; display:block; width:6px; height:22px;z-index:99;}
+
.slide_fade .btn p{color:#999;font:12px/20px "\5b8b\4f53";text-indent:2px;}
 +
.slide_fade .btn p a{color:#999;}
 +
.slide_fade .btn p a:hover{text-decoration:underline;}
</style>
</style>
-
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
 
-
<script type="text/javascript">
 
-
$.extend({
 
-
      manualScroll:function(opt,callback){
 
-
          //alert("suc");
 
-
          this.defaults = {
 
-
              objId:"", // 滚动区域id
 
-
              showArea:"", // 大图显示区域id，如果没有就不显示
 
-
              showWidth:419, // 大图宽度
 
-
              showHeight:664, // 大图高度
 
-
              showTitle: false, // 是否在大图下方显示标题
 
-
              width:300,  // 每行的宽度
 
-
              height:100, // div的高度
 
-
              picTimer:0,  // 间隔句柄，不需要设置，只是作为标识使用
 
-
interval:5500
 
-
          };
 
-
          //参数初始化
 
-
          var opts = $.extend(this.defaults,opt);
 
-
var $objId = opts.objId;
 
-
var $showArea = opts.showArea;
 
-
var $showWidth = opts.showWidth;
 
-
var $showHeight = opts.showHeight;
 
-
var $showTitle = opts.showTitle;
 
-
var $width = opts.width;
 
-
var $height = opts.height;
 
-
var $titleopacity = opts.titleopacity;
 
-
var $picTimer = opts.picTimer;
 
-
var index=0;
 
-
var $len = $("#"+$objId).find("ul li").length;
 
-
/*设置显示图片大小*/
 
-
$("#"+$showArea).find("img").css({"height":$showHeight,"width":$showWidth});
 
-
          /*鼠标移动事件*/
 
-
$("#"+$objId).find("ul li").hover(function(){
 
-
  index = $(this).index();
 
-
  showimg(index);
 
-
});
 
-
      /*自动切换*/
 
-
$(".slider-scroll").hover(function(){
 
-
              clearInterval($picTimer);
 
-
              },function(){
 
-
                  $picTimer = setInterval(function() {
 
-
  if(index==$len-1)
 
-
            {
 
-
        index=0;
 
-
            }
 
-
else
 
-
{
 
-
    index+=1;
 
-
}
 
-
                      $("#"+$objId).find("ul li").removeClass("on");
 
-
        $("#"+$objId).find("ul li").eq(index).addClass("on");
 
-
$("#"+$showArea).find("img").css({"display":"none","opacity":"0.3"});
 
-
$("#"+$showArea).find("img").eq(index).css({"display":"block"}).stop(true,false).animate({"opacity":"1"},500);
 
-
                  },opts.interval); // 自动播放的间隔，单位：毫秒
 
-
          }).trigger("mouseleave");
 
-
function showimg(index)
 
-
{
 
-
if(index==$len)
 
-
    {
 
-
  index=0;
 
-
    }
 
-
  $("#"+$objId).find("ul li").removeClass("on");
 
-
  $("#"+$objId).find("ul li").eq(index).addClass("on");
 
-
  $("#"+$showArea).find("img").css({"display":"none","opacity":"0.3"});
 
-
  $("#"+$showArea).find("img").eq(index).css({"display":"block"}).stop(true,false).animate({"opacity":"1"},500);
 
-
  index+=1;
 
-
}
 
-
}
 
-
});
 
-
</script>
 
</head>
</head>
<body>
<body>
-
<script type="text/javascript">
+
<div id="slide_fade" class="slide_fade">
-
//home  顶部大图切换
+
<div class="box">
-
$(document).ready(function(){
+
<ul class="list">
-
$.manualScroll({
+
<li style="position: absolute; top: 0px; left: 0px; display: none;"><a href="/">
-
objId:"scrollDiv",
+
<img src="/jscss/demoimg/201401/fade1.jpg">
-
showArea:"showArea",
+
<div class="txt">
-
showWidth:664, // 大图宽度
+
<h3>玩转早春自驾游</h3>
-
showHeight:419, // 大图高度
+
<p>春暖花开，万物复苏；</p>
-
showTitle: true,
+
<p>到处洋溢着花香的气息；</p>
-
picTimer:0,
+
<p>连上七天班的心蠢蠢欲动；</p>
-
interval:3000
+
<p>不如趁着清明小长假，来次放松心情的自驾游吧！</p>
-
});
+
</div>
-
});
+
</a></li>
-
</script>
+
<li style="position: absolute; top: 0px; left: 0px; display: none;"><a href="/">
-
<div class="main">
+
<img src="/jscss/demoimg/201401/fade2.jpg">
-
<div  class="slider-scroll f-c">
+
<div class="txt">
-
<div id="showArea">
+
<h3 style="color:#9E6452;">十二星座屌丝男把妹秘籍</h3>
-
<a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall1.jpg" width="664px" height="419px"></a>
+
<p style="color:#9E6452;">窈窕淑女，屌丝好逑。</p>
-
<a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall4.jpg" width="664px" height="419px"></a>
+
<p style="color:#9E6452;">那么多美好的妹子，为什么一个都不是你的？</p>
-
<a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall6.jpg" width="664px" height="419px"></a>
+
<p style="color:#9E6452;">全速武装起来，妹子和机会一样，都喜欢有准备的人。</p>
-
<a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall7.jpg" width="664px" height="419px"></a>
+
<p style="color:#9E6452;">十二星座的单身男人们，发福利啦！</p>
-
<a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall9.jpg" width="664px" height="419px"></a>
+
</div>
-
</div>
+
</a></li>
-
<div id="scrollDiv">
+
<li style="position: absolute; top: 0px; left: 0px; z-index: 1;"><a href="/">
-
<ul>
+
<img src="/jscss/demoimg/201401/fade3.jpg">
-
<li class="on"><a href="/" target="_blank">斜弱视专家援疆<!--12个字以内--><span>权威治疗疑难斜弱视<!--14个字以内--></span></a><span class="entity-triangle"></span></li>
+
<div class="txt">
-
<li ><a href="/" target="_blank">IntraLase飞秒激光治近视<!--12个字以内--><span>全程无刀安全治近视首选<!--14个字以内--></span></a><span class="entity-triangle"></span></li>
+
<h3>风调日和清明天</h3>
-
<li ><a href="/" target="_blank">青少年近视防控<!--12个字以内--><span>非手术治近视<!--14个字以内--></span></a><span class="entity-triangle"></span></li>
+
<p>气清景明，万物皆显，春意正浓</p>
-
<li ><a href="/" target="_blank">白内障防治<!--12个字以内--><span>爱让父母看得见<!--14个字以内--></span></a><span class="entity-triangle"></span></li>
+
<p>包含了扫墓祭祀的悼念哀思</p>
-
<li ><a href="/" target="_blank">ICL人工晶体植入术<!--12个字以内--><span>无损角膜之高端近视治疗<!--14个字以内--></span></a><span class="entity-triangle"></span></li>
+
<p>和踏青游玩的欢笑嬉戏</p>
 +
<p>好一派风调日和清明天~</p>
 +
</div>
 +
</a></li>
 +
<li style="position: absolute; top: 0px; left: 0px; z-index: 2;"><a href="/">
 +
<img src="/jscss/demoimg/201401/fade4.jpg">
 +
<div class="txt">
 +
<h3 style="color:#68262C;">愚人节玩具大作战</h3>
 +
<p style="color:#333333;">每年的愚人节都是整蛊搞笑玩具纷纷现身的时候，</p>
 +
<p style="color:#333333;">今年又有哪些意想不到的玩意呢？</p>
 +
<p style="color:#333333;">小编为你搜罗了本年度大热的整蛊玩具，</p>
 +
<p style="color:#333333;">在愚人节这天选上几样，"愚"乐一下你的朋友们吧~</p>
 +
</div>
 +
</a></li>
 +
<li style="position: absolute; top: 0px; left: 0px; display: none;"><a href="/">
 +
<img src="/jscss/demoimg/201401/fade5.jpg">
 +
<div class="txt">
 +
<h3 style="color:#8D5930;">家居大换装</h3>
 +
<p style="color:#8D5930;">春天已经姗姗而来</p>
 +
<p style="color:#8D5930;">青青小草破土而出，花儿争奇斗放</p>
 +
<p style="color:#8D5930;">大自然到处都换上了春装</p>
 +
<p style="color:#8D5930;">是不是该给家居也换个装了呢！</p>
 +
</div>
 +
</a></li>
 +
<li style="position: absolute; top: 0px; left: 0px; display: none;"><a href="/">
 +
<img src="/jscss/demoimg/201401/fade6.jpg">
 +
<div class="txt">
 +
<h3 style="color:#0C6796;">正是赏花好时节</h3>
 +
<p style="color:#0C6796;">天气逐渐回暖，花朵开始绽放</p>
 +
<p style="color:#0C6796;">或素雅，或娇艳，斑斓自若</p>
 +
<p style="color:#0C6796;">春风暖意花香，直把游人熏醉</p>
 +
<p style="color:#0C6796;">烟花三月下江南，正是赏花好时节。</p>
 +
</div>
 +
</a></li>
</ul>
</ul>
</div>
</div>
 +
<ul class="btn clearfix">
 +
<li class="">
 +
<a href="/">
 +
<img src="/jscss/demoimg/201401/fade1.jpg" width="150" height="42">
 +
<h3>玩转早春自驾游</h3>
 +
</a>
 +
<p>by <a href="/">不二周助</a></p>
 +
</li>
 +
<li class="">
 +
<a href="/">
 +
<img src="/jscss/demoimg/201401/fade2.jpg" width="150" height="42">
 +
<h3>十二星座屌丝男把妹秘籍</h3>
 +
</a>
 +
<p>by <a href="/">阿布大人</a></p>
 +
</li>
 +
<li class="">
 +
<a href="/">
 +
<img src="/jscss/demoimg/201401/fade3.jpg" width="150" height="42">
 +
<h3>风调日和清明天</h3>
 +
</a>
 +
<p>by <a href="/">伊丽莎白酱</a></p>
 +
</li>
 +
<li class="selected">
 +
<a href="/">
 +
<img src="/jscss/demoimg/201401/fade4.jpg" width="150" height="42">
 +
<h3>愚人节玩具大作战</h3>
 +
</a>
 +
<p>by <a href="/">不二周助</a></p>
 +
</li>
 +
<li class="">
 +
<a href="/">
 +
<img src="/jscss/demoimg/201401/fade5.jpg" width="150" height="42">
 +
<h3>家居大换装</h3>
 +
</a>
 +
<p>by <a href="/">樱桃小丸子</a></p>
 +
</li>
 +
<li class="">
 +
<a href="/">
 +
<img src="/jscss/demoimg/201401/fade6.jpg" width="150" height="42">
 +
<h3>正是赏花好时节</h3>
 +
</a>
 +
<p>by <a href="/">伊丽莎白酱</a></p>
 +
</li>
 +
</ul>
</div>
</div>
-
</div>
+
 
-
<div style="text-align:center;clear:both">
+
<script src="/ajaxjs/jquery-1.6.2.min.js"></script>
-
</div>
+
<script>
 +
(function(e){e.fn.cxSlide=function(t){if(!this.length)return;t=e.extend({},e.cxSlide.defaults,t);var n=this,r={};r.fn={};var i;r.box=n.find(".box"),r.list=r.box.find(".list"),r.items=r.list.find("li"),r.itemSum=r.items.length;if(r.itemSum<=1)return;r.numList=n.find(".btn"),r.numBtns=r.numList.find("li"),r.plusBtn=n.find(".plus"),r.minusBtn=n.find(".minus"),r.boxWidth=r.box.width(),r.boxHeight=r.box.height(),r.s=0;if(t.btn&&!r.numList.length){i="";for(var s=1;s<=r.itemSum;s++)i+="<li class='b_"+s+"'>"+s+"</li>";r.numList=e("<ul></ul>",{"class":"btn",html:i}).appendTo(n),r.numBtns=r.numList.find("li")}t.plus&&!r.plusBtn.length&&(r.plusBtn=e("<div></div>",{"class":"plus"}).appendTo(n)),t.minus&&!r.minusBtn.length&&(r.minusBtn=e("<div></div>",{"class":"minus"}).appendTo(n)),r.fn.on=function(){if(!t.auto)return;r.fn.off(),r.run=setTimeout(function(){r.fn.goto()},t.time)},r.fn.off=function(){typeof r.run!="undefined"&&clearTimeout(r.run)},r.fn.checkBtn=function(e){r.numList.length&&r.numBtns.eq(e).addClass("selected").siblings("li").removeClass("selected")},r.fn.goto=function(e){r.fn.off();var n=typeof e=="undefined"?r.s+1:parseInt(e,10),i=r.s,s=r.itemSum-1;if(n==r.s){r.fn.on();return}n>s?n=0:n<0&&(n=s),r.fn.checkBtn(n);var o;switch(t.type){case"x":o=r.boxWidth*n,n==0&&i==s?(r.items.eq(0).css({left:r.boxWidth*r.itemSum}),o=r.boxWidth*r.itemSum):i==0&&(r.items.eq(0).css({left:""}),r.box.scrollLeft(0)),r.box.stop(!0,!1).animate({scrollLeft:o},t.speed);break;case"y":o=r.boxHeight*n,n==0&&i==s?(r.items.eq(0).css({top:r.boxHeight*r.itemSum}),o=r.boxHeight*r.itemSum):i==0&&(r.items.eq(0).css({top:""}),r.box.scrollTop(0)),r.box.stop(!0,!1).animate({scrollTop:o},t.speed);break;case"fade":r.items.css({display:"none",position:"absolute",top:0,left:0,zIndex:""}),r.items.eq(i).css({display:"",zIndex:1}),r.items.eq(n).css({zIndex:2}).fadeIn(t.speed);break;case"toggle":r.items.eq(n).show().siblings("li").hide()}r.s=n,r.box.queue(function(){r.fn.on(),r.box.dequeue()})},r.box.hover(function(){r.fn.off()},function(){r.fn.on()}),t.btn&&r.numList.delegate("li",t.events,function(){r.fn.goto(r.numBtns.index(e(this)))}),t.plus&&r.plusBtn.bind(t.events,function(){r.fn.goto()}),t.minus&&r.minusBtn.bind(t.events,function(){r.fn.goto(r.s-1)}),r.fn.checkBtn(t.start),r.fn.goto(t.start)},e.cxSlide={defaults:{events:"click",type:"x",start:0,speed:800,time:5e3,auto:!0,btn:!0,plus:!1,minus:!1}}})(jQuery);
 +
</script>
 +
<script>
 +
$("#slide_fade").cxSlide({events:"mouseover",type:"fade",speed:300});
 +
</script>
</body>
</body>
</html>
</html>

Revision as of 08:20, 6 September 2014

<!DOCTYPE html> cxSlide带缩略图和描述焦点图

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