水波形图片切换
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="top.ascx.cs" Inherits="Ascx_top" %>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-29308514-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript" language="javascript">
function jiaohuandao(tdid1,tdid2){
window.document.getElementById(tdid1).style.display = 'none';
window.document.getElementById(tdid2).style.display = 'block';
}
function huanimg(divid,imgid){
window.document.getElementById(divid).style.backgroundImage = "url(images/"+imgid +".jpg)";
}
</script>
<script type="text/javascript">
function correctPNG()
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<style type="text/css">
a { /*无设置时的样式*/
color:#000;
font-family:微软雅黑;
}
a:link { /*正常链接的样式*/
font-family:微软雅黑;
color:#000;
text-decoration:none;
}
a:visited { /*点过后的样式underline*/
font-family:微软雅黑;
text-decoration:none;
}
a:hover { /*鼠标移上的样式*/
font-family:微软雅黑;
text-decoration:none;
}
body{
font-family:微软雅黑;
}
</style>
<style type="text/css">
* {margin:0;padding:0;}
a:visited { /*点过后的样式underline*/
font-family:微软雅黑;
text-decoration:none;
}
#jsF {position:relative;margin:0;width:270px;height:185px;overflow:hidden;}
#jsF ul {position:absolute;top:0;left:0;list-style-type:none;z-index:1; border:none;}
#jsF li {display:block;position:absolute;top:0;margin:0;padding:0;overflow:hidden; border:none;}
</style>
<div>
<div style="width:100%; height:271px; overflow:hidden; background-image:url(admin/<%= u1 %>); background-repeat:repeat; background-position:center; ">
<div id="jsF"></div>
<div id="debug"></div>
<script>
//<[CDATA[
var jsF = document.getElementById('jsF');
var speed1 = 50, speed2 = 2000;
var iA = 0, iB = 0, iC = 0;
var bD = [];
var aImg = ['Admin/<%= u1 %>','Admin/<%= u2 %>','Admin/<%= u3 %>' ];
var aLink = ['#','#','#'];
var iImgWidth = 1422, iImgHeight = 271;
var iDivWidth = iImgWidth/10;
jsF.style.width = iImgWidth + 'px';
jsF.style.height = iImgHeight + 'px';
jsF.style.border = 0;
var oImg = [];
oImg[0] = new Image();
oImg[0].src = aImg[0];
oImg[1] = new Image();
oImg[1].src = aImg[1];
window.onload = function() {
jsF_create();
}
function jsF_create() {
if (aImg[iA+2] && !bD[iA+2]){
oImg[iA+2] = new Image();
oImg[iA+2].src = aImg[iA+2];
}
if (!bD[iA]) {
var oUl = document.createElement('ul');
/*oUl.style.position = 'absolute';
oUl.style.top = '0';
oUl.style.left = '0';*/
oUl.style.width = iImgWidth + 'px';
oUl.style.height = iImgHeight + 'px';
oUl.style.border = 0;
var oUlLi = document.createElement('li');
oUlLi.style.right = '0';
oUlLi.style.width = iDivWidth +'px';
oUlLi.style.height = iImgHeight + 'px';
oUlLi.style.border = 0;
var oLiA = document.createElement('a');
oLiA.href = aLink[iA];
var oLiImg = document.createElement('img');
oLiImg.src = oImg[iA].src;
oLiImg.style.marginLeft = -9*iDivWidth + 'px';
oLiA.appendChild(oLiImg);
oUlLi.appendChild(oLiA);
oUl.appendChild(oUlLi);
for (var i=0; i<10; i++) {
oUlLi = document.createElement('li');
oUlLi.style.right = i*iDivWidth + 'px';
oUlLi.style.width = 1.5*iDivWidth +'px';
oUlLi.style.height = iImgHeight + 'px';
oUlLi.style.border =0;
//oUlLi.style.background = color[i];
oLiA = document.createElement('a');
oLiA.href = aLink[iA];
oLiImg = document.createElement('img');
oLiImg.src = oImg[iA].src;
oLiImg.style.marginLeft = -9*iDivWidth + 'px';
oLiA.appendChild(oLiImg);
oUlLi.appendChild(oLiA);
//oUlLi.appendChild(document.createTextNode(i));
oUl.appendChild(oUlLi);
}
jsF.appendChild(oUl);
bD[iA] = !bD[iA];
}
jsF_show();
//document.getElementById('debug').innerText = jsF.innerHTML;
}
// http://www.codefans.net
function jsF_show(){
var oUl = jsF.getElementsByTagName('ul');
var oLi = oUl[iA].getElementsByTagName('li');
var oImgs = oUl[iA].getElementsByTagName('img');
oUl[iA].style.zIndex = ++iC;
for (var i=1; i<11; i++){
oImgs[i].style.marginLeft = -9*iDivWidth + 'px';
oImgs[i].style.visibility = 'hidden';
oImgs[i].style.border = 0;
}
jsF_move();
}
function jsF_move(){
var oUl = jsF.getElementsByTagName('ul');
var oLi = oUl[iA].getElementsByTagName('li');
var oImgs = oUl[iA].getElementsByTagName('img');
if (iB++<10)
oImgs[iB].style.visibility = 'visible';
for (var i=1; i<oImgs.length; i++) {
var iBgpx = parseInt(oImgs[i].style.marginLeft);
if (iBgpx<(i+0.5)*iDivWidth-iImgWidth) {
var iMovePx = Math.floor((iImgWidth-(i+0.5)*iDivWidth+iBgpx)/15);
oImgs[i].style.marginLeft = iBgpx - iMovePx + 'px';
} else {
oImgs[i].style.marginLeft = ((i+0.5)*iDivWidth-iImgWidth) + 'px';
}
}
//document.getElementById('debug').innerText = jsF.innerHTML;
if (parseInt(oImgs[10].style.marginLeft)<0.5*iDivWidth) {
setTimeout('jsF_move()',speed1);
} else {
iB = 0;
//document.getElementById('debug').innerText = oUl[iA].style.display;
iA = ++iA==aImg.length ? 0 : iA;
if (bD[iA]) {
setTimeout('jsF_show()',speed2);
} else {
setTimeout('jsF_create()',speed2);
}
}
}
//]]>
</script>
</div>
<div style=" overflow:hidden; width:100%; height:41px; line-height:41px; background-image:url(images/top2.jpg); background-repeat:repeat; text-align:center; ">
<div style=" width:950px; ">
<div οnclick="window.location='index.aspx'" style=" float:left; color:#fff; font-size:14px; cursor:pointer; ">首页</div><div οnclick="window.location='aboutlb.aspx'" style=" cursor:pointer; float:left; margin-left:40px; color:#fff; font-size:14px;">关于乐邦</div>
<div οnclick="window.location='news_list.aspx'" style=" cursor:pointer; float:left; margin-left:40px; color:#fff; font-size:14px;">乐邦资讯</div><div οnclick="window.location='pro_list.aspx'" style=" cursor:pointer; float:left; margin-left:40px; color:#fff; font-size:14px;">乐邦产品</div>
<div οnclick="window.location='tg.aspx'" style=" cursor:pointer; float:left; margin-left:40px; color:#fff; font-size:14px;">乐邦推广</div><div οnclick="window.location='zs.aspx'" style=" cursor:pointer; float:left; margin-left:40px; color:#fff; font-size:14px;">乐邦招商</div>
<div οnclick="window.location='pt.aspx'" style=" cursor:pointer; float:left; margin-left:40px; color:#fff; font-size:14px;">葡萄酒文化</div><div οnclick="window.location='hr.aspx'" style=" cursor:pointer; float:left; margin-left:40px; color:#fff; font-size:14px;">乐邦招贤</div>
<div οnclick="window.location='callme.aspx'" style=" cursor:pointer; float:left; margin-left:40px; color:#fff; font-size:14px;">联系我们</div><div οnclick="window.location='messages.aspx'" style=" cursor:pointer; float:left; margin-left:40px; color:#fff; font-size:14px;">互动专区</div>
</div>
</div>
</div>
