<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript"> window.onload = function () { var demo_t0 = document.getElementById("demo_t0"); var demo_t1 = document.getElementById("demo_t1"); var demo_t2 = document.getElementById("demo_t2"); var speed = 30; demo_t2.innerHTML = demo_t1.innerHTML function Marquee() { if (demo_t2.offsetTop - demo_t0.scrollTop <= 8) demo_t0.scrollTop -= demo_t1.offsetHeight; else { demo_t0.scrollTop++; } } var MyMar = setInterval(Marquee, speed); demo_t0.onmouseover = function () { clearInterval(MyMar) }; demo_t0.onmouseout = function () { MyMar = setInterval(Marquee, speed) }; } </script> </head> <body> <div id="demo_t0" style="height: 200px; 200px; overflow: hidden;"> <div id="demo_t1" style="100%; height:120px;"> <div style="float: left;45%;height:100px; background:Blue;"> </div> <div style="float:left;10%;height:100px;"></div> <div style="float: right;45%;height:100px; background:Gray;"> </div> </div> <div id="demo_t2" style="100%;height:200px;"> </div> </div> </body> </html>
演示效果:
项目结构:
