<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet type="text/xsl" href="css/rss.xslt"?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>NU blog</title><link>http://www.nudesign.cn/</link><description>个人网站，个人日志，网络日记，技术交流，学习提高</description><generator>RainbowSoft Studio Z-Blog 1.8 Arwen Build 81206</generator><language>zh-CN</language><copyright>Copyright 2007-2009 www.nudesign.cn. All Rights Reserved.&amp;amp;nbsp;&amp;amp;nbsp;苏ICP备07009262号</copyright><pubDate>Fri, 16 Dec 2011 10:28:31 +0800</pubDate><item><title>提高关键词排名的28个SEO技巧</title><author>nudesign@126.com (NU)</author><link>http://www.nudesign.cn/post/32.html</link><pubDate>Mon, 21 Mar 2011 11:53:30 +0800</pubDate><guid>http://www.nudesign.cn/post/32.html</guid><description><![CDATA[<p>28个让关键词排名明显改观的SEO技巧：</p><p><strong>关键词位置、密度、处理</strong></p><ol>    <li>URL中出现关键词（英文）</li>    <li>网页标题中出现关键词（1-3个）</li>    <li>关键词标签中出现关键词（1-3个）</li>    <li>描述标签中出现关键词（主关键词重复2次）</li>    <li>内容中自然出现关键词</li>    <li>内容第一段和最后一段出现关键词</li>    <li>H1，H2标签中出现关键词</li>    <li>导出<a href="/37_16_zh.html">链接锚文本</a>中包含关键词</li>    <li>图片的文件名包含关键词</li>    <li><a href="/37_55_zh.html">ALT属性</a>中出现关键词</li>    <li>关键词密度6-8%</li>    <li>对关键词加粗或斜体</li></ol><p>&nbsp;</p><p><strong>内容质量、更新频率、相关性</strong></p><ol>    <li>原创的内容最佳，切忌被多次转载的内容</li>    <li>内容独立性，与其他页面至少30%互异</li>    <li>1000-2000字，合理分段</li>    <li>有规律更新，最好是每天</li>    <li>内容围绕页面关键词展开，与整站主题相关</li>    <li>具有评论功能，评论中出现关键词</li></ol><p>&nbsp;</p><p><strong>导入链接和锚文本</strong></p><ol>    <li>高PR值站点的导入链接</li>    <li>内容相关页面的导入链接</li>    <li>导入链接锚文本中包含页面关键词</li>    <li>锚文本存在于网页内容中</li>    <li>锚文本周围出现相关关键词</li>    <li>导入链接存在3个月以上</li>    <li>导入链接所在页面的导出链接少于100个</li>    <li>导入链接来自不同IP地址</li>    <li>导入链接自然增加</li>    <li>锚文本多样化（如，SEO和SEO十万个为什么）</li></ol><p>&nbsp;</p><p>掌握以上SEO技巧，可以让你的关键词排名有明显改善。</p><p>文章出处：SEOWHY,中国SEO在线培训第一品牌</p>]]></description><category>SEO优化精髓</category><comments>http://www.nudesign.cn/post/32.html#comment</comments><wfw:comment>http://www.nudesign.cn/</wfw:comment><wfw:commentRss>http://www.nudesign.cn/feed.asp?cmt=32</wfw:commentRss><trackback:ping>http://www.nudesign.cn/cmd.asp?act=tb&amp;id=32&amp;key=51b26780</trackback:ping></item><item><title>一套行业网站优化完整思路 </title><author>nudesign@126.com (NU)</author><link>http://www.nudesign.cn/post/31.html</link><pubDate>Mon, 18 Oct 2010 09:08:52 +0800</pubDate><guid>http://www.nudesign.cn/post/31.html</guid><description><![CDATA[<div class="entry"><p>作者：<cite><a id="userinfo1018740" href="http://www.seowhy.com/sns/space-uid-40521.html" target="_blank"><font color="#0174a7">清慧</font></a></cite></p><p>&nbsp;&nbsp;&nbsp; 行业站的优势在于其海量的信息，所以从优化策略上来讲不同于普通的企业网站优化思路，应该先占领行业长尾关键词，然后向目标关键词突破的逆向思维模式，即农村包围城市，做行业站打的就是持久战。其中常见的SEO的外链思维仅仅是停留在几个目标关键词上，而行业站却不同，我们要做的是通过SEO手段，挖掘海量的长尾关键词然后获得巨大的流量。</p><p>&nbsp;&nbsp; 其实，当一篇内容碰见SEOer的时候，已经不是简单的内容，而是一个可以被利用的长尾关键词，是一个搜索引擎的诱饵。我们要让所有的内容页面即长尾关键词页面都能为我们创造价值，从而进行转化，这应该才是我们的最终目的。</p><p>前期分析及关键词定位</p><p>网站分析： 网站类型？网站业务？网站目标群？网站操作使用流程是否简洁？</p><p>关键词分析：目标客户常搜关键词及搜索量列表&nbsp;&nbsp; 待选目标关键词的竞争对手分<br />析，包括市场份额、内容特征、网站竞争力弱强等。</p><p>定位目标关键词：</p><p>1. 目标关键词及搜索量列表</p><p>2. 附带长尾关键词及搜索列表</p><p>3. 长尾关键词分布与规划</p><p>竞争对手SEO情况分析</p><p>俗话说&ldquo;知己知彼，百战百胜&rdquo;，所以对于竞争对手的分析对行业网站来说至关重<br />要，竞争对手分析可从以下几个方面入手：</p><p>1.看网站规模，是否是行业站、资讯站等信息量很大的网站。如果是大型站可查看该对手的收录量。顺便看一下带www和不带的收录量。是否有软件采集痕迹</p><p>2.查看外链，通过yahoo.cn 查询。以及查看外链的质量和锚文本情况。是否有群发的情况，是否有GVM、新闻媒体连接和行业权威及当地组织、协会网站等高质量链接导入。</p><p>3.查看竞争对手的SEO水平，可参照本文档中SEO基础优化进行对比。另：查看关键词的密度、网站收录更新机制，更重要的是否懂得挖掘用户力量。</p><p>相关问题</p><p>1.域名优势，包括edu，gov，以及域名中包含关键词，或用主域名与二级域名优化。</p><p>2.该站链接不多，内容不多，却排名很好，是否通过群发的来。可通过GOOGLE.cn进行查看。另一种情况可能是百度数据库原因，应观察该网站三个月之内排名情况。</p><p>优化排名计划</p><p>1. 0-1月 预实现的目标和应用操作的步骤&nbsp; 例如：0-1个月网站文章收录2000条、外链800条、挖掘长尾500条</p><p>2. 2-3个月预实现的目标和应用操作的步骤</p><p>例如：2-3个月网站文章收录6000条、外链3000条、挖掘长尾1500条 ，热点关键词计划排名。</p><p>3. 3-6月 预实现的目标和应用操作的步骤</p><p>例如：3-6个月网站文章收录10000条、外链8000条、挖掘长尾3000条 ，固定关键词(仅次于目标关键词)计划排名。</p><p>4. 6个月以后 预实现的目标和应用操作的步骤</p><p>例如：6个月网站目前关键词在首页有稳定排名，网站流量达到6000IP，长尾关键词挖掘超过5000条记录，收录超过20000条记录</p><p>优化方案操作内容</p><p>1、制作优化进度表，包含具体时间、操作内容、是否完成等情况进行记录，优化执行方案应具体到天。</p><p>&nbsp;&nbsp; 1.jpg (19.37 KB)</p><p>2010-6-14 23:41</p><p>2、操作内容包括：</p><p>网站发展（上）：<br />01站内优化　&nbsp; 02. 站外优化 03. 内容篇　　04. 完善篇<br />网站发展（下）：<br />05. 维护篇　　06. 反馈篇 07. 微调篇　　08. 丰收篇</p><p>行业网站优化具体操作思路<br />01 .站内优化　 02. 站外优化<br />03. 内容建设　　 04. 网站完善</p><p>大纲</p><p>一、站内优化</p><p>1.站内结构优化</p><p>2.内链策略</p><p>3.站内细节优化</p><p>4.网站地图设置</p><p>5.关键词竞争度分析</p><p>5.关键词部署</p><p>6.长尾关键词挖掘</p><p>7.关键词分词研究</p><p>二、站外优化</p><p>1 外链建设途径</p><p>2.链接诱饵建设思路</p><p>3.外链建设注意事项</p><p>三、内容建设</p><p>网站内容来源及注意事项</p><p>四、网站完善</p><p>自身优化情况检查</p></div>]]></description><category>SEO优化精髓</category><comments>http://www.nudesign.cn/post/31.html#comment</comments><wfw:comment>http://www.nudesign.cn/</wfw:comment><wfw:commentRss>http://www.nudesign.cn/feed.asp?cmt=31</wfw:commentRss><trackback:ping>http://www.nudesign.cn/cmd.asp?act=tb&amp;id=31&amp;key=80bf1c10</trackback:ping></item><item><title>SEO 每天的网站维护 </title><author>nudesign@126.com (NU)</author><link>http://www.nudesign.cn/post/30.html</link><pubDate>Mon, 18 Oct 2010 09:05:29 +0800</pubDate><guid>http://www.nudesign.cn/post/30.html</guid><description><![CDATA[<p>1、每天给网站添加一些原创内容</p><p>内容要增加多少呢？一般根据你站点内容的多少，大概文章总量的2%-5%吧，比如你用的Z-BLOG，一共有百把篇文章，那你每天加个2，3篇就可以了，如果是用CMS做的站，内容有千把篇，那每天加个2，30篇。这个是必须的，就算你外链很强大，一段时间不更新原创的，GOOGLE一样懒得理你。每天就更新6篇文章，这样很有规律的加，蜘蛛会很青睐你的好习惯的。</p><p>2、每天给网站发布外链</p><p>有规律有步骤的加链接，那是做站的好品质，外链作用大，有规律，一步步来。一般的关键词轻松排上去了。外链 ，这是属于SEO 站外优化的内容，网站，如果没有外部链接的导入，那么，蜘蛛程序是很难发现你的网站，有了导入链接，蜘蛛就会来我们网站。外链起到引GOOGLE蜘蛛爬行网站的作用，一个好的网站是需要大量优质外链的支持！ &ldquo;SEO内容为王，外链为皇&rdquo; 天天给网站增加优质外链（外链要纯手工发布才能把握好质量），相信网站会有不错的排名 与 流量。</p><p>软文+外链 ，这是效果更好的站外优化方法，一篇优质的软文，访问量是相当大的，回复率也高。高质量的软文就像一个外链银行，把外链稳定在优质的软文上，相信网站会有更好的排名，与流量。</p><p>3、每周写2篇软文</p><p>写软文并不难，难的是坚持写，写高质量的文章，但是如今软文是最低成本的推广方式之一，效果很明显，做为一个合格的站长，是必须学会写软文的，不熟悉的朋友可以参加一下站长网举办的软文培训班。另外，写软文，一定要加上你的版权声明，现在总有一些品质低下的人，转载了，连个链接都不给，有的甚至把你文章的网址改成他自己的，坚决鄙视这种人，人品不好的人做站也不会好。</p><p>现在已建立在高权重的博客里同建立博客，同时此博客主要以原创为主。</p><p>4、不用群发软件</p><p>可能很多站长都用过群发软件，但是这些高手们往往是最先使用这些软件的一批人，所以效果也是很好的，当软件普及到大多数站长都在用的时候，也就往往没效了。所以在2010年的今天你还群发，你又落伍啦。还不如写几入篇软文效果好。</p><p>5、养几个高权重博客</p><p>养博客，在新站上线的时候，随便带一下，就很容易让搜索引擎收录，有时候加的新栏目或者文章迟迟不收录的时候，也可以用这些高权重博客带一下。</p><p>现在已建立在高权重的博客里同建立博客，同时此博客主要以原创为主。</p><p>6、到相关高权重论坛跟跟贴</p><p>跟贴不仅是一种美德，而且掌握了一些跟贴技巧，对网站也是很有益的，你站长类的网站，几乎发的文章一会儿就收录了，在后面多跟跟贴很容易成为反链，用好签名也能让蜘蛛天天去爬你的网站,就经常到一些高PR的会计论坛跟帖，结果得到外链。另外在与你主题相关的活跃论坛上跟跟贴，不仅仅带外链，还能为你的网站带来用户，一举两得，何乐而不为呢？</p><p>7、没事别经常大改版</p><p>生意不好整柜台，流量不高整网站，其实网站也像人一样，一个人经常改头换面，也得让你周围的人重新认识你，这需要一个过程，网站规划好了，版块定了，就不要轻易改，不得已做网站改版也尽量保持原来的路径。降权原因就是因为改版问题，并没有过度的SEO优化。</p><p>作者：<a href="http://www.seowhy.com/sns/space-uid-77093.html">qq1228065788</a>&nbsp;&nbsp;&nbsp;原帖地址：<a href="http://www.seowhy.com/bbs/thread-190820-1-1.html">http://www.seowhy.com/bbs/thread-190820-1-1.html</a></p>]]></description><category>SEO优化精髓</category><comments>http://www.nudesign.cn/post/30.html#comment</comments><wfw:comment>http://www.nudesign.cn/</wfw:comment><wfw:commentRss>http://www.nudesign.cn/feed.asp?cmt=30</wfw:commentRss><trackback:ping>http://www.nudesign.cn/cmd.asp?act=tb&amp;id=30&amp;key=e68be3f0</trackback:ping></item><item><title>英文seo优化关键字的密度和分布 </title><author>nudesign@126.com (NU)</author><link>http://www.nudesign.cn/post/29.html</link><pubDate>Sat, 21 Aug 2010 12:29:46 +0800</pubDate><guid>http://www.nudesign.cn/post/29.html</guid><description><![CDATA[<p>&nbsp;在确定了自己的关键字之后，需要在网页文本中适当出现这些关键字。关键字在网页中出现的频次，即关键字密度 (Keyword Density)  ，就是在一个页面中，占所有该页面中总的文字的比例，该指标对搜索引擎的优化起到重要作用。关键字密度一般在 1% 到 7%  较为合适，超过这一标准就有过高或过低之嫌。切记避免进行关键字堆砌，即一页中关键字的出现不是根据内容的需要而安排，而是为了讨好搜索引擎人为堆积关键字（Stuffing）。这已经被搜索引擎归入恶意行为(Spamming),  有遭到惩罚的危险。<br /><br />工具推荐：<br /><br />关键字密度检查（英文）：频繁出现的关键词及其密度  <br /><br /><br />关键字分布<br /><br />关键字的分布原则堪称：无所不在，有所侧重。<br /><br />1、网页代码中的 Title，META 标签（关键字  keywords 和描述 description） <br /><br />如：e 书时空的代码：  <br />&lt;title&gt;ｅ书时空&mdash;&mdash;电子书公益下载中心&lt;/title&gt; <br />&lt;meta http-equiv=&quot;title&quot;  c&gt; <br />&lt;meta name=&quot;classification&quot; c&gt; <br />&lt;meta name=&quot;description&quot;  c&gt; <br />&lt;meta name=&quot;keywords&quot; c&gt;  <br /><br />2、网页正文最吸引注意力的地方<br /><br />正文内容必须适当出现关键词，并且&ldquo;有所侧重&rdquo;，意指用户阅读习惯形成的阅读优先位置&mdash;&mdash;从上到下，从左至右&mdash;&mdash;成为关键词重点分布位置，包括：页面靠顶部、左侧、标题、正文前  200 字以内。在这些地方出现关键词对排名更有帮助。如 SEO 学习网站 的站长独辟蹊径，把一段富含关键词的文本网站介绍置于网站最顶部（这个地方通常被安排用来放  banner  广告的）。这样做的好处是让用户和蜘蛛都以最快速度了解该网站内容，并且以蜘蛛重视的&lt;b&gt;黑体显示，对其排名作用很大。代码显示如下：&lt;b&gt;&lt;font  color=#999999&gt;本站是一个非商业性的网站，旨在为广大的搜索引擎研究者提供一个学习、交流场所。在这里你可以找到很多有关于搜索引擎优化资料（seo  资料,文章）、网站优化资料。这些资料可以帮助你将你的网站进行适当的优化以迎合多个搜索引擎的搜索规则，从而得到较好的排名。&lt;/font&gt;&lt;/b&gt;  <br /><br />3、超链接文本（锚文本）<br /><br />除了在导航、网站地图、锚文本中有意识使用关键字，还可以人为增加超链接文本。如一个童装厂商网站可以通过加上以下行业资源：中国童装网  织里童装网&hellip;&hellip;  等含有&ldquo;童装&rdquo;文字的链接来达到增加超链接文本的目的。这也值得网站在添加友情链接时做参考，即链接对象中最好包含有你的关键字或相关语义的网站。<br /><br />4、Header  标签<br /><br />即正文标题&lt;H1&gt;&lt;H1/&gt;中的文字。搜索引擎比较重视标题<a href="http://www.tmcmcn.com/" target="_blank">bulldozer</a>行中的文字。用&lt;b&gt;&lt;/b&gt;加粗的文字往往也是关键词出现的地方。<br /><br />5、图片  Alt 属性<br /><br />搜索引擎不能抓取图片，因此网页制作时在图片属性 Alt  中加入关键字是对搜索引擎友好的好办法，它会认为该图片内容与你的关键字一致，从而有利于排名。<br /><br />英文网页内容的网站在进行域名选择和网页文件夹命名时，也可以考虑包含关键字（对关键词组则要用短横线隔开）。不过对  Google 排名作用非常微小。</p>]]></description><category>SEO优化精髓</category><comments>http://www.nudesign.cn/post/29.html#comment</comments><wfw:comment>http://www.nudesign.cn/</wfw:comment><wfw:commentRss>http://www.nudesign.cn/feed.asp?cmt=29</wfw:commentRss><trackback:ping>http://www.nudesign.cn/cmd.asp?act=tb&amp;id=29&amp;key=553f0432</trackback:ping></item><item><title>Keywords-Keywords与SEO</title><author>nudesign@126.com (NU)</author><link>http://www.nudesign.cn/post/28.html</link><pubDate>Fri, 13 Aug 2010 11:18:58 +0800</pubDate><guid>http://www.nudesign.cn/post/28.html</guid><description><![CDATA[<p>网站内容来源于：http://www.huanyupuke.com.cn/content.asp?id=112<br />标题：Keywords-Keywords与SEO<br />&nbsp;</p><p>文章关键词：密度,要害,搜索引擎,keywords,文本,网页,逗号,差别,地方,半角</p><p>正文:</p><p><span style="font-weight: bold">一、 Keywords<br /></span></p><p align="left">阐明：为搜索引擎提供的要害字列表</p><p align="left">用法：&lt;Meta name=&quot;Keywords&quot; Content=&quot;QQ网名,QQ签名,QQ个签名,最酷QQ名,非主流QQ签名,繁体QQ签名&quot;&gt;</p><p align="left">技术：1，挑选适卖的要害词（可利用百度指数等东西，选出搜索量相比高的要害词，需要时可以挑选双合要害词）</p><p align="left">2，差别的要害词之间,应用半角逗号离隔（要害词之间应以半角逗号(即英文形态下的逗号)离隔，假如以中文为标点，搜索引擎会误觉得是文字）</p><p align="left">3，要害词不要写得太多太长（建议控制正在六个词语以内，简短、明确就好，别太多或存心重双）</p><p align="left">4，大网站尽量不要每个页面都要用异常的Keywords</p><p><span style="font-weight: bold">二、</span><span style="font-weight: bold">keywords密度? </span><br /><span style="font-weight: bold">2.1什么是keywords密度? </span><br />keywords密度是指keywords出现的次数和keywords关联字词出现的次数与整个网页文本之比，keywords正在文本中出现的次数越多，那么keywords密度越高,反之就越低。<br /><br /><span style="font-weight: bold">2.2各搜索引擎keywords密度比例差别？</span><br />是的，如今主流搜索引擎中，google、baidu、yahoo！、MSN、sogou、iask等都将keywords密度做为其排名算法考虑要素之一，每个搜索引擎都有差别的算法计算密度比例从而获得排名地位，卖然，容忍的要害字词密度容量是不一样的，我的瞧察是容忍从大到小陈设顺次是 google，MSN，然后是baidu，sogou ，iask，yahoo！最低。<br /><span style="font-weight: bold">2.3有一个正确的雄式或者比例总数来限定其密度吗？</span><br />很惋惜的报告你，没有一个正确的雄式。如今有SEO站点中提到的是2%~8%以内，但凭据最新国外和我本人的钻研证实：假如需求正在各个搜索引擎中都有很好的体现，请控制keywords密度正在5%左右。卖然，并不克清扫正在一个页面中出现keywords密度很高的情况，这个假如是实践需求的，还是可以保留，究竟网站是给客户瞧的，尽量提供最有价值的消息给访客才是最重要的考虑点之一，不过需求清澈的是，那样的页面有可能会被搜索引擎主动的过滤失。<br /><span style="font-weight: bold">2.4keywords答应出现的地位正在哪儿？</span><br />由于keywords密度是尽对付整个网页的文本之比，那么对支付现的地位来说，可以出现keyword的地方可以是title,元标签，文本正文或者其他地方。有人使用网页中的alt属来做为keywords密度加强，这个属正在搜索引擎中的权值已经被降低，但不是说没有用，点石小鹏给出的建议是：结合alt属中的锚文本和主页中的其他元素报告搜索引擎该网页的主题。这样的做法不会遭随处分，并且会对搜索引擎优化有一定的好处。<br />keywords密度中keyword出现的最好地方正在哪儿？<br />实在这个早已是雄开的秘密，对付网页中出现keyword的地方是tite元素。点石小鹏给出的建议是正在这里最多出现2次的要害字词加强，不要超出3次，不然有可能形成keywords密度过大而被搜索引擎过滤和抛弃。<br /><span style="font-weight: bold">2.5keyword可以有哪些出现的方式？</span><br />对此有差别的理解和瞧法，理想的做法是将keyword整合到一句话中，卖然还有双合的keyword词组，使用非凡的陈设方式，最好的做法是，钻研搜索者可能的搜索行为和熟悉，将此做为参考的有力根据，那么整个的keywords密度会相比合适。从而达到相比好的效果。</p>]]></description><category>SEO优化精髓</category><comments>http://www.nudesign.cn/post/28.html#comment</comments><wfw:comment>http://www.nudesign.cn/</wfw:comment><wfw:commentRss>http://www.nudesign.cn/feed.asp?cmt=28</wfw:commentRss><trackback:ping>http://www.nudesign.cn/cmd.asp?act=tb&amp;id=28&amp;key=a6c5a595</trackback:ping></item><item><title>二级向下弹出菜单</title><author>nudesign@126.com (NU)</author><link>http://www.nudesign.cn/post/27.html</link><pubDate>Wed, 04 Aug 2010 14:55:45 +0800</pubDate><guid>http://www.nudesign.cn/post/27.html</guid><description><![CDATA[<p><img alt="" src="http://www.nudesign.cn/upload/1231.jpg" /></p><p>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>&quot;&gt;<br />&lt;html xmlns=&quot;<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>&quot;&gt;<br />&lt;head&gt;<br />&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;<br />&lt;title&gt;二级向下弹出菜单&lt;/title&gt;<br />&lt;style type=&quot;text/css&quot;&gt;<br />.menu {<br />font-family: arial, sans-serif; <br />width:210px; <br />margin:0; <br />margin:50px 0;<br />}<br />.menu ul {<br />padding:0; <br />margin:0;<br />list-style-type: none;<br />}<br />.menu ul li {<br />float:left; <br />position:relative;<br />}<br />.menu ul li a {<br />display:block; <br />text-align:center; <br />text-decoration:none; <br />width:104px; <br />height:30px; <br />color:#000; <br />border:1px solid #fff;<br />border-width:1px 1px 0 0;<br />background:#c9c9a7; <br />line-height:30px; <br />font-size:11px;<br />}<br />.menu ul li a:hover {<br />color:#fff; <br />background:#b3ab79;<br />}<br />.menu ul li div {<br />display: none;<br />position:absolute; <br />top:31px; <br />left:0; <br />width:105px;<br />}<br />.menu ul li div li a {<br />display:block; <br />background:#faeec7; <br />color:#000;<br />}<br />.menu ul li div li a:hover {<br />background:#dfc184; <br />color:#000;<br />}<br />.clear{<br />height:0;<br />font-size:0;<br />line-height:0;<br />clear:both;<br />}<br />&lt;/style&gt;<br />&lt;script type=&quot;text/javascript&quot;&gt;<br />function addLoadEvent(func) {<br />&nbsp;&nbsp; var oldonload = window.onload;<br />&nbsp;&nbsp; if (typeof window.onload != 'function') {<br />&nbsp;&nbsp; window.onload = func;<br />&nbsp;&nbsp; } else {<br />&nbsp;&nbsp; window.onload = function() {<br />&nbsp;&nbsp;&nbsp; oldonload();<br />&nbsp;&nbsp;&nbsp; func();<br />&nbsp;&nbsp; }<br />&nbsp;&nbsp; }<br />}<br />addLoadEvent(nav);<br />function nav(){<br />&nbsp;&nbsp; var navlist=document.getElementById(&quot;nav&quot;);<br />&nbsp;&nbsp; var navtab=navlist.getElementsByTagName(&quot;a&quot;);<br />&nbsp;&nbsp; var navtdiv=navlist.getElementsByTagName(&quot;div&quot;);<br />&nbsp;&nbsp; for(i=0;i&lt;navtab.length;i++){<br />&nbsp;&nbsp;&nbsp; if(navtab[i].className.indexOf(&quot;hide&quot;)== -1) continue;<br />&nbsp;&nbsp;&nbsp; navtab[i].onmouseover=function(){<br />&nbsp;&nbsp;&nbsp;&nbsp; for(j=0;j&lt;navtdiv.length;j++)<br />&nbsp;&nbsp;&nbsp;&nbsp; {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; navtdiv[j].style.display=&quot;none&quot;;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; navtdiv[j].onmouseover=function(){this.style.display=&quot;block&quot;;}<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; navtdiv[j].onmouseout=function(){this.style.display=&quot;none&quot;;}<br />&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp; get_nextSibling(this).style.display=&quot;block&quot;;<br />&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp; navtab[i].onmouseout=function(){get_nextSibling(this).style.display=&quot;none&quot;;}<br />&nbsp;&nbsp; }<br />}<br />function get_nextSibling(n){<br />var x=n.nextSibling;<br />while (x.nodeType!=1){<br />&nbsp;&nbsp;&nbsp; x=x.nextSibling;<br />}<br />return x;<br />}<br />&lt;/script&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;div class=&quot;menu&quot;&gt;<br />&lt;ul id=&quot;nav&quot;&gt;<br />&lt;li&gt;&lt;a class=&quot;hide&quot; href=&quot;../menu/index.html&quot;&gt;DEMOS&lt;/a&gt;<br />&lt;div&gt;<br />&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/zero_dollars.html&quot; title=&quot;The zero dollar ads page&quot;&gt;zero dollars&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/embed.html&quot; title=&quot;Wrapping text around images&quot;&gt;wrapping text&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;../menu/form.html&quot; title=&quot;Styling forms&quot;&gt;styled form&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&lt;/li&gt;<br />&lt;li&gt;&lt;a class=&quot;hide&quot; href=&quot;index.html&quot;&gt;MENUS&lt;/a&gt;<br />&lt;div&gt;<br />&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;spies.html&quot; title=&quot;a coded list of spies&quot;&gt;spies menu&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;vertical.html&quot; title=&quot;a horizontal vertical menu&quot;&gt;vertical menu&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />&lt;/div&gt;<br />&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;div class=&quot;clear&quot;&gt;&lt;/div&gt;<br />&lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</p><p><img title="" alt="" onload="ResizeImage(this,520)" src="http://www.nudesign.cn/upload/1231.jpg" /></p>]]></description><category>实用JS代码</category><comments>http://www.nudesign.cn/post/27.html#comment</comments><wfw:comment>http://www.nudesign.cn/</wfw:comment><wfw:commentRss>http://www.nudesign.cn/feed.asp?cmt=27</wfw:commentRss><trackback:ping>http://www.nudesign.cn/cmd.asp?act=tb&amp;id=27&amp;key=9bb0c322</trackback:ping></item><item><title>Msn新闻图片展示效果</title><author>nudesign@126.com (NU)</author><link>http://www.nudesign.cn/post/26.html</link><pubDate>Wed, 04 Aug 2010 14:48:59 +0800</pubDate><guid>http://www.nudesign.cn/post/26.html</guid><description><![CDATA[<p>&nbsp;<img title="" alt="" src="http://www.nudesign.cn/upload/未标题-1.jpg" onload="ResizeImage(this,520)" /></p><p>&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;<a href="http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd</a>&quot;&gt;<br />&lt;!-- saved from url=(0018)http://cn.msn.com/ --&gt;<br />&lt;HTML xmlns=&quot;<a href="http://www.w3.org/1999/xhtml&quot;&gt;&lt;HEAD&gt;&lt;TITLE">http://www.w3.org/1999/xhtml&quot;&gt;&lt;HEAD&gt;&lt;TITLE</a>&gt;欢迎莅临 MSN 中国&lt;/TITLE&gt;<br />&lt;META http-equiv=X-UA-Compatible content=IE=7&gt;<br />&lt;META http-equiv=Content-Type content=&quot;text/html; charset=utf-8&quot;&gt;<br />&lt;META <br />content=&quot; &quot; <br />name=keywords&gt;<br />&lt;META content=MSN中文网是中国首家针对白领用户的门户网站，定位于时尚、娱乐、生活、服务，24小时滚动报道。 <br />name=description&gt;</p><p>&lt;LINK href=&quot;欢迎莅临 MSN 中国.files/style115.css&quot; rel=stylesheet&gt;</p><p>&lt;style type=&quot;text/css&quot;&gt;<br />.fpic {<br />BORDER: #ccc 1px solid;<br />DISPLAY: inline; <br />FLOAT: left;<br />MARGIN-LEFT: 10px; <br />WIDTH: 242px; <br />POSITION: relative;<br />HEIGHT: 248px<br />}<br />.FilterImages {<br />FILTER: RevealTrans ( duration = 1，transition=12 ); <br />VISIBILITY: visible;<br />POSITION: absolute;<br />height:197;<br />width:240 ;<br />}<br />.fttlbg {<br />Z-INDEX: 15;<br />BACKGROUND: #000;<br />FILTER: alpha(opacity=50); <br />LEFT: 1px; WIDTH: 240px;<br />POSITION: absolute; <br />TOP: 164px;<br />HEIGHT: 34px;<br />opacity: 0.5<br />}<br />#fttltxt {<br />FONT-SIZE: 14px;<br />Z-INDEX: 16;<br />LEFT: 1px;<br />WIDTH: 240px;<br />COLOR: #fff;<br />LINE-HEIGHT: 34px;<br />POSITION: absolute; <br />TOP: 164px;<br />TEXT-ALIGN: center<br />}<br />#fttltxt A:link ,#fttltxt A:hover,#fttltxt A:active,#fttltxt A:visited{<br />COLOR: #fff<br />}<br />.thubpiccur {<br />Z-INDEX: 30;<br />WIDTH: 63px;<br />CURSOR: pointer;<br />PADDING-TOP: 4px; <br />POSITION: absolute; <br />TOP: 194px; <br />HEIGHT: 49px;<br />BACKGROUND: url(<a href="http://img1.cn.msn.com/1/arrow2.gif">http://img1.cn.msn.com/1/arrow2.gif</a>) no-repeat center top<br />}</p><p>.thubpiccur IMG {<br />BORDER-RIGHT: #fff 3px solid; <br />BORDER-TOP: #fff 2px solid;<br />BORDER-LEFT: #fff 3px solid; <br />WIDTH: 56px; <br />BORDER-BOTTOM: #fff 2px solid; <br />HEIGHT: 45px<br />}<br />.ImgSmall {<br />height:46px;<br />width:56px;<br />}</p><p>A IMG {<br />BORDER-STYLE: none;</p><p>}<br />.thubpic {<br />Z-INDEX: 20;<br />WIDTH: 63px;<br />CURSOR: pointer;<br />PADDING-TOP: 4px;<br />POSITION: absolute; <br />TOP: 194px; <br />HEIGHT: 49px<br />}<br />.thubpic IMG {<br />BORDER-RIGHT: #666 3px solid;<br />BORDER-TOP: #666 2px solid;<br />BORDER-LEFT: #666 3px solid;<br />WIDTH: 56px;<br />BORDER-BOTTOM: #666 2px solid;<br />HEIGHT: 45px;<br />}</p><p>#tmb0 {<br />LEFT: 1px;<br />}<br />#tmb1 {<br />LEFT: 60px;<br />}<br />#tmb2 {<br />LEFT: 120px;<br />}<br />#tmb3 {<br />LEFT: 179px;<br />}<br />&lt;/style&gt;</p><p>&lt;SCRIPT type=&quot;text/javascript&quot;&gt;<br />function setfoc(id){<br />document.getElementById(&quot;focpic&quot;).src = picarry[id];<br />document.getElementById(&quot;foclnk&quot;).href = lnkarry[id];<br />document.getElementById(&quot;fttltxt&quot;).innerHTML = &quot;&lt;a href=\&quot;&quot;+lnkarry[id]+&quot;\&quot; target=_blank&gt;&quot;+ttlarry[id]+&quot;&lt;/a&gt;&quot;;<br />currslid = id;<br />for(i=0;i&lt;4;i++)<br />{document.getElementById(&quot;tmb&quot;+i).className = &quot;thubpic&quot;;<br />};<br />document.getElementById(&quot;tmb&quot;+id).className =&quot;thubpiccur&quot;;<br />focpic.style.visibility = &quot;hidden&quot;;<br />focpic.filters[0].Apply();<br />if (focpic.style.visibility == &quot;visible&quot;) {<br />focpic.style.visibility = &quot;hidden&quot;;<br />focpic.filters.revealTrans.transition=12;<br />}<br />else {<br />focpic.style.visibility = &quot;visible&quot;;focpic.filters[0].transition=12;<br />}<br />focpic.filters[0].Play();<br />}</p><p>&lt;/SCRIPT&gt;</p><p>&lt;SCRIPT language=javascript type=text/javascript&gt;</p><p>var picarry = {};var lnkarry = {};var ttlarry = {};<br />picarry[0] = &quot;<a href="http://img4.cn.msn.com/4/2008/9/9/29510.jpg">http://img4.cn.msn.com/4/2008/9/9/29510.jpg</a>&quot;;<br />lnkarry[0] = &quot;<a href="http://msn.ynet.com/view.jsp?oid=42946256">http://msn.ynet.com/view.jsp?oid=42946256</a>&quot;;<br />ttlarry[0] = &quot;iPod发明者穷困潦倒 买不起iPod&quot;;<br />picarry[1] = &quot;<a href="http://img4.cn.msn.com/4/2008/9/9/29476.jpg">http://img4.cn.msn.com/4/2008/9/9/29476.jpg</a>&quot;;<br />lnkarry[1] = &quot;<a href="http://msn.sports.ynet.com/view.jsp?oid=42930167">http://msn.sports.ynet.com/view.jsp?oid=42930167</a>&quot;;<br />ttlarry[1] = &quot;刘德华履约助威 何军权抱憾摘银&quot;;<br />picarry[2] = &quot;<a href="http://img3.cn.msn.com/3/2008/9/9/29514.jpg">http://img3.cn.msn.com/3/2008/9/9/29514.jpg</a>&quot;;<br />lnkarry[2] = &quot;<a href="http://msn.ent.ynet.com/view.jsp?oid=42928791">http://msn.ent.ynet.com/view.jsp?oid=42928791</a>&quot;;<br />ttlarry[2] = &quot;韩星安在焕自杀 死后10天才被发现&quot;;<br />picarry[3] = &quot;<a href="http://img7.cn.msn.com/7/2008/9/9/29507.jpg">http://img7.cn.msn.com/7/2008/9/9/29507.jpg</a>&quot;;<br />lnkarry[3] = &quot;<a href="http://msn.idoican.com.cn/detail/articles/20080909141134/">http://msn.idoican.com.cn/detail/articles/20080909141134/</a>&quot;;<br />ttlarry[3] = &quot;&ldquo;世界上跑得最快的无腿人&rdquo;亮相鸟巢&quot;;<br />&lt;/SCRIPT&gt;</p><p>&lt;/HEAD&gt;</p><p>&lt;BODY&gt;</p><p>&lt;DIV class=&quot;fpic&quot;&gt;</p><p>&lt;A id=foclnk href=&quot;#&quot;&gt;&lt;IMG id=focpic src=&quot;<a href="http://img4.cn.msn.com/4/2008/9/9/29510.jpg">http://img4.cn.msn.com/4/2008/9/9/29510.jpg</a>&quot; class=&quot;FilterImages&quot;&gt;&lt;/A&gt;</p><p>&lt;DIV class=&quot;fttlbg&quot;&gt;&lt;/DIV&gt;&lt;!--黑色透明层--&gt;</p><p>&lt;DIV id=fttltxt&gt;</p><p>&lt;A href=&quot;#&quot;&gt;iPod发明者穷困潦倒买不起iPod&lt;/A&gt;&lt;!--初始图片标题--&gt;</p><p>&lt;/DIV&gt;</p><p>&lt;DIV class=thubpiccur id=tmb0 onmouseover=setfoc(0); &gt;</p><p>&lt;A href=&quot;#&quot;&gt;&lt;IMG src=&quot;<a href="http://img4.cn.msn.com/4/2008/9/9/29510.jpg">http://img4.cn.msn.com/4/2008/9/9/29510.jpg</a>&quot; class=&quot;ImgSmall&quot;&gt;&lt;/A&gt;</p><p>&lt;/DIV&gt;</p><p>&lt;DIV class=thubpic id=tmb1 onmouseover=setfoc(1);&gt;</p><p>&lt;A href=&quot;#&quot;&gt;&lt;IMG src=&quot;<a href="http://img4.cn.msn.com/4/2008/9/9/29476.jpg">http://img4.cn.msn.com/4/2008/9/9/29476.jpg</a>&quot; class=&quot;ImgSmall&quot;&gt;&lt;/A&gt; &lt;/DIV&gt;</p><p>&lt;DIV class=thubpic id=tmb2 onmouseover=setfoc(2); &gt;</p><p>&lt;A href=&quot;#&quot;&gt;&lt;IMG src=&quot;<a href="http://img3.cn.msn.com/3/2008/9/9/29514.jpg">http://img3.cn.msn.com/3/2008/9/9/29514.jpg</a>&quot; class=&quot;ImgSmall&quot;&gt;&lt;/A&gt; &lt;/DIV&gt;</p><p>&lt;DIV class=thubpic id=tmb3 onmouseover=setfoc(3); &gt;</p><p>&lt;A href=&quot;#&quot;&gt;&lt;IMG src=&quot;<a href="http://img7.cn.msn.com/7/2008/9/9/29507.jpg">http://img7.cn.msn.com/7/2008/9/9/29507.jpg</a>&quot; class=&quot;ImgSmall&quot; &gt;&lt;/A&gt; &lt;/DIV&gt;</p><p>&lt;/DIV&gt;</p><p>&lt;/BODY&gt;</p><p>&lt;/HTML&gt;</p>]]></description><category>实用JS代码</category><comments>http://www.nudesign.cn/post/26.html#comment</comments><wfw:comment>http://www.nudesign.cn/</wfw:comment><wfw:commentRss>http://www.nudesign.cn/feed.asp?cmt=26</wfw:commentRss><trackback:ping>http://www.nudesign.cn/cmd.asp?act=tb&amp;id=26&amp;key=b1f871b8</trackback:ping></item><item><title>FF和IE之间7个JavaScript的差异</title><author>nudesign@126.com (NU)</author><link>http://www.nudesign.cn/post/25.html</link><pubDate>Wed, 04 Aug 2010 14:42:09 +0800</pubDate><guid>http://www.nudesign.cn/post/25.html</guid><description><![CDATA[<p><font color="#000000">尽管 JavaScript 历史上使用冗长而令人生厌的代码块来标的特定浏览器的时期已经结束了，但是偶尔使用一些简单的代码块和对象检测来确保一些代码在</font><font color="#000000">用户机器上正常工作依然是必要的。</font></p><p><font color="#000000">这篇文章中，我会略述一下 Internet Explorer 和 Firefox 在 JavaScript 语法上不同的 7 个方面。</font></p><p><font color="#000000"><strong>1. CSS &ldquo;float&rdquo; 属性</strong></font></p><p><font color="#000000">获取给定对象的特定 CSS 属性的基本语法是 object.style 属性，而且有连字符的属性要用<font color="#800000">骆驼命名法</font>来代替。例如，获取一个 ID 为 &ldquo;header&rdquo; 的</font><font color="#000000">div 的 background-color 属性，我们要用如下语法： </font></p><p><font color="#000000">document.getElementById(&quot;header&quot;).style.borderBottom= &quot;1px solid #ccc&quot;;</font></p><p><font color="#000000">但是由于 &ldquo;float&rdquo; 是 JavaScript 的保留词，我们就无法使用 object.style.float 来获取 &ldquo;float&rdquo; 属性了。一下是我们在两种浏览器中的使用的方</font><font color="#000000">法：</font></p><p><font color="#000000">IE 语法：</font></p><p><font color="#000000">document.getElementById(&quot;header&quot;).style.<strong><font color="#800000">styleFloat</font></strong> = &quot;left&quot;;</font></p><p><font color="#000000">Firefox 语法：</font></p><p><font color="#000000">document.getElementById(&quot;header&quot;).style.<strong><font color="#800000">cssFloat</font></strong> = &quot;left&quot;;</font></p><p><font color="#000000"><strong>2. 元素的计算样式</strong></font></p><p><font color="#000000">通过使用上述的 object.style.property， JavaScript 可以很容易的获取和修改对象的设定 CSS 样式。但是这一语法的局限在于，它只能取得内联在</font><font color="#000000">HTML 里的样式，或者直接使用 JavaScript 设定的样式。style 对象不能获取使用外部样式表设定的样式。为了获取对象的&rdquo;计算样式&rdquo;，我们使用以下</font><font color="#000000">代码：</font></p><p><font color="#000000">IE 语法：</font></p><p><font color="#000000">var myObject = document.getElementById(&quot;header&quot;); </font></p><p><font color="#000000">var myStyle = myObject.currentStyle.backgroundColor;</font></p><p><font color="#000000">Firefox 语法：</font></p><p><font color="#000000">var myObject = document.getElementById(&quot;header&quot;);</font></p><p><font color="#000000">var myComputedStyle = document.defaultView.getComputedStyle(myObject, null);</font></p><p><font color="#000000">var myStyle = myComputedStyle.backgroundColor;</font></p><p><font color="#000000">3. 获取元素的&rdquo;class&rdquo;属性</font></p><p><font color="#000000">类似于&rdquo;float&rdquo;属性的情况，这两种浏览器使用不同的 JavaScript 方法来获取这个属性。</font></p><p><font color="#000000">IE 语法：</font></p><p><font color="#000000">var myObject = document.getElementById(&quot;header&quot;);</font></p><p><font color="#000000">var myAttribute = myObject.getAttribute(&quot;<strong><font color="#800000">className</font></strong>&quot;);</font></p><p><font color="#000000">Firefox 语法：</font></p><p><font color="#000000">var myObject = document.getElementById(&quot;header&quot;);</font></p><p><font color="#000000">var myAttribute = myObject.getAttribute(&quot;<strong><font color="#800000">class</font></strong>&quot;);</font></p><p>&nbsp;</p><p><font color="#000000">4. 获取 label 标签的 &ldquo;for&rdquo; 属性</font><font color="#000000">和 3 一样，使用 JavaScript获取 label 的 &ldquo;for&rdquo; 属性也有不同语法。</font></p><p><font color="#000000">IE 语法：</font></p><p><font color="#000000">var myObject = document.getElementById(&quot;myLabel&quot;);<br />var myAttribute = myObject.getAttribute(&quot;<font color="#800000"><strong>htmlFor</strong></font>&quot;);</font></p><p><font color="#000000">Firefox 语法：</font></p><p><font color="#000000">var myObject = document.getElementById(&quot;myLabel&quot;);<br />var myAttribute = myObject.getAttribute(&quot;<font color="#800000"><strong>for</strong></font>&quot;);</font></p><p><font color="#000000">对于 setAtrribute 方法来说也是同样的语法。</font></p><p><font color="#000000">5. 获取光标位置</font></p><p><font color="#000000">获取元素的光标位置比较少见，如果需要这么做，IE 和 Firefox 的语法也是不同的。这个示例代码是相当基础的，一般用作许多复杂事件处理的一部分，</font><font color="#000000">这里仅用来描述差异。需要注意的是，IE 中的结果和 Firefox 中是不同的，因此这个方法有些问题。通常，这个差异可以通过获取 &ldquo;滚动位置&rdquo; 来补偿,</font><font color="#000000">－但那是另外一篇文章的课题了。</font></p><p><font color="#000000">IE 语法：</font></p><p><font color="#000000">var myCursorPosition = [0, 0];<br />myCursorPosition[0] = event.<font color="#800000"><strong>clientX;<br /></strong></font>myCursorPosition[1] = event.clientY;</font></p><p><font color="#000000">Firefox 语法：</font></p><p><font color="#000000">var myCursorPosition = [0, 0];<br />myCursorPosition[0] = event.<font color="#800000"><strong>pageX;<br /></strong></font>myCursorPosition[1] = event.pageY;</font></p><p><font color="#000000">6. 获取视窗或浏览器窗口的尺寸</font></p><p><font color="#000000">有时需要找出浏览器的有效窗口空间的尺寸，一般成为&rdquo;视窗&rdquo;。</font></p><p><font color="#000000">IE 语法：</font></p><p><font color="#000000">var myBrowserSize = [0, 0];<br />myBrowserSize[0] = <font color="#800000">document.documentElement.clientWidth;<br /></font>myBrowserSize[1] = document.documentElement.clientHeight;</font></p><p><font color="#000000">Firefox 语法：</font></p><p><font color="#000000">var myBrowserSize = [0, 0];<br />myBrowserSize[0] = <font color="#800000">window.innerWidth;<br /></font>myBrowserSize[1] = window.innerHeight;</font></p><p><font color="#000000">7. Alpha 透明</font></p><p><font color="#000000">嗯，这其实不是 JavaScript 的语法项目 - alpha 透明是通过 CSS 来设置的。但是当对象通过 JavaScript 设置为淡入淡出时，这就需要通过获取 CSS </font></p><p><font color="#000000">的 alpha 设定来实现，一般是在循环内部。要通过以下 JavaScript 来改变 CSS 代码：</font></p><p><font color="#000000">IE 语法：</font></p><p><font color="#000000">#myElement {<br />filter: alpha(opacity=50);<br />}</font></p><p><font color="#000000">Firefox 语法：</font></p><p><font color="#000000">#myElement {<br />opacity: 0.5;<br />}</font></p><p><font color="#000000">要使用 JavaScript 获取这些值，需要使用 style 对象：</font></p><p><font color="#000000">IE 语法：</font></p><p><font color="#000000">var myObject = document.getElementById(&quot;myElement&quot;);<br />myObject.style.<font color="#800000"><strong>filter</strong></font> = &quot;alpha(opacity=80)&quot;;</font></p><p><font color="#000000">Firefox 语法：</font></p><p><font color="#000000">var myObject = document.getElementById(&quot;myElement&quot;);<br />myObject.style.<strong><font color="#800000">opacity</font></strong> = &quot;0.5&quot;;<br /></font></p>]]></description><category>实用JS代码</category><comments>http://www.nudesign.cn/post/25.html#comment</comments><wfw:comment>http://www.nudesign.cn/</wfw:comment><wfw:commentRss>http://www.nudesign.cn/feed.asp?cmt=25</wfw:commentRss><trackback:ping>http://www.nudesign.cn/cmd.asp?act=tb&amp;id=25&amp;key=2bfef9bf</trackback:ping></item><item><title>浅析文字滚动效果</title><author>nudesign@126.com (NU)</author><link>http://www.nudesign.cn/post/24.html</link><pubDate>Wed, 04 Aug 2010 14:35:47 +0800</pubDate><guid>http://www.nudesign.cn/post/24.html</guid><description><![CDATA[<p>文字滚动显示，是网页企业公告，文字链广告常用的一种效果，说不定在什么时候你就能看到它，这种效果在今后的web发展中是不是常用或者是否依然被设计师们所青睐，从技术层面看并不是最重要的，了解它的实现原理，对自身前端技术的提高，会有很大的帮助，世间万物，万变不离其宗，掌握了它的运行规律，你才不会被其花花外表所迷惑，甚至你可以在掌握其规律的前提下，运行相关技术，创造出新的效果来。下面看看它的实现过程：、<br />1.xhtml 代码:<br />&lt;div class=&quot;box&quot; id=&quot;marqueebox0&quot;&gt;<br />&lt;ul&gt;<br />&lt;li style=&quot;background:#f8e2ac;&quot;&gt;第一行&lt;/li&gt;<br />&lt;li style=&quot;background:#f5f5f5;&quot;&gt;第二行&lt;/li&gt;<br />&lt;li style=&quot;background:#ffe6ec;&quot;&gt;第三行&lt;/li&gt;<br />&lt;/ul&gt;<br />&lt;/div&gt;2.css 代码:<br />.box{width:150px; height:25px;line-height:25px; border:#bbb 1px solid; overflow:hidden;}<br />.box ul{margin:0; padding:0}<br />.box li{height:25px; line-height:25px; font-size:12px; text-align:center; list-style-type:none;}3.js 代码:<br />function startmarquee(lh,speed,delay,index){<br />/*<br />函数startmarquee的参数：<br />lh：文字一次向上滚动的距离或高度；<br />speed：滚动速度；<br />delay：滚动停顿的时间间隔；<br />index：可以使封装后的函数应用于页面当中不同的元素；<br />*/<br />&nbsp;&nbsp;&nbsp;&nbsp; var t;<br />&nbsp;&nbsp;&nbsp;&nbsp; var p=false; <br />&nbsp;&nbsp;&nbsp;&nbsp; var o=document.getElementById(&quot;marqueebox&quot;+index);<br />//获取文档中的滚动区域对象，赋值给变量o；<br />&nbsp;&nbsp;&nbsp;&nbsp; o.innerHTML+=o.innerHTML; //对象中的实际内容被复制了一份，包含了两个ul，当然li标签也由原来的3行，变为6行；复制的目的在于给文字不间断向上滚动提供过渡。<br />&nbsp;&nbsp;&nbsp;&nbsp; o.onmouseover=function(){p=true}<br />//鼠标滑过，停止滚动；<br />&nbsp;&nbsp;&nbsp;&nbsp; o.onmouseout=function(){p=false}<br />//鼠标离开，开始滚动；p是true还是false直接影响到下面start()函数的执行；<br />&nbsp;&nbsp;&nbsp; o.scrollTop = 0;<br />//文字内容顶端与滚动区域顶端的距离，初始值为0；<br />&nbsp;&nbsp;&nbsp;&nbsp; function start(){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; t=setInterval(scrolling,speed); //每隔一段时间，setInterval便会执行一次scrolling函数；speed越大，滚动时间间隔越大，滚动速度越慢；<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(!p){ o.scrollTop += 1;} <br />//滚动停止或开始，取决于p传来的布尔值；<br />&nbsp;&nbsp;&nbsp;&nbsp; } <br />&nbsp;&nbsp;&nbsp;&nbsp; function scrolling(){ <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(o.scrollTop%lh!=0){<br />//如果不被整除，即一次上移的高度达不到lh，则内容会继续往上滚动；<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; o.scrollTop += 1; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(o.scrollTop&gt;=o.scrollHeight/2) o.scrollTop = 0;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //对象o中的内容之前被复制了一次，所以它的滚动高度，其实是原来内容的两倍高度；当内容向上滚动到scrollHeight/2的高度时，全部3行文字已经显示了一遍，至此整块内容scrollTop归0；再等待下一轮的滚动，从而达到文字不间断向上滚动的效果；<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }else{ <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; clearInterval(t);<br />//否则清除t，暂停滚动 <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; setTimeout(start,delay); <br />//经过delay间隔后，启动start() 再连续滚动<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp; setTimeout(start,delay);<br />//第一次启动滚动；setTimeout会在一定的时间后执行函数start()，且只执行一次<br />}<br />//传递参数<br />startmarquee(25,30,3000,0);<br />//带停顿效果<br />startmarquee(25,40,0,1);<br />//不间断连续</p><p>原代码：</p><p>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>&quot;&gt;<br />&lt;html xmlns=&quot;<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>&quot;&gt;<br />&lt;head&gt;<br />&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt;<br />&lt;title&gt;文字向上滚动&lt;/title&gt;<br />&lt;style type=&quot;text/css&quot;&gt;<br />.box{width:150px; height:25px;line-height:25px; border:#bbb 1px solid; overflow:hidden;}<br />.box ul{margin:0; padding:0}<br />.box li{height:25px; line-height:25px; font-size:12px; text-align:center; list-style-type:none;}<br />&lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;div class=&quot;box&quot; id=&quot;marqueebox0&quot;&gt;<br />&lt;ul&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li style=&quot;background:#f8e2ac;&quot;&gt;第一行&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li style=&quot;background:#f5f5f5;&quot;&gt;第二行&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li style=&quot;background:#ffe6ec;&quot;&gt;第三行&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />&lt;/div&gt;&lt;br /&gt;<br />&lt;div class=&quot;box&quot; id=&quot;marqueebox1&quot;&gt;<br />&lt;ul&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li style=&quot;background:#f8e2ac;&quot;&gt;第一行&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li style=&quot;background:#f5f5f5;&quot;&gt;第二行&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li style=&quot;background:#ffe6ec;&quot;&gt;第三行&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />&lt;/div&gt;<br />&lt;script type=&quot;text/javascript&quot;&gt;<br />function startmarquee(lh,speed,delay,index){<br />var t;<br />var p=false; <br />var o=document.getElementById(&quot;marqueebox&quot;+index);<br />o.innerHTML+=o.innerHTML; <br />o.onmouseover=function(){p=true}<br />o.onmouseout=function(){p=false}<br />o.scrollTop = 0;<br />function start(){<br />&nbsp;&nbsp; t=setInterval(scrolling,speed);<br />&nbsp;&nbsp; if(!p){ o.scrollTop += 1;} <br />} <br />function scrolling(){ <br />&nbsp;&nbsp; if(o.scrollTop%lh!=0){<br />&nbsp;&nbsp;&nbsp; o.scrollTop += 1; <br />&nbsp;&nbsp;&nbsp; if(o.scrollTop&gt;=o.scrollHeight/2) o.scrollTop = 0;<br />&nbsp;&nbsp; }else{ <br />&nbsp;&nbsp;&nbsp; clearInterval(t);<br />&nbsp;&nbsp;&nbsp; setTimeout(start,delay); <br />&nbsp;&nbsp; }<br />}<br />setTimeout(start,delay);<br />}<br />startmarquee(25,30,3000,0);<br />startmarquee(25,40,0,1);<br />&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />&nbsp;<br />&nbsp;</p>]]></description><category>实用JS代码</category><comments>http://www.nudesign.cn/post/24.html#comment</comments><wfw:comment>http://www.nudesign.cn/</wfw:comment><wfw:commentRss>http://www.nudesign.cn/feed.asp?cmt=24</wfw:commentRss><trackback:ping>http://www.nudesign.cn/cmd.asp?act=tb&amp;id=24&amp;key=ca6db27c</trackback:ping></item><item><title>js+css实现多个选项卡切换效果 </title><author>nudesign@126.com (NU)</author><link>http://www.nudesign.cn/post/23.html</link><pubDate>Wed, 04 Aug 2010 14:33:49 +0800</pubDate><guid>http://www.nudesign.cn/post/23.html</guid><description><![CDATA[<p>&nbsp;<img title="" alt="" src="http://www.nudesign.cn/upload/f2aa9710184e29c7c3ce79de.jpg" onload="ResizeImage(this,520)" /></p><p>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><font color="#000000" size="3">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</font></a><font color="#000000" size="3">&quot;&gt;<br />&lt;html xmlns=&quot;</font><a href="http://www.w3.org/1999/xhtml"><font color="#000000" size="3">http://www.w3.org/1999/xhtml</font></a><font color="#000000" size="3">&quot;&gt;<br />&lt;head&gt;<br />&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=gb2312&quot; /&gt;<br />&lt;title&gt;自编的多个选项卡切换效果&lt;/title&gt;<br /><strong>&lt;style type=&quot;text/css&quot;&gt;</strong><br />body{background-color:#fff;}<br />.box{width:318px; border:#C5D7A5 1px solid; padding-bottom:20px;}<br />.box div{padding:0 8px;}<br />.box a{color:#333; font-size:12px; text-decoration:none;}<br />.box a:hover{ text-decoration:underline;}<br />.box ul,.box dl{margin:0; padding:0; line-height:25px; clear:both;}<br />.box dt{width:141px; height:25px; line-height:25px;text-align:center;border:#EBEAEB 1px solid; margin:0 8px;font-size:12px;<font color="#cc0000">float:left;display:inline; position:relative;bottom:-1px;</font>margin-top:5px;cursor:pointer;}<br />.box ul{border:#DCECC0 1px solid;<font color="#cc0000">float:left;</font>padding:5px 0 5px 10px;<font color="#cc0000">display:none;</font>}<br />.box ul li{list-style:none;float:left;width:135px;padding-left:10px;}<br />.box dt.on{border:#DCECC0 1px solid;<font color="#cc0000">border-bottom:#FFF 1px solid;height</font><font color="#cc0000">:30px;</font>font-weight:bold;}<br /><strong>&lt;/style&gt;</strong><br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;div class=&quot;box&quot; id=&quot;box&quot;&gt;<br />&nbsp;&nbsp;&nbsp; &lt;dl&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;dt class=&quot;on&quot;&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐&lt;/a&gt;&lt;/dt&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;dt&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐&lt;/a&gt;&lt;/dt&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/dl&gt;<br />&nbsp;&nbsp;&nbsp; &lt;div&gt;<br />&nbsp;&nbsp;&nbsp; &lt;ul style=&quot;display:block;&quot;&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;快乐&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;快乐&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;快乐&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;快乐&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;快乐&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;快乐&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;快乐&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;快乐&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&nbsp;&nbsp;&nbsp; &lt;dl&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;dt&gt;儿童节快乐&lt;/dt&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;dt&gt;儿童节快乐&lt;/dt&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/dl&gt;<br />&nbsp;&nbsp;&nbsp; &lt;div&gt;<br />&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;快乐&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;快乐&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;快乐&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;快乐&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;快乐&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;快乐&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;快乐&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;快乐&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;儿童节快乐 &lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&nbsp;&nbsp;&nbsp; &lt;div style=&quot;clear:both;&quot;&gt;&lt;/div&gt;<br />&lt;/div&gt;<br /><strong>&lt;script type=&quot;text/javascript&quot;&gt;</strong><br />var box=document.getElementById(&quot;box&quot;);<br />function tab(){<br />var dllist=box.getElementsByTagName(&quot;dl&quot;)<br />for(i=0;i&lt;dllist.length;i++){<br />&nbsp;&nbsp; var dtlist=dllist[i].getElementsByTagName(&quot;dt&quot;);<br />&nbsp;&nbsp; //alert(dtlist.length)<br />&nbsp;&nbsp;&nbsp;<font color="#783f04"> </font><font color="#990000">for(j=0;j&lt;dtlist.length; j++){(&nbsp;&nbsp; <font color="#a2c4c9">//<font face="Courier New" size="2">弹出元素在其元素列表或数组中所处的位置编号或下标号</font></font><br />&nbsp;&nbsp;&nbsp;&nbsp; function(n)<br />&nbsp;&nbsp;&nbsp;&nbsp; { <br /></font>&nbsp;&nbsp;&nbsp;&nbsp; // dtlist[j].className=&quot;&quot;;<br />&nbsp;&nbsp;&nbsp;<font color="#990000"> dtlist[j].onmouseover=function(){<br /></font>&nbsp;&nbsp;&nbsp;&nbsp; //var parentdt=this.parentNode<br />&nbsp;&nbsp;&nbsp;&nbsp; var con_div=get_nextSibling(this.parentNode)<br />&nbsp;&nbsp;&nbsp;&nbsp; //alert(con_div.nodeName);<br />&nbsp;&nbsp;&nbsp;&nbsp; var ullist=con_div.getElementsByTagName(&quot;ul&quot;);<br />&nbsp;&nbsp;&nbsp;&nbsp; //alert(ullist.length);<br />&nbsp;&nbsp;&nbsp;<font color="#660000"> </font><font color="#990000">//alert(n)<br /></font>&nbsp;&nbsp;&nbsp;&nbsp; allbox();<br />&nbsp;&nbsp;&nbsp;&nbsp; this.className=&quot;on&quot;;<br />&nbsp;&nbsp;&nbsp;&nbsp; ullist[n].style.display=&quot;block&quot;<br /><font color="#990000">&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; )(j);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</font><br />}<br />function allbox(){<br />var allul=box.getElementsByTagName(&quot;ul&quot;)<br />var dtlist=box.getElementsByTagName(&quot;dt&quot;)<br />for(x=0,y=0;x&lt;allul.length,y&lt;dtlist.length;x++,y++){allul[x].style.display=&quot;none&quot;;dtlist[y].className=&quot;&quot;;}<br />}<br />}<br />function get_nextSibling(n){<br />var x=n.nextSibling;<br />while (x.nodeType!=1){<br />&nbsp;&nbsp; x=x.nextSibling;<br />}<br />return x;<br />}<br />if (window.attachEvent){window.attachEvent(&quot;onload&quot;, tab);}else{window.addEventListener(&quot;load&quot;,tab,true);}<br /><strong>&lt;/script&gt;</strong><br />&lt;/body&gt;<br />&lt;/html&gt;</font></p>]]></description><category>实用JS代码</category><comments>http://www.nudesign.cn/post/23.html#comment</comments><wfw:comment>http://www.nudesign.cn/</wfw:comment><wfw:commentRss>http://www.nudesign.cn/feed.asp?cmt=23</wfw:commentRss><trackback:ping>http://www.nudesign.cn/cmd.asp?act=tb&amp;id=23&amp;key=f3c2c6b5</trackback:ping></item></channel></rss>

