<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FirstWin.aspx.cs" Inherits="iWareWms.FirstWin" %>
|
|
<!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">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"name="viewport" />
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
<style type="text/css" media="all">
|
.d1{width:100%;height:100%;overflow:hidden;position:relative; top:-20px; }
|
.d2{width:100%;height:100%;overflow:hidden;}
|
.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px 0px;height:20px;overflow:hidden;}
|
.num_list span{display:inline-block;height:16px;padding-left:6px;}
|
img{border:0px;}
|
ul{display:none;}
|
.button{position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
|
.b1,.b2{background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;}
|
.b2{color:#FFCC33;background-color:#FF6633;}
|
html{
|
font-family:sans-serif;
|
-ms-text-size-adjust:100%;
|
-webkit-text-size-adjust:100%;
|
|
}
|
#u1{
|
position:absolute;
|
border: #000 thin solid;
|
width:100%;
|
height:500px;
|
text-align:center;
|
background-color: #09C;
|
min-width:1000px;
|
}
|
#u2{
|
position:relative;
|
border:#000 thin solid;
|
margin:14px 10px 10px 10px;
|
background-color:white;
|
}
|
#u2_1{
|
position:relative;
|
border:#000 thin solid;
|
width:35%;
|
height:440px;
|
margin:20px 30px 10px 10px;
|
float:left;
|
}
|
#u2_2{
|
position:relative; top:20px;
|
border:#000 thin solid;
|
width:30%;
|
height:440px;
|
float:inherit;
|
margin-left:37%;
|
margin-right:33%;
|
|
}
|
#u2_3{
|
position:absolute; top:20px; right:10px;
|
border:#000 thin solid;
|
width:30%;
|
height:440px;
|
float:right;
|
}
|
.clear{clear:both;}
|
.title1{
|
position:relative; top:10px; left:15px;
|
border:#000 thin hidden;
|
width:90%;
|
background-color: #09C;
|
height:25px;
|
text-align:left;
|
color:#FFF;
|
|
}
|
.title1_1{
|
position:relative; top:9px; left:15px;
|
border:#000 thin hidden;
|
width:90%;
|
background-color: #09C;
|
height:28px;
|
text-align:right;
|
color:#FFF;
|
font-family: "Courier New", Courier, monospace;
|
}
|
#Big1{
|
position:absolute; top:53px;
|
height:350px;
|
border:#000 thin hidden;
|
margin:20px 5px 20px 15px;
|
width:90%;
|
|
|
}
|
.img{
|
width:45%;
|
height:350px;
|
position:relative;
|
margin:0px 10px 20px 0px;
|
border:#000 thin solid;
|
}
|
#img1{
|
width:100%;
|
height:100%;
|
}
|
#c1{
|
position:absolute; top:53px; right:0px;
|
width:45%;
|
border:#000 thin solid;
|
margin:-53px 0px 20px 0px;
|
height:350px;
|
|
|
|
}
|
#c1_1{
|
position:relative;
|
border:#000 thin hidden;
|
width:100%;
|
height:10px;
|
color:#06F;
|
text-align:left;
|
font-size:100%;
|
margin-top:0px;
|
}
|
#c1_2{
|
position:relative;
|
border:#000 thin hidden;
|
width:100%;
|
height:65px;
|
color:#000;
|
text-align: start;
|
font-size:85%;
|
text-indent:2em;
|
|
|
}
|
#c1_3{
|
position:relative;
|
border:#000 thin hidden;
|
width:100%;
|
height:10px;
|
color:#06F;
|
text-align:left;
|
font-size:100%;
|
margin-top:35px;
|
}
|
#c1_4{
|
position:relative;
|
border:#000 thin hidden;
|
width:100%;
|
height:65px;
|
color:#000;
|
text-align: start;
|
font-size:85%;
|
text-indent:2em;
|
}
|
#c1_5{
|
position:relative;
|
border:#000 thin hidden;
|
width:100%;
|
height:10px;
|
color:#06F;
|
text-align:left;
|
font-size:100%;
|
margin:35px 0px 5px 0px;
|
}
|
#c1_6{
|
position:relative;
|
border:#000 thin hidden;
|
width:100%;
|
height:65px;
|
color:#000;
|
text-align: start;
|
font-size:85%;
|
text-indent:2em;
|
}
|
.title2{
|
position:relative; top:10px; left:15px;
|
border:#000 thin hidden;
|
width:90%;
|
background-color: #09C;
|
height:25px;
|
text-align:center;
|
color:#FFF;
|
}
|
.title2_1{
|
position:relative; top:9px; left:15px;
|
border:#000 thin hidden;
|
width:90%;
|
background-color: #09C;
|
height:28px;
|
text-align:center;
|
color:#FFF;
|
|
}
|
#c2{
|
position:absolute; top:53px;
|
height:350px;
|
border:#000 thin solid;
|
margin:20px 5px 20px 15px;
|
width:90%
|
}
|
#c2_1{
|
position:relative;
|
border:#000 thin hidden;
|
width:100%;
|
height:25px;
|
color:#06F;
|
text-align:left;
|
font-size:20px;
|
}
|
#c2_2{
|
position:relative;
|
border:#000 thin hidden;
|
width:100%;
|
height:90px;
|
}
|
#img2{
|
position:relative;
|
width:100px;
|
height:100%;
|
}
|
#c2_3{
|
position:relative;
|
border:#000 thin hidden;
|
width:100%;
|
height:60px;
|
color:#000;
|
text-align:left;
|
font-size:14px;
|
text-indent:2em;
|
margin-top:10px;
|
|
}
|
#c2_4{
|
position:relative;
|
border:#000 thin hidden;
|
width:100%;
|
height:50px;
|
color:#000;
|
text-align:left;
|
font-size:14px;
|
text-indent:2em;
|
}
|
#c2_5{
|
position:relative;
|
border:#000 thin hidden;
|
width:100%;
|
height:70px;
|
color:#000;
|
text-align:left;
|
font-size:14px;
|
text-indent:2em;
|
}
|
#c2_6{
|
position:relative;
|
border:#000 thin hidden;
|
width:100%;
|
height:60px;
|
color:#000;
|
text-align:left;
|
font-size:14px;
|
text-indent:2em;
|
}
|
.title3{
|
position:relative; top:10px; left:15px;
|
border:#000 thin hidden;
|
width:90%;
|
background-color: #09C;
|
height:53px;
|
text-align:center;
|
color:#FFF;
|
line-height:40px;
|
}
|
#c3{
|
position:absolute; top:53px;
|
height:350px;
|
border:#000 thin solid;
|
margin:20px 5px 20px 15px;
|
width:90%;
|
}
|
#c3_1{
|
position:relative;
|
border:#000 thin hidden;
|
width:100%;
|
height:50px;
|
color:#06F;
|
text-align:left;
|
font-size:20px;
|
line-height:50px;
|
}
|
#c3_2{
|
position:relative;
|
border:#000 thin hidden;
|
width:100%;
|
height:60px;
|
color:#06F;
|
text-align:right;
|
font-size:20px;
|
}
|
#c3_3{
|
position:relative;
|
border:#000 thin hidden;
|
width:100%;
|
height:240px;
|
color:#06F;
|
text-align:right;
|
font-size:18px;
|
}
|
#img3{
|
position:relative;
|
width:100%;
|
height:100%;
|
}
|
</style>
|
<script language="javascript" type="text/javascript">
|
|
//主函数
|
var s = function () {
|
var interv = 5000; //切换间隔时间
|
var interv2 = 10; //切换速度
|
var opac1 = 80; //文字背景的透明度
|
var source = "fade_focus" //焦点轮换图片容器的id名称
|
//获取对象
|
|
function getTag(tag, obj) {
|
if (obj == null) { return document.getElementsByTagName(tag) }
|
else {
|
return obj.getElementsByTagName(tag)
|
}
|
}
|
function getid(id) {
|
return document.getElementById(id)
|
};
|
var opac = 0, j = 0, t = 63, num, scton = 0, timer, timer2, timer3;
|
var id = getid(source); id.removeChild(getTag("div", id)[0]);
|
var li = getTag("li", id);
|
var div = document.createElement("div");
|
var title = document.createElement("div");
|
var span = document.createElement("span");
|
var button = document.createElement("div");
|
button.className = "button";
|
for (var i = 0; i < li.length; i++) {
|
var a = document.createElement("a");
|
a.innerHTML = i + 1; a.onclick = function () {
|
clearTimeout(timer); clearTimeout(timer2); clearTimeout(timer3); j = parseInt(this.innerHTML) - 1; scton = 0; t = 63; opac = 0; fadeon();
|
};
|
a.className = "b1"; a.onmouseover = function () {
|
this.className = "b2"
|
}; a.onmouseout = function () {
|
this.className = "b1"; sc(j)
|
}; button.appendChild(a);
|
}
|
//控制图层透明度
|
function alpha(obj, n) {
|
if (document.all) { obj.style.filter = "alpha(opacity=" + n + ")"; }
|
else { obj.style.opacity = (n / 100); }
|
}
|
//控制焦点按钮
|
function sc(n) {
|
for (var i = 0; i < li.length; i++) { button.childNodes[i].className = "b1" };
|
button.childNodes[n].className = "b2";
|
}
|
id.className = "d1"; div.className = "d2";
|
id.appendChild(span); id.appendChild(div); id.appendChild(button);
|
//渐显
|
var fadeon = function () {
|
opac += 5; div.innerHTML = li[j].innerHTML; span.innerHTML = getTag("img", li[j])[0].alt; alpha(div, opac);
|
if (scton == 0) { sc(j); num = -2; scrolltxt(); scton = 1 };
|
if (opac < 100) { timer = setTimeout(fadeon, interv2) }
|
else { timer2 = setTimeout(fadeout, interv); };
|
}
|
//渐隐
|
var fadeout = function () {
|
opac -= 5; div.innerHTML = li[j].innerHTML; alpha(div, opac);
|
if (scton == 0) { num = 2; scrolltxt(); scton = 1 };
|
if (opac > 0) { timer = setTimeout(fadeout, interv2) }
|
else {
|
if (j < li.length - 1) { j++ }
|
else { j = 0 }; fadeon()
|
};
|
}
|
//滚动文字
|
var scrolltxt = function () {
|
t += num; span.style.marginTop = t + "px";
|
if (num < 0 && t > 3) { timer3 = setTimeout(scrolltxt, interv2) }
|
else if (num > 0 && t < 62) { timer3 = setTimeout(scrolltxt, interv2) }
|
else { scton = 0 }
|
};
|
fadeon();
|
}
|
//初始化
|
window.onload = s;
|
</script>
|
<title></title>
|
</head>
|
<body>
|
<div id="fade_focus">
|
<div class="loading"></div>
|
<ul>
|
<li><img src="./res/images/main/222.jpg" alt="" height="395px" width="100%"/></li>
|
<li><img src="./res/images/main/333.jpg" alt="" height="395px" width="100%"/></li>
|
<li><img src="./res/images/main/444.jpg" alt="" height="395px" width="100%"/></li>
|
<li><img src="./res/images/main/555.jpg" alt="" height="395px" width="100%"/></li>
|
</ul>
|
</div>
|
|
</body>
|
</html>
|
