<html>
<head>
<title>左右滚动的图片效果 - 51windows.Net</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#999999"><table border="1" width="760" align="center">
<tr>
<td width="215"> </td>
<td width="545">
<!-- 滚动代码 begin -->
<div id="demo" style="overflow:hidden;height:120px;width:543px;">
<table width="100%" cellspacing="0">
<tr>
<td id="demo1">
<table cellspacing="0" cellspacing="2">
<tr>
<td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder_1/jsimg/TN_Feng016.JPG" border="0"/></a></td>
<td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder_1/jsimg/TN_Feng017.JPG" border="0"/></a></td>
<td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder_1/jsimg/TN_Feng018.JPG" border="0"/></a></td>
<td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder_1/jsimg/TN_Feng019.JPG" border="0"/></a></td>
<td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder_1/jsimg/TN_Feng020.JPG" border="0"/></a></td>
<td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder_1/jsimg/TN_Feng021.JPG" border="0"/></a></td>
</tr>
</table>
</td>
<td id="demo2"></td>
</tr>
</table>
</div>
<!-- 滚动代码 end -->
</td>
</tr>
</table>
<script type="text/javascript">
var speed=50
demo2.innerHTML=demo1.innerHTML
function Marquee(direct,MainId,contentId,copyId){
var objMain = document.getElementById(MainId);
var objContent = document.getElementById(contentId);
var objCopy = document.getElementById(copyId);
var mainWidth = objMain.offsetWidth
var contentWidth = objContent.offsetWidth
var copyWidth = objCopy.offsetWidth;
var mainHeight = objMain.offsetHeight;
var contentHeight = objContent.offsetHeight;
var copyHeight = objCopy.offsetHeight;
if (direct=="LEFT"){
if (copyWidth-objMain.scrollLeft<=0){
objMain.scrollLeft-=contentWidth;
}else{
objMain.scrollLeft+=2;
}
}else if (direct=="RIGHT"){
if (copyWidth-mainWidth-objMain.scrollLeft>=0){
objMain.scrollLeft=contentWidth + copyWidth - mainWidth;
}else{
objMain.scrollLeft-=2;
}
}else if (direct=="UP"){
if (copyHeight-objMain.scrollTop<=0){
objMain.scrollTop-=contentHeight;
}else{
objMain.scrollTop+=2;
}
}else if (direct=="DOWN"){
if (copyHeight-mainHeight-objMain.scrollTop>=0){
objMain.scrollTop=contentHeight + copyHeight - mainHeight;
}else{
objMain.scrollTop-=2;
}
}
}
var v1Scroll = setInterval(new Function("Marquee(direct,divid,td1,td2)"),speed);
v1demo.onmouseover=function() {clearInterval(v1Scroll)}
v1demo.onmouseout=function() {v1Scroll=setInterval(new Function("Marquee(direct,divid,td1,td2)"),speed)}
</script>
</body>
</html>
对这段代码的脚本 我想把它封装起来 然后外面用一个函数就能够调用<script></script>里面的内容 该怎么做呢?
<head>
<title>左右滚动的图片效果 - 51windows.Net</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#999999"><table border="1" width="760" align="center">
<tr>
<td width="215"> </td>
<td width="545">
<!-- 滚动代码 begin -->
<div id="demo" style="overflow:hidden;height:120px;width:543px;">
<table width="100%" cellspacing="0">
<tr>
<td id="demo1">
<table cellspacing="0" cellspacing="2">
<tr>
<td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder_1/jsimg/TN_Feng016.JPG" border="0"/></a></td>
<td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder_1/jsimg/TN_Feng017.JPG" border="0"/></a></td>
<td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder_1/jsimg/TN_Feng018.JPG" border="0"/></a></td>
<td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder_1/jsimg/TN_Feng019.JPG" border="0"/></a></td>
<td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder_1/jsimg/TN_Feng020.JPG" border="0"/></a></td>
<td><a href="http://www.51windows.net/mypic/sight/page_01.htm" target="_blank"><img src="http://www.51windows.net/51wfolder_1/jsimg/TN_Feng021.JPG" border="0"/></a></td>
</tr>
</table>
</td>
<td id="demo2"></td>
</tr>
</table>
</div>
<!-- 滚动代码 end -->
</td>
</tr>
</table>
<script type="text/javascript">
var speed=50
demo2.innerHTML=demo1.innerHTML
function Marquee(direct,MainId,contentId,copyId){
var objMain = document.getElementById(MainId);
var objContent = document.getElementById(contentId);
var objCopy = document.getElementById(copyId);
var mainWidth = objMain.offsetWidth
var contentWidth = objContent.offsetWidth
var copyWidth = objCopy.offsetWidth;
var mainHeight = objMain.offsetHeight;
var contentHeight = objContent.offsetHeight;
var copyHeight = objCopy.offsetHeight;
if (direct=="LEFT"){
if (copyWidth-objMain.scrollLeft<=0){
objMain.scrollLeft-=contentWidth;
}else{
objMain.scrollLeft+=2;
}
}else if (direct=="RIGHT"){
if (copyWidth-mainWidth-objMain.scrollLeft>=0){
objMain.scrollLeft=contentWidth + copyWidth - mainWidth;
}else{
objMain.scrollLeft-=2;
}
}else if (direct=="UP"){
if (copyHeight-objMain.scrollTop<=0){
objMain.scrollTop-=contentHeight;
}else{
objMain.scrollTop+=2;
}
}else if (direct=="DOWN"){
if (copyHeight-mainHeight-objMain.scrollTop>=0){
objMain.scrollTop=contentHeight + copyHeight - mainHeight;
}else{
objMain.scrollTop-=2;
}
}
}
var v1Scroll = setInterval(new Function("Marquee(direct,divid,td1,td2)"),speed);
v1demo.onmouseover=function() {clearInterval(v1Scroll)}
v1demo.onmouseout=function() {v1Scroll=setInterval(new Function("Marquee(direct,divid,td1,td2)"),speed)}
</script>
</body>
</html>
对这段代码的脚本 我想把它封装起来 然后外面用一个函数就能够调用<script></script>里面的内容 该怎么做呢?
var speed=50
demo2.innerHTML=demo1.innerHTML
var v1Scroll = setInterval(new Function("Marquee(direct,divid,td1,td2)"),speed);
demo2.innerHTML=demo1.innerHTML
function Marquee(direct,MainId,contentId,copyId){
var objMain = document.getElementById(MainId);
var objContent = document.getElementById(contentId);
var objCopy = document.getElementById(copyId);
var mainWidth = objMain.offsetWidth
var contentWidth = objContent.offsetWidth
var copyWidth = objCopy.offsetWidth;
var mainHeight = objMain.offsetHeight;
var contentHeight = objContent.offsetHeight;
var copyHeight = objCopy.offsetHeight;
if (direct=="LEFT"){
if (copyWidth-objMain.scrollLeft<=0){
objMain.scrollLeft-=contentWidth;
}else{
objMain.scrollLeft+=2;
}
}else if (direct=="RIGHT"){
if (copyWidth-mainWidth-objMain.scrollLeft>=0){
objMain.scrollLeft=contentWidth + copyWidth - mainWidth;
}else{
objMain.scrollLeft-=2;
}
}else if (direct=="UP"){
if (copyHeight-objMain.scrollTop<=0){
objMain.scrollTop-=contentHeight;
}else{
objMain.scrollTop+=2;
}
}else if (direct=="DOWN"){
if (copyHeight-mainHeight-objMain.scrollTop>=0){
objMain.scrollTop=contentHeight + copyHeight - mainHeight;
}else{
objMain.scrollTop-=2;
}
}
}var v1Scroll = setInterval(new Function("Marquee('LEFT','demo','demo1','demo2')"),speed);
v1demo.onmouseover=function() {clearInterval(v1Scroll)}
v1demo.onmouseout=function() {v1Scroll=setInterval(new Function("Marquee('LEFT','demo','demo1','demo2')"),speed)}</script>
hbhbhbhbhb1021(天外水火(我要多努力)) 我想问下var v1Scroll = setInterval(new Function("Marquee('LEFT','demo','demo1','demo2')"),speed);里面的new Function为什么要这样写呢?为什么不这样参数就传递不进去呢?还有就是我上面说的意思是我想把脚本里的代码都封装起来,然后页面下通过调用一个函数,能够表现出和没有封装前一样的效果~~~
JS中函数也是一个对象,差不多象构造函数的参数一样
new Function("Marquee('"+LEFT+"','"+demo+"','"+demo1+"','"+demo2+"')")