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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<html lang="en">
+
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+
<title>jQuery炫酷翻页图片相册</title>
-
<title>jquery鼠标悬停上下显示遮罩标题与内容</title>
+
-
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
+
-
<script type="text/javascript" src="/ajaxjs/jquery.easing.min.js"></script>
+
-
<script>
+
-
$(document).ready(function () {
+
-
style = 'easeOutQuart';
+
-
$('.photo').hover(
+
-
function() {
+
-
$(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
+
-
$(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
+
-
},
+
-
function() {
+
-
$(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
+
-
$(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
+
-
}
+
-
);
+
-
});
+
-
</script>
+
<style>
<style>
-
.photo { position:relative; font-family:arial; width:800px; margin:0 auto; text-align:center; overflow:hidden; border:5px solid #000; width:350px; height:233px; }
+
body{ overflow:hidden;}
-
.photo .heading, .photo .caption { position:absolute; background:#000; height:50px; width:350px; opacity:0.6; }
+
a{ text-decoration:none; color:#FFF;}
-
.photo .heading { top:-50px; }
+
a img{ border:none;}
-
.photo .caption { bottom:-50px; left:0px; }
+
.img-box,.img-box div,.img-box div img{ width:800px; height:450px; }
-
.photo .heading span { color:#26c3e5; top:-50px; font-weight:bold; display:block; padding:5px 0 0 10px; }
+
.img-box{ margin:auto;position:relative; }
-
.photo .caption span { color:#999; font-size:9px; display:block; padding:5px 10px 0 10px; }
+
.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;}
 +
.img-box div{ position: absolute;cursor: all-scroll }
 +
.btn-box{ width:800px; height:40px;margin: auto; cursor:pointer; background:#222; }
 +
.btn-margin{ width:210px; height:40px; margin: auto;}
 +
.btn{ width:100px; height:38px; line-height:38px; margin:1px 1px 0 0; text-align:center; float:left;color:#FFF; background:#555; }
</style>
</style>
 +
<script src="/ajaxjs/jquery-1.9.1.min.js"></script>
 +
<script type="text/javascript">
 +
$(document).ready(function(e) {
 +
  var  ImgBox = $(".img-box"),
 +
  ImgSpan =ImgBox.find("span"),
 +
  ImgDiv = $(".img-box div"),
 +
  BtnNext = $("#btn-next"),
 +
  BtnPrve = $("#btn-prev"),
 +
  Btn = $(".btn"),
 +
  speed = 600,//设置动画的运动时间
 +
  Tick = 4000+speed,//设置定时器的间隔时间
 +
  n=1,//设置张数计数器
 +
  whichCl ,//设置判断点击了哪一个按钮
 +
  z=0;//设置当前动画计数器
 +
  ImgSpan.html("第 "+n+" 张/共 "+ImgDiv.length+" 张");
 +
  function Slider(){//动画函数
 +
  if(whichCl=="nextCl"){
 +
      n++; if(n>ImgDiv.length){n=1;}
 +
          z--; if(z<0){z=ImgDiv.length-1;}
 +
}
 +
  if(whichCl=="prevCl"){ n--; if(n<1){n=ImgDiv.length;}}
 +
  ImgSpan.html("第 "+n+" 张/共 "+ImgDiv.length+" 张");
 +
  ImgDiv.eq(z).stop().animate(
 +
      {right:-(1.1*ImgDiv.width())}, speed,
 +
        function(){
 +
                    if(whichCl=="nextCl"){ImgSpan.after($(this));}
 +
                    if(whichCl=="prevCl"){ImgBox.append($(this));}
 +
                    $(this).stop().animate({right:0}, speed);
 +
                  })
 +
  if(whichCl=="prevCl"){ z++; if(z>ImgDiv.length-1){z=0;}}
 +
  ImgBox.stop().animate({right:100},speed,function(){$(this).stop().animate({right:0}, speed)})
 +
  ImgSpan.stop().animate({left:395},speed,function(){$(this).stop().animate({left:295},speed)})
 +
  }
 +
  BtnNext.click(next_cl = function(){whichCl="nextCl";Slider();});//向右点击事件启动动画函数
 +
  BtnPrve.click(prev_cl = function(){whichCl="prevCl";Slider();});//向左点击事件启动动画函数
 +
  Btn.hover(function(){clearTimeout(autoTime)},function(){autoTime = setInterval(next_cl,Tick);})//当鼠标进入点击按钮时对定时器进行控制
 +
  autoTime = setInterval(next_cl,Tick); //模拟向右点击事件定时启动动画函数,也可以使用  prev_cl向左启动动画函数
 +
});
 +
</script>
</head>
</head>
<body>
<body>
-
<div class="photo">
+
<div class="img-box">
-
<div class="heading"><span>源码爱好者网站</span></div>
+
        <span></span>
-
<img src="/jscss/demoimg/201402/fall.jpg" width="350" height="233" alt="" />
+
          <div><a href="/"><img src="/jscss/demoimg/wall1.jpg" /></a></div>
-
<div class="caption"><span>提供精品开源源码、网页特效、教程文章等建站资源和素材。</span></div>
+
          <div><a href="/"><img src="/jscss/demoimg/wall2.jpg" /></a></div>
 +
          <div><a href="/"><img src="/jscss/demoimg/wall3.jpg" /></a></div>
 +
          <div><a href="/"><img src="/jscss/demoimg/wall4.jpg" /></a></div>
 +
</div>
 +
<div class="btn-box">
 +
    <div class="btn-margin">
 +
        <div class="btn" id="btn-prev">上一张</div>
 +
        <div class="btn" id="btn-next">下一张</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:16, 6 September 2014

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> jQuery炫酷翻页图片相册

上一张
下一张

适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.