Team:LZU-China/tempfortest

From 2014.igem.org

(Difference between revisions)
Line 2: Line 2:
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
-
<title>jQuery炫酷翻页图片相册</title>
+
<title>响应式图片切换jQuery选项卡</title>
<style>
<style>
-
body{ overflow:hidden;}
+
html,body,div,img,q,dl,dt,dd,ol,ul,li{margin:0;padding:0;}
-
a{ text-decoration:none; color:#FFF;}
+
img,a img{border-style:none;border-width:0;}
-
a img{ border:none;}
+
a,a:hover{ text-decoration:none}
-
.img-box,.img-box div,.img-box div img{ width:800px; height:450px; }
+
html {margin:0 auto;}
-
.img-box{ margin:auto;position:relative; }
+
ol,ul,li{list-style: none;}:focus{outline: 0;}
-
.img-box span{ position:absolute;bottom:0;left:295px; width:201px;font-size:12px; line-height:25px;color:#FFF; z-index:100; background:#555; text-align:center;}
+
body{background-color:#eef9f8; color:#666}
-
.img-box div{ position: absolute;cursor: all-scroll }
+
a,a:visited{ color:#666}
-
.btn-box{ width:800px; height:40px;margin: auto; cursor:pointer; background:#222; }
+
a:hover {color:#009966;}
-
.btn-margin{ width:210px; height:40px; margin: auto;}
+
.main{ font-family:宋体; color:#666; width:912px; margin:0 auto}
-
.btn{ width:100px; height:38px; line-height:38px; margin:1px 1px 0 0; text-align:center; float:left;color:#FFF; background:#555; }
+
.slider-scroll{margin-top:12px; overflow:hidden;height:421px;}
 +
#showArea{ width:664px; float:left;height:419px;border:1px solid #bebebe; border-right:none}
 +
#showArea img{ opacity:0; display:none;}
 +
#scrollDiv{float:left; width:246px; height:421px; background:url(/jscss/demoimg/201402/slider_side.jpg) 0 0 no-repeat}
 +
#scrollDiv ul{ padding:19px 0 0 0}
 +
#scrollDiv li{width:220px;height:57px;padding:10px 0 10px 26px; cursor:pointer; font-family:微软雅黑;}
 +
#scrollDiv li.on{ background:#003030; position:relative;}
 +
#scrollDiv li a{display:block; font-size:16px; height:35px; line-height:35px; color:#fff;}
 +
#scrollDiv li span{display:block; color:#66ffff; font-size:14px; height:15px; line-height:15px; }
 +
#scrollDiv li span.entity-triangle{ display:none; }
 +
#scrollDiv li.on span.entity-triangle{position:absolute; top:31px; left:-6px; display:block; width:6px; height:22px;z-index:99;}
</style>
</style>
-
<script src="/ajaxjs/jquery-1.9.1.min.js"></script>
+
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
<script type="text/javascript">
-
$(document).ready(function(e) {
+
$.extend({
-
  var  ImgBox = $(".img-box"),
+
      manualScroll:function(opt,callback){
-
  ImgSpan =ImgBox.find("span"),
+
          //alert("suc");
-
  ImgDiv = $(".img-box div"),
+
          this.defaults = {
-
  BtnNext = $("#btn-next"),
+
              objId:"", // 滚动区域id
-
  BtnPrve = $("#btn-prev"),
+
              showArea:"", // 大图显示区域id，如果没有就不显示
-
  Btn = $(".btn"),
+
              showWidth:419, // 大图宽度
-
  speed = 600,//设置动画的运动时间
+
              showHeight:664, // 大图高度
-
  Tick = 4000+speed,//设置定时器的间隔时间
+
              showTitle: false, // 是否在大图下方显示标题
-
  n=1,//设置张数计数器
+
              width:300, // 每行的宽度
-
  whichCl ,//设置判断点击了哪一个按钮
+
              height:100, // div的高度
-
  z=0;//设置当前动画计数器
+
              picTimer:0,  // 间隔句柄，不需要设置，只是作为标识使用
-
  ImgSpan.html("第 "+n+" 张/共 "+ImgDiv.length+" 张");
+
interval:5500
-
  function Slider(){//动画函数
+
          };
-
  if(whichCl=="nextCl"){
+
          //参数初始化
-
      n++; if(n>ImgDiv.length){n=1;}
+
          var opts = $.extend(this.defaults,opt);
-
          z--; if(z<0){z=ImgDiv.length-1;}
+
var $objId = opts.objId;
-
}
+
var $showArea = opts.showArea;
-
  if(whichCl=="prevCl"){ n--; if(n<1){n=ImgDiv.length;}}
+
var $showWidth = opts.showWidth;
-
  ImgSpan.html("第 "+n+" 张/共 "+ImgDiv.length+" 张");
+
var $showHeight = opts.showHeight;
-
  ImgDiv.eq(z).stop().animate(
+
var $showTitle = opts.showTitle;
-
      {right:-(1.1*ImgDiv.width())}, speed,
+
var $width = opts.width;
-
        function(){
+
var $height = opts.height;
-
                    if(whichCl=="nextCl"){ImgSpan.after($(this));}
+
var $titleopacity = opts.titleopacity;
-
                    if(whichCl=="prevCl"){ImgBox.append($(this));}
+
var $picTimer = opts.picTimer;
-
                    $(this).stop().animate({right:0}, speed);
+
var index=0;
-
                  })
+
var $len = $("#"+$objId).find("ul li").length;
-
  if(whichCl=="prevCl"){ z++; if(z>ImgDiv.length-1){z=0;}}
+
/*设置显示图片大小*/
-
  ImgBox.stop().animate({right:100},speed,function(){$(this).stop().animate({right:0}, speed)})
+
$("#"+$showArea).find("img").css({"height":$showHeight,"width":$showWidth});
-
  ImgSpan.stop().animate({left:395},speed,function(){$(this).stop().animate({left:295},speed)})
+
          /*鼠标移动事件*/
-
  }
+
$("#"+$objId).find("ul li").hover(function(){
-
  BtnNext.click(next_cl = function(){whichCl="nextCl";Slider();});//向右点击事件启动动画函数
+
  index = $(this).index();
-
  BtnPrve.click(prev_cl = function(){whichCl="prevCl";Slider();});//向左点击事件启动动画函数
+
  showimg(index);
-
  Btn.hover(function(){clearTimeout(autoTime)},function(){autoTime = setInterval(next_cl,Tick);})//当鼠标进入点击按钮时对定时器进行控制
+
});
-
  autoTime = setInterval(next_cl,Tick); //模拟向右点击事件定时启动动画函数，也可以使用  prev_cl向左启动动画函数
+
      /*自动切换*/
 +
$(".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>
</script>
</head>
</head>
<body>
<body>
-
<div class="img-box">
+
<script type="text/javascript">
-
        <span></span>
+
//home  顶部大图切换
-
          <div><a href="/"><img src="/jscss/demoimg/wall1.jpg" /></a></div>
+
$(document).ready(function(){
-
          <div><a href="/"><img src="/jscss/demoimg/wall2.jpg" /></a></div>
+
$.manualScroll({
-
          <div><a href="/"><img src="/jscss/demoimg/wall3.jpg" /></a></div>
+
objId:"scrollDiv",
-
          <div><a href="/"><img src="/jscss/demoimg/wall4.jpg" /></a></div>
+
showArea:"showArea",
-
</div>
+
showWidth:664, // 大图宽度
-
<div class="btn-box">
+
showHeight:419, // 大图高度
-
    <div class="btn-margin">
+
showTitle: true,
-
        <div class="btn" id="btn-prev">上一张</div>
+
picTimer:0,
-
        <div class="btn" id="btn-next">下一张</div>
+
interval:3000
-
    </div>
+
});
 +
});
 +
</script>
 +
<div class="main">
 +
<div class="slider-scroll f-c">
 +
<div id="showArea">
 +
<a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall1.jpg" width="664px" height="419px"></a>
 +
<a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall4.jpg" width="664px" height="419px"></a>
 +
<a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall6.jpg" width="664px" height="419px"></a>
 +
<a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall7.jpg" width="664px" height="419px"></a>
 +
<a href="/" target="_blank"><img style="display:block; opacity:1;" src="/jscss/demoimg/wall9.jpg" width="664px" height="419px"></a>
 +
</div>
 +
<div id="scrollDiv">
 +
<ul>
 +
<li class="on"><a href="/" target="_blank">斜弱视专家援疆<!--12个字以内--><span>权威治疗疑难斜弱视<!--14个字以内--></span></a><span class="entity-triangle"></span></li>
 +
<li ><a href="/" target="_blank">IntraLase飞秒激光治近视<!--12个字以内--><span>全程无刀安全治近视首选<!--14个字以内--></span></a><span class="entity-triangle"></span></li>
 +
<li ><a href="/" target="_blank">青少年近视防控<!--12个字以内--><span>非手术治近视<!--14个字以内--></span></a><span class="entity-triangle"></span></li>
 +
<li ><a href="/" target="_blank">白内障防治<!--12个字以内--><span>爱让父母看得见<!--14个字以内--></span></a><span class="entity-triangle"></span></li>
 +
<li ><a href="/" target="_blank">ICL人工晶体植入术<!--12个字以内--><span>无损角膜之高端近视治疗<!--14个字以内--></span></a><span class="entity-triangle"></span></li>
 +
</ul>
 +
</div>
 +
</div>
</div>
</div>
<div style="text-align:center;clear:both">
<div style="text-align:center;clear:both">
-
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
 
</div>
</div>
</body>
</body>
</html>
</html>

Revision as of 08:18, 6 September 2014

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 响应式图片切换jQuery选项卡

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