<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>散人笔记 &#187; MARQUEE</title>
	<atom:link href="http://www.uideas.cn/post/tag/marquee/feed" rel="self" type="application/rss+xml" />
	<link>http://www.uideas.cn</link>
	<description>生活来源于创意,所以我懂生活</description>
	<lastBuildDate>Sun, 22 Aug 2010 07:17:13 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.6</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>有关图片或文字的连续滚动</title>
		<link>http://www.uideas.cn/post/99.html</link>
		<comments>http://www.uideas.cn/post/99.html#comments</comments>
		<pubDate>Tue, 20 Oct 2009 11:22:27 +0000</pubDate>
		<dc:creator>kos</dc:creator>
				<category><![CDATA[DIV+CSS]]></category>
		<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[MARQUEE]]></category>
		<category><![CDATA[setInterval]]></category>
		<category><![CDATA[setTimeout]]></category>
		<category><![CDATA[滚动]]></category>

		<guid isPermaLink="false">http://uideas.cn/?p=99</guid>
		<description><![CDATA[　　往往在页面设计中会用到文字或图片的滚动效果，连续性一直倍爱从事IT行业的关注和崇拜，要达到连续滚动则需要用js来控制，通过使用setTimeout和setInterval方法都能实现这样的功能，下面例子仅以setInterval为例作一个简单介绍。]]></description>
			<content:encoded><![CDATA[<p>　　在处理滚动上，通常采用Marquee，只需要加上这个标签，给这个标签设定一个宽度和高度就能实现了，代码如下：</p>
<form enctype="application/x-www-form-urlencoded"><code></p>
<div class="Nodiv">
<div class="Notitle">CODE</div>
<div class="Nocontent"><textarea class="textarea" cols="20" rows="8">&lt;marquee direction="up" height="100" width="300" style="background:#F6F6F6;border:1px #999999 solid;" onmouseout="this.start()" onMouseOver="this.stop()" scrollamount="2"&gt; &lt;p&gt;这只是一个简单的例子&lt;/p&gt; &lt;p&gt;仅仅利用marquee实现的滚动&lt;/p&gt; &lt;p&gt;当然&lt;/p&gt; &lt;p&gt;没有太多必要的话&lt;/p&gt; &lt;p&gt;用这种滚动已经能让页面有动感了&lt;/p&gt; &lt;/marquee&gt; </textarea></div>
<div class="Nobutton">
<input onclick="RunCode(this)" type="button" value="运行代码" />
<input onclick="CopyCode(this)" type="button" value="复制代码" />
<input onclick="SaveCode(this)" type="button" value="保存代码" />
<span class="Nots">[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</span>
</div>
</div>
<p></code><br />
</form>
<p>　　然而这样的滚动会出现一个问题，当marquee里面的内容滚动一次完成后，会出现一片空白，再重新滚动，会影响到页面的整体效果，要达到连续滚动则需要用js来控制，通过使用setTimeout和setInterval方法都能实现这样的功能，下面例子仅以setInterval为例作一个简单介绍。<br />
代码如下：</p>
<form enctype="application/x-www-form-urlencoded"><code></p>
<div class="Nodiv">
<div class="Notitle">CODE</div>
<div class="Nocontent"><textarea class="textarea" cols="20" rows="8">&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;style type="text/css"&gt; &lt;!-- #Nomain{border: 1px #FFFF00 solid; padding:10px; width: 500px;} #Nodiv {background: #FFF;overflow:hidden;width: 500px; height:60px;} #Nocov {float: left;width:400%;} #Nocontent {float: left;} #Nofloat {float: left;} --&gt; &lt;/style&gt; &lt;div id="Nomain"&gt; &lt;div id="Nodiv"&gt; &lt;div id="Nocov"&gt; &lt;div id="Nocontent"&gt; &lt;img src="http://www.uideas.cn/download/logo.gif" width="145" height="60" border="0" /&gt;&lt;img src="http://www.uideas.cn/download/logo.gif" width="145" height="60" border="0" /&gt;&lt;img src="http://www.uideas.cn/download/logo.gif" width="145" height="60" border="0" /&gt;&lt;img src="http://www.uideas.cn/download/logo.gif" width="145" height="60" border="0" /&gt;&lt;img src="http://www.uideas.cn/download/logo.gif" width="145" height="60" border="0" /&gt;&lt;img src="http://www.uideas.cn/download/logo.gif" width="145" height="60" border="0" /&gt; &lt;/div&gt; &lt;div id="Nofloat"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;script&gt; var speed=10; var Nodiv=document.getElementById("Nodiv"); var Nocontent=document.getElementById("Nocontent"); var Nofloat=document.getElementById("Nofloat"); Nofloat.innerHTML=Nocontent.innerHTML; function Marquee(){ 	if(Nofloat.offsetWidth-Nodiv.scrollLeft&lt;=0) 	Nodiv.scrollLeft-=Nocontent.offsetWidth; 	else{ 	Nodiv.scrollLeft++; 	} } var MyMar=setInterval(Marquee,speed); Nodiv.onmouseover=function() {clearInterval(MyMar)}; Nodiv.onmouseout=function() {MyMar=setInterval(Marquee,speed)} &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</textarea></div>
<div class="Nobutton">
<input onclick="RunCode(this)" type="button" value="运行代码" />
<input onclick="CopyCode(this)" type="button" value="复制代码" />
<input onclick="SaveCode(this)" type="button" value="保存代码" />
<span class="Nots">[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</span>
</div>
</div>
<p></code><br />
</form>
<p>说明一下，speed的值越大，移动越慢，反知，这里设置的是图片向左移动，你只需要稍加修改就可以让其向右移动，甚至向上，或向下移动都行！目前没发现有bug,如果有值得改进的地方，希望各位提出宝贵的意见！</p>
]]></content:encoded>
			<wfw:commentRss>http://www.uideas.cn/post/99.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>常用javascript</title>
		<link>http://www.uideas.cn/post/58.html</link>
		<comments>http://www.uideas.cn/post/58.html#comments</comments>
		<pubDate>Thu, 15 Oct 2009 13:28:53 +0000</pubDate>
		<dc:creator>kos</dc:creator>
				<category><![CDATA[JAVASCRIPT]]></category>
		<category><![CDATA[ExecWB]]></category>
		<category><![CDATA[external]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[MARQUEE]]></category>
		<category><![CDATA[refresh]]></category>

		<guid isPermaLink="false">http://uideas.cn/?p=58</guid>
		<description><![CDATA[[转载]常用javascript

【打开】
&#60;input name=Button onClick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开&#62;
&#60;OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0&#62;&#60;/OBJECT&#62; 
……]]></description>
			<content:encoded><![CDATA[<p><strong>[转载]常用javascript</strong><br />
【打开】<br />
&lt;input name=Button onClick=document.all.WebBrowser.ExecWB(1,1) type=button value=打开&gt;<br />
&lt;OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0&gt;&lt;/OBJECT&gt;<br />
【另存为】<br />
&lt;input name=Button onClick=document.all.WebBrowser.ExecWB(4,1) type=button value=另存为&gt;&lt;OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0&gt;&lt;/OBJECT&gt;<br />
【属性】<br />
&lt;input name=Button onClick=document.all.WebBrowser.ExecWB(10,1) type=button value=属性&gt;&lt;OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0&gt;&lt;/OBJECT&gt;<br />
【打印】<br />
&lt;input name=Button onClick=document.all.WebBrowser.ExecWB(6,1) type=button value=打印&gt;&lt;OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0&gt;&lt;/OBJECT&gt;<br />
【页面设置】<br />
&lt;input name=Button onClick=document.all.WebBrowser.ExecWB(8,1) type=button value=页面设置&gt;&lt;OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0&gt;&lt;/OBJECT&gt;<br />
【刷新】<br />
&lt;input type=button value=刷新 name=refresh onclick=&#8221;window.location.reload()&#8221;&gt;<br />
【导入收藏】<br />
&lt;input type=&#8221;button&#8221; name=&#8221;Button&#8221; value=&#8221;导入收藏夹&#8221; onClick=window.external.ImportExportFavorites(true,);&gt;<br />
【导出收藏】<br />
&lt;input type=&#8221;button&#8221; name=&#8221;Button3&#8243; value=&#8221;导出收藏夹&#8221; onClick=window.external.ImportExportFavorites(false,);&gt;<br />
【加入收藏】<br />
&lt;INPUT name=Button2 onclick=&#8221;window.external.AddFavorite(location.href, document.title)&#8221; type=button value=加入收藏夹&gt;<br />
【整理收藏夹】<br />
&lt;INPUT name=Submit2 onclick=&#8221;window.external.ShowBrowserUI(OrganizeFavorites, null)&#8221; type=button value=整理收藏夹&gt;<br />
【查看原文件】<br />
&lt;INPUT name=Button onclick=window.location = &#8220;view-source:&#8221; + window.location.href type=button value=查看源文件&gt;<br />
【语言设置】<br />
&lt;INPUT name=Button onclick=&#8221;window.external.ShowBrowserUI(LanguageDialog, null)&#8221; type=button value=语言设置&gt;<br />
【前进】<br />
&lt;INPUT name=Submit onclick=history.go(1) type=submit value=前进&gt;<br />
【后退】<br />
&lt;INPUT name=Submit2 onclick=history.go(-1) type=submit value=后退&gt;<br />
．让文字不停地滚动</p>
<p>　　＜MARQUEE＞滚动文字＜/MARQUEE＞</p>
<p>2．记录并显示网页的最后修改时间</p>
<p>　　＜script language=javascript＞<br />
　　 document．write(&#8221;最后更新时间: &#8221; + document．lastModified + &#8220;&#8221;)<br />
　　 ＜/script＞</p>
<p>3．关闭当前窗口</p>
<p>　　＜a href=&#8221;/&#8221;onClick=&#8221;javascript：window.close();return false;&#8221;＞关闭窗口＜/a＞</p>
<p>4．5秒后关闭当前页</p>
<p>　　＜script language=&#8221;javascript&#8221;＞<br />
　　 ＜!&#8211;<br />
　　 setTimeout(&amp;#39;window.close();&amp;#39;,5000);<br />
　　 &#8211;＞<br />
　　 ＜/script＞</p>
<p>5．2秒后载入指定网页</p>
<p>　　＜head＞<br />
　　 ＜meta http-equiv=&#8221;refresh&#8221; content=&#8221;2;URL=http://你的网址&#8221;＞<br />
　　 ＜/head＞</p>
<p>6．添加到收藏夹</p>
<p>　　＜Script Language=&#8221;javascript&#8221;＞<br />
　　 function bookmarkit()<br />
　　 {<br />
　　 window.external.addFavorite(&amp;#39;http://你的网址&amp;#39;,&amp;#39;你的网站名称&amp;#39;)<br />
　　 }<br />
　　 if (document．all)document．write(&amp;#39;＜a href=&#8221;#&#8221; onClick=&#8221;bookmarkit()&#8221;＞加入收藏夹＜/a＞&amp;#39;)<br />
　　 ＜/Script＞</p>
<p>7．让超链接不显示下划线</p>
<p>　　＜style type=&#8221;text/css&#8221;＞<br />
　　 ＜!-<br />
　　 a:link{text-decoration:none}<br />
　　 a:hover{text-decoration:none}<br />
　　 a:visited{text-decoration:none}<br />
　　 -＞<br />
　　 ＜/style＞</p>
<p>8．禁止鼠标右键的动作</p>
<p>　　＜Script Language = &#8220;javascript&#8221;＞<br />
　　 function click() { if (event.button==2||event.button==3)<br />
　　 {<br />
　　 alert(&amp;#39;禁止鼠标右键&amp;#39;);<br />
　　 }<br />
　　 document．onmousedown=click // &#8211;＞<br />
　　 ＜/Script＞</p>
<p>9．设置该页为首页</p>
<p>　　＜body bgcolor=&#8221;#FFFFFF&#8221; text=&#8221;#000000&#8243;＞<br />
　　 ＜!&#8211; 网址：http://你的网址&#8211;＞<br />
　　 ＜a style=&#8221;cursor:hand&#8221; HREF<br />
　　 onClick=&#8221;this.style.behavior=&amp;#39;url(#default#homepage)&amp;#39;;<br />
　　 this.setHomePage(&amp;#39;你的网站名称);&#8221;＞＜font color=&#8221;000000&#8243; size=&#8221;2&#8243; face=&#8221;宋体&#8221;＞设为首页＜/font＞＜/a＞<br />
　　 ＜/body＞</p>
<p>10．节日倒计时</p>
<p>　　＜Script Language=&#8221;javascript&#8221;＞<br />
　　 var timedate= new Date(&#8221;December 25,2003&#8243;);<br />
　　 var times=&#8221;圣诞节&#8221;;<br />
　　 var now = new Date();<br />
　　 var date = timedate.getTime() &#8211; now.getTime();<br />
　　 var time = Math.floor(date / (1000 * 60 * 60 * 24));<br />
　　 if (time ＞= 0)<br />
　　 document．write(&#8221;现在离&#8221;+times+&#8221;还有: &#8220;+time +&#8221;天&#8221;)＜/Script＞</p>
<p>11．单击按钮打印出当前页</p>
<p>　　＜Script Language=&#8221;javascript&#8221;＞<br />
　　 ＜!&#8211; Begin<br />
　　 if (window.print) {<br />
　　 document．write(&amp;#39;＜form＞&amp;#39;<br />
　　 + &amp;#39;＜input type=button name=print value=&#8221;打印本页&#8221; &amp;#39;<br />
　　 + &amp;#39;onClick=&#8221;javascript：window.print()&#8221;＞＜/form＞&amp;#39;);<br />
　　 }<br />
　　 // End &#8211;＞<br />
　　 ＜/Script＞</p>
<p>12．单击按钮‘另存为’当前页</p>
<p>　　＜input type=&#8221;button&#8221; name=&#8221;Button&#8221; value=&#8221;保存本页&#8221;<br />
　　 onClick=&#8221;document．all.button.ExecWB(4,1)&#8221;＞<br />
　　 ＜object id=&#8221;button&#8221;<br />
　　 width=0<br />
　　 height=0<br />
　　 classid=&#8221;CLSID:8856F961-340A-11D0-A96B-00C04FD705A2&#8243;＞<br />
　　 ＜embed width=&#8221;0&#8243; height=&#8221;0&#8243;＞＜/embed＞<br />
　　 ＜/object＞</p>
<p>13．显示系统当前日期</p>
<p>　　＜script language=javascript＞<br />
　　 today=new Date();<br />
　　 function date(){<br />
　　 this.length=date.arguments.length<br />
　　 for(var i=0;i＜this.length;i++)<br />
　　 this[i+1]=date.arguments }<br />
　　 var d=new date(&#8221;星期日&#8221;,&#8221;星期一&#8221;,&#8221;星期二&#8221;,&#8221;星期三&#8221;,&#8221;星期四&#8221;,&#8221;星期五&#8221;,&#8221;星期六&#8221;);<br />
　　 document．write(<br />
　　 &#8220;＜font color=##000000 style=&amp;#39;font-size:9pt;font-family: 宋体&amp;#39;＞ &#8220;,<br />
　　 today.getYear(),&#8221;年&#8221;,today.getMonth()+1,&#8221;月&#8221;,today.getDate(),&#8221;日&#8221;,<br />
　　 d[today.getDay()+1],&#8221;＜/font＞&#8221; );<br />
　　 ＜/script＞</p>
<p>14．不同时间段显示不同问候语</p>
<p>　　＜Script Language=&#8221;javascript&#8221;＞<br />
　　 ＜!&#8211;<br />
　　 var text=&#8221;"; day = new Date( ); time = day.getHours( );<br />
　　 if (( time＞=0) &amp;&amp; (time ＜ 7 ))<br />
　　　　 text=&#8221;夜猫子，要注意身体哦！ &#8221;<br />
　　 if (( time ＞= 7 ) &amp;&amp; (time ＜ 12))<br />
　　　　 text=&#8221;今天天气……哈哈哈，不去玩吗？&#8221;<br />
　　 if (( time ＞= 12) &amp;&amp; (time ＜ 14))<br />
　　　　 text=&#8221;午休时间哦，朋友一定是不习惯午睡的吧？！&#8221;<br />
　　 if (( time ＞=14) &amp;&amp; (time ＜ 18))<br />
　　　　 text=&#8221;下午茶的时间到了，休息一下吧！ &#8221;<br />
　　 if ((time ＞= 18) &amp;&amp; (time ＜= 22))<br />
　　　　 text=&#8221;您又来了，可别和MM聊太久哦！&#8221;<br />
　　 if ((time ＞= 22) &amp;&amp; (time ＜ 24))<br />
　　　　 text=&#8221;很晚了哦，注意休息呀！&#8221;<br />
　　 document．write(text)<br />
　　 //&#8212;＞<br />
　　 ＜/Script＞</p>
<p>15．水中倒影效果</p>
<p>　　＜img id=&#8221;reflect&#8221; src=&#8221;你自己的图片文件名&#8221; width=&#8221;175&#8243; height=&#8221;59&#8243;＞<br />
　　 ＜script language=&#8221;javascript&#8221;＞<br />
　　 function f1()<br />
　　 {<br />
　　　　 setInterval(&#8221;mdiv.filters.wave.phase+=10&#8243;,100);<br />
　　 }<br />
　　 if (document．all)<br />
　　 {<br />
　　　　 document．write(&amp;#39;＜img id=mdiv src=&#8221;&amp;#39;+document．all.reflect.src+&amp;#39;&#8221;<br />
　　　　 style=&#8221;filter:wave(strength=3,freq=3,phase=0,lightstrength=30) blur() flipv()&#8221;＞&amp;#39;)<br />
　　　　 window.onload=f1<br />
　　 }<br />
　　 ＜/script＞</p>
<p>16．慢慢变大的窗口</p>
<p>　　＜Script Language=&#8221;javascript&#8221;＞<br />
　　 ＜!&#8211;<br />
　　 var Windowsheight=100<br />
　　 var Windowswidth=100<br />
　　 var numx=5<br />
　　 function openwindow(thelocation){<br />
　　 temploc=thelocation<br />
　　 if<br />
　　 (!(window.resizeTo&amp;&amp;document．all)&amp;&amp;!(window.resizeTo&amp;&amp;document．getElementById))<br />
　　 {<br />
　　　　 window.open(thelocation)<br />
　　　　 return<br />
　　 }<br />
　　 windowsize=window.open(&#8221;",&#8221;",&#8221;scrollbars&#8221;)<br />
　　 windowsize.moveTo(0,0)<br />
　　 windowsize.resizeTo(100,100)<br />
　　 tenumxt()<br />
　　 }<br />
　　 function tenumxt(){<br />
　　 if (Windowsheight＞=screen.availHeight-3)<br />
　　　　 numx=0<br />
　　 windowsize.resizeBy(5,numx)<br />
　　 Windowsheight+=5<br />
　　 Windowswidth+=5<br />
　　 if (Windowswidth＞=screen.width-5)<br />
　　 {<br />
　　　　 windowsize.location=temploc<br />
　　　　 Windowsheight=100<br />
　　　　 Windowswidth=100<br />
　　　　 numx=5<br />
　　　　 return<br />
　　 }<br />
　　 setTimeout(&#8221;tenumxt()&#8221;,50)<br />
　　 }<br />
　　 //&#8211;＞<br />
　　 ＜/script＞<br />
　　 ＜p＞＜a href=&#8221;javascript：openwindow(<a href="http://www.xxx.com/">http://www.xxx.com/</a>)&#8221;＞进入＜/a＞</p>
<p>17．改变IE地址栏的IE图标</p>
<p>　　我们要先做一个16*16的icon（图标文件），保存为index.ico。把这个图标文件上传到根目录下并在首页＜head＞＜/head＞之间加上如下代码：<br />
       ＜link REL = &#8220;Shortcut Icon&#8221; href=&#8221;index.ico&#8221;＞</p>
]]></content:encoded>
			<wfw:commentRss>http://www.uideas.cn/post/58.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
