Team:LZU-China/tempfortest

From 2014.igem.org

(Difference between revisions)
(Created page with "<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery全屏banner自动轮播切换</title> <script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"/></script>...")
Line 1: Line 1:
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
-
<title>jquery全屏banner自动轮播切换</title>
+
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
-
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"/></script>
+
<title>jQuery心型图片墙鼠标悬浮变大</title>
-
<script type="text/javascript">
+
-
function banner(){
+
-
var bn_id = 0;
+
-
var bn_id2= 1;
+
-
var speed33=5000;
+
-
var qhjg = 1;
+
-
var MyMar33;
+
-
$("#banner .d1").hide();
+
-
$("#banner .d1").eq(0).fadeIn("slow");
+
-
if($("#banner .d1").length>1)
+
-
{
+
-
$("#banner_id li").eq(0).addClass("nuw");
+
-
function Marquee33(){
+
-
bn_id2 = bn_id+1;
+
-
if(bn_id2>$("#banner .d1").length-1)
+
-
{
+
-
bn_id2 = 0;
+
-
}
+
-
$("#banner .d1").eq(bn_id).css("z-index","2");
+
-
$("#banner .d1").eq(bn_id2).css("z-index","1");
+
-
$("#banner .d1").eq(bn_id2).show();
+
-
$("#banner .d1").eq(bn_id).fadeOut("slow");
+
-
$("#banner_id li").removeClass("nuw");
+
-
$("#banner_id li").eq(bn_id2).addClass("nuw");
+
-
bn_id=bn_id2;
+
-
};
+
-
MyMar33=setInterval(Marquee33,speed33);
+
-
$("#banner_id li").click(function(){
+
-
var bn_id3 = $("#banner_id li").index(this);
+
-
if(bn_id3!=bn_id&&qhjg==1)
+
-
{
+
-
qhjg = 0;
+
-
$("#banner .d1").eq(bn_id).css("z-index","2");
+
-
$("#banner .d1").eq(bn_id3).css("z-index","1");
+
-
$("#banner .d1").eq(bn_id3).show();
+
-
$("#banner .d1").eq(bn_id).fadeOut("slow",function(){qhjg = 1;});
+
-
$("#banner_id li").removeClass("nuw");
+
-
$("#banner_id li").eq(bn_id3).addClass("nuw");
+
-
bn_id=bn_id3;
+
-
}
+
-
})
+
-
$("#banner_id").hover(
+
-
function(){
+
-
clearInterval(MyMar33);
+
-
}
+
-
,
+
-
function(){
+
-
MyMar33=setInterval(Marquee33,speed33);
+
-
}
+
-
)
+
-
}
+
-
else
+
-
{
+
-
$("#banner_id").hide();
+
-
}
+
-
}
+
-
</script>
+
-
</head>
+
-
<body>
+
<style type="text/css">
<style type="text/css">
-
*{margin:0;padding:0;list-style-type:none;}
+
*{padding:0; margin:0;}
-
a,img{border:0;}
+
ul,li{list-style:none;}
-
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
+
body{font:12px/20px "Microsoft Yahei","SimSun",Arial,sans-serif; background:#CCC;}
-
.banner{height:400px;overflow:hidden;}
+
.heartPic{width:749px;height:630px;margin:60px auto 0 auto;}
-
.banner .d1{width:100%;height:392px;display:block;position:absolute;left:0px;top:0px;}
+
.heartPic ul{float:left;width:749px;}
-
.banner .d2{width:100%;height:30px;clear:both;position:absolute;z-index:100;left:0px;top:360px;}
+
.heartPic ul li{float:left;width:100px;height:100px;padding:2px;cursor:pointer;}
-
.banner .d2 ul{float:left;position:absolute;left:50%;top:0;margin:0 0 0 -96px;display:inline;}
+
.heartPic ul li.on{z-index:99;}
-
.banner .d2 li{width:17px;height:15px;overflow:hidden;cursor:pointer;background:url(/jscss/demoimg/201405/img1.png) no-repeat center;float:left;margin:0 3px;display:inline;}
+
.heartPic ul li.on .in{position:relative;left:-50px;top:-50px;padding:5px 5px 20px 5px;background:#666;}
-
.banner .d2 li.nuw{background:url(/jscss/demoimg/201405/img1_1.png) no-repeat center;}
+
.heartPic ul li .pTxt{display:none;width:100px;height:15px;text-align:center;color:#fff;overflow:hidden;}
 +
.heartPic .showDiv{display:block;}
</style>
</style>
-
<div class="banner" id="banner" >
+
</head>
-
<a href="/" class="d1" style="background:url(/jscss/demoimg/201405/banner1.jpg) center no-repeat;"></a>
+
<body>
-
<a href="/" class="d1" style="background:url(/jscss/demoimg/201405/banner2.jpg) center no-repeat;"></a>
+
<div class="heartPic">
-
<a href="/" class="d1" style="background:url(/jscss/demoimg/201405/banner3.jpg) center no-repeat;"></a>
+
<ul>
-
<a href="/" class="d1" style="background:url(/jscss/demoimg/201405/banner4.jpg) center no-repeat;"></a>
+
<li></li>
-
<a href="/" class="d1" style="background:url(/jscss/demoimg/201405/banner5.jpg) center no-repeat;"></a>
+
<li>
-
<div class="d2" id="banner_id">
+
        <div class="in">
-
<ul>
+
            <img width="100" height="100" src="/jscss/demoimg/201404/index_01.jpg" />
-
<li></li>
+
                <p class="pTxt">可爱的女娃娃</p>
-
<li></li>
+
            </div>
-
<li></li>
+
        </li>
-
<li></li>
+
<li>
-
<li></li>
+
        <div class="in">
-
</ul>
+
            <img width="100" height="100" src="/jscss/demoimg/201404/index_02.jpg" />
-
</div>
+
                <p class="pTxt">呆萌的小熊</p>
 +
            </div>
 +
        </li>
 +
<li></li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_03.jpg" />
 +
                <p class="pTxt">卡哇伊的小熊</p>
 +
            </div>
 +
        </li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_04.jpg" />
 +
                <p class="pTxt">女巫骑着扫帚</p>
 +
            </div>
 +
        </li>
 +
<li></li>
 +
</ul>
 +
<ul>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_05.jpg" />
 +
                <p class="pTxt">女娃娃</p>
 +
            </div>
 +
        </li>
 +
<li>
 +
        <div class="in">
 +
        <img width="100" height="100" src="/jscss/demoimg/201404/index_06.jpg" />
 +
                <p class="pTxt">星星可爱</p>
 +
            </div>
 +
        </li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_07.jpg" />
 +
                <p class="pTxt">呆萌女</p>
 +
            </div>
 +
        </li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_08.jpg" />
 +
                <p class="pTxt">狗狗</p>
 +
            </div>
 +
        </li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_09.jpg" />
 +
                <p class="pTxt">绿树</p>
 +
            </div>
 +
        </li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_10.jpg" />
 +
                <p class="pTxt">粉爱粉爱的</p>
 +
            </div>
 +
        </li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_11.jpg" />
 +
                <p class="pTxt">蜡笔小新</p>
 +
            </div>
 +
        </li>
 +
</ul>
 +
<ul>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_12.jpg" />
 +
                <p class="pTxt">震不碎的心</p>
 +
            </div>
 +
        </li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_13.jpg" />
 +
                <p class="pTxt">很有意境</p>
 +
            </div>
 +
        </li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_14.jpg" />
 +
                <p class="pTxt">樱木花道最爱啊</p>
 +
            </div>
 +
        </li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_15.jpg" />
 +
                <p class="pTxt">俩骷髅</p>
 +
            </div>
 +
        </li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_16.jpg" />
 +
                <p class="pTxt">萌妹子</p>
 +
            </div>
 +
        </li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_17.jpg" />
 +
                <p class="pTxt">可爱的小狗</p>
 +
            </div>
 +
        </li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_18.jpg" />
 +
                <p class="pTxt">夫妇俩白头偕老</p>
 +
            </div>
 +
        </li>
 +
</ul>
 +
<ul>
 +
<li></li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_19.jpg" />
 +
                <p class="pTxt">刷子</p>
 +
            </div>
 +
        </li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_20.jpg" />
 +
                <p class="pTxt">偶的头像</p>
 +
            </div>
 +
        </li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_21.jpg" />
 +
                <p class="pTxt">树叶子</p>
 +
            </div>
 +
        </li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_22.jpg" />
 +
                <p class="pTxt">星星</p>
 +
            </div>
 +
        </li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_23.jpg" />
 +
                <p class="pTxt">浅色哦</p>
 +
            </div>
 +
        </li>
 +
<li></li>
 +
</ul>
 +
<ul>
 +
<li></li>
 +
<li></li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_24.jpg" />
 +
                <p class="pTxt">太阳帅哥</p>
 +
            </div>
 +
        </li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_25.jpg" />
 +
                <p class="pTxt">大笑脸</p>
 +
            </div>
 +
        </li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_26.jpg" />
 +
                <p class="pTxt">企鹅</p>
 +
            </div>
 +
        </li>
 +
<li></li>
 +
<li></li>
 +
</ul>
 +
<ul>
 +
<li></li>
 +
<li></li>
 +
<li></li>
 +
<li>
 +
        <div class="in">
 +
            <img width="100" height="100" src="/jscss/demoimg/201404/index_27.jpg" />
 +
                <p class="pTxt">小兔子</p>
 +
            </div>
 +
        </li>
 +
<li></li>
 +
<li></li>
 +
<li></li>
 +
</ul>
</div>
</div>
-
<script type="text/javascript">banner()</script>
+
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
 +
<script type="text/javascript">
 +
$(function(){
 +
$(".heartPic li").hover(function(){
 +
$(this).addClass("on");
 +
$(this).find("img").animate({"width":"200px","height":"200px"});
 +
$(this).find("div").animate({"width":"200px","height":"200px"});
 +
$(this).find(".pTxt").animate({"width":"200px","height":"20px"});
 +
$(this).find("p").addClass("showDiv");
 +
},function(){
 +
$(this).animate({height:"100px"},100).removeClass("on");
 +
$(this).find("img").stop(true,true).animate({"width":"100px","height":"100px"});
 +
$(this).find("div").stop(true,true).animate({"width":"100px","height":"100px"});
 +
$(this).find(".pTxt").stop(true,true).animate({"width":"0px","height":"0px"});
 +
});
 +
})
 +
</script>
<div style="text-align:center;clear:both">
<div style="text-align:center;clear:both">
</div>
</div>
</body>
</body>
</html>
</html>

Revision as of 08:06, 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"