日期:2014-05-17 浏览次数:20507 次
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<script type="text/javascript" language="javascript">
window.onload = function () {
function getElement(id) {
return document.getElementById(id);
}
var speed = 30
var demo = getElement("demo");
var demo2 = getElement("demo2");
var demo1 = getElement("demo1");
demo2.innerHTML = demo1.innerHTML//复制demo1中的图片到demo2中
function Marqueeleft() {//向左滚动
if (demo2.offsetWidth - demo.scrollLeft <= 0)
demo.scrollLeft -= demo1.offsetWidth
else
demo.scrollLeft++
}
function Marqueeright() {//向右滚动
if (demo2.offsetWidth - demo.scrollLeft >= 565)
demo.scrollLeft += demo1.offsetWidth
else
demo.scrollLeft--
}
var MyMar = setInterval(Marqueeleft, speed)//自动开始滚动
Direction = 'Left'; //设定初始方向为向左滚
demo.onmouseover = function () { clearInterval(MyMar) }
demo.onmouseout = function () {
if (Direction == 'Left') {
MyMar = setInterval(Marqueeleft, speed)
} else if (Direction == 'Right') {
MyMar = setInterval(Marqueeright, speed)
}
};
getElement('left').onclick = function () {
clearInterval(MyMar);
MyMar = setInterval(Marqueeleft, speed)
Direction = 'Left';
};
getElement('left').onmouseover = function () {
this.style.opacity = 0.3;
this.style.filter = 'alpha(opacity=30)';
}
getElement('left').onmouseout = function () {
this.style.opacity = 0.05;
this.style.filter = 'alpha(opacity=5)';
}
getElement('right').onclick = function () {
clearInterval(MyMar);
MyMar = setInterval(Marqueeright, speed)
Direction = 'Right';
};
getElement('right').onmouseover = function () {
this.style.opacity = 0.3;
this.style.filter = 'alpha(opacity=30)';
}
getElement('right').onmouseout = function () {
this.style.opacity = 0.05;
this.style.filter = 'alpha(opacity=5)';
}
}
</script>
<style type="text/css">
#demo{overflow: hidden; width:565px; float:left; margin:0 10px; position:absolute; z-index:0;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="outer">
<div id="demo" >
<table width="565px" border="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td id="demo1" valign="top">
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr valign="top" >
<td align="center" style="border:1px solid #FFFFFF;">
<div