日期:2014-05-17 浏览次数:20424 次
<%@ 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