WebView loadDataWithBaseURL实现滚动字幕问题？

danier_sky 2012-04-17 11:15:57



<html>

<head>

<title>文字走马灯</title>

</head>

<SCRIPT Language="JavaScript">



</SCRIPT>

<BODY  >

<SCRIPT language=JavaScript>                     

function marquee1()                     

{                     

  document.write("<div style='width:90%;overflow:hidden;' id=marquee onmouseover=clearInterval(repeat)  



onmouseout=repeat=setInterval(scrollMarquee,1)>")                     

}                     

function marquee2()                     

{               

  document.write("</div>")  

  marquee.childNodes[0].align='left';

 

  if(marquee.childNodes[0].offsetWidth>marquee.offsetWidth) {

   marquee.appendChild(marquee.childNodes[0].cloneNode(true));

   }

  else {

   for(var i=0;i<Math.round(marquee.offsetWidth/marquee.childNodes[0].offsetWidth)+1;i++) {

    marquee.appendChild(marquee.childNodes[0].cloneNode(true));

    }

   }

 

}       

 repeat=setInterval(scrollMarquee,1);              

function scrollMarquee() {

 if(marquee.scrollLeft<marquee.childNodes[0].offsetWidth)

  marquee.scrollLeft++;

 else

  marquee.scrollLeft=0;

  }                 

</SCRIPT>           

 <SCRIPT language=JavaScript>marquee1();</SCRIPT>

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<tr><td>akkllkjkkljljl1111111111</td></tr>

</table>

            <SCRIPT language="JavaScript">marquee2();</SCRIPT>

</body>

</html>

上面的代码在HTML中可执行，可应用到android WebView就不正常了，大虾帮忙看看；
主要是想实现平滑的走马灯效果





protected void onCreate(Bundle savedInstanceState) {

   super.onCreate(savedInstanceState);

   this.setContentView(R.layout.webview);

		this.webView=(WebView) this.findViewById(R.id.webview); 

		this.webView.getSettings().setSupportZoom(false); 

		this.webView.getSettings().setJavaScriptEnabled(true);

    this.webView.loadDataWithBaseURL("", webString(), "text/html", "utf-8", ""); 

}



public String webString (){

		String js = "<div><SCRIPT language=\"JavaScript\">testFunc();";

		js += " function marquee1(){\r\n";

		js += "		document.write(\"<div style='width:100%;overflow:hidden;border-style:solid;background-color:blue;' id='marquee'><nobr>\")";

		js += " }\r\n";

		js += " function marquee2(){\r\n";

		js += "		document.write(\"</nobr></div>\" + marquee.offsetWidth+'  '+tab.offsetWidth)\r\n";

//		js += " 	marquee.childNodes[0].align='left';";

		js += "		tab.align = 'left'\r\n"; 

		js += "		if(tab.offsetWidth > marquee.offsetWidth){\r\n"; 	//  299 > 339 		//offsetWidth:对象的可见宽度

		js += "			marquee.appendChild(tab.cloneNode(true))\r\n;";

		js += "		}else{\r\n";

		js += "			for(var i=0;i<Math.round(marquee.offsetWidth/tab.offsetWidth)+1;i++){\r\n";

		js += "				marquee.appendChild(tab.cloneNode(true));\r\n";			//代表复制子元素

		js += "			}\r\n";

		js += "		}\r\n"; 

		js += "	}\r\n";

		js += "	var repeat = setInterval(scrollMarquee,50);";

		js += "	function scrollMarquee(){\r\n";

		

		js += "		if(marquee.scrollLeft < tab.offsetWidth)";

		js += "			marquee.scrollLeft++;";

		js += "		else";

		js += "			marquee.scrollLeft = 0;";

		js += "		document.write(marquee.scrollLeft + '  '+tab.offsetWidth);";

		js += "	}";

		js += "</script>";

		js += "<script language=\"JavaScript\">marquee1();</script>";

		js += "<table id=\"tab\" width=\"98%\" border=\"1\"><tr><td>td1s</td><td>td2</td></tr></table>";

		js += "<script language=\"JavaScript\">marquee2();</script></div>";

		System.out.println(js);

		return js;