js实现的最简单的滑动门

网站建设 admin 5年前 (2013-12-03) 1064次浏览 未收录 1个评论

近期在学习js,以前找js特效的时候,都是去网上找代码,后来发现有的特效可能不适合自己,需要再修改修改不懂,那怎么办,就学习呗。近期在学习js希望会js 的小伙伴们多交流下,不多说了下面发下一个代码很少的滑动门特效。

<div class=”top_nav_news_right”>
<div class=”index_news_right_top”>
<ul>
<li><span class=”hdm_01″ id=”hdm0″ onmousemove=”javascript:hd(0);”>推荐</span></li>
<li><span id=”hdm1″ onmousemove=”javascript:hd(1);”>精品</span></li>
<li><span id=”hdm2″ onmousemove=”javascript:hd(2);”>热点</span></li>
<li><span id=”hdm3″ onmousemove=”javascript:hd(3);”>聚集</span></li>
</ul>
</div>
<div class=”news_right_content” style=”display:block;” id=”tx_hd0″>
<ul>
<li><a href=”#”>1QQ聊天助手 边聊边搜更轻松</a></li>
<li><a href=”#”>QQ聊天助手 边聊边搜更轻松</a></li>
<li><a href=”#”>QQ聊天助手 边聊边搜更轻松</a></li>
<li><a href=”#”>QQ聊天助手 边聊边搜更轻松</a></li>
<li><a href=”#”>QQ聊天助手 边聊边搜更轻松</a></li>
</ul>
</div>
<div class=”news_right_content” style=”display:none;” id=”tx_hd1″>
<ul>
<li><a href=”#”>2QQ聊天助手 边聊边搜更轻松</a></li>
<li><a href=”#”>QQ聊天助手 边聊边搜更轻松</a></li>
<li><a href=”#”>QQ聊天助手 边聊边搜更轻松</a></li>
<li><a href=”#”>QQ聊天助手 边聊边搜更轻松</a></li>
<li><a href=”#”>QQ聊天助手 边聊边搜更轻松</a></li>
</ul>
</div>
<div class=”news_right_content” style=”display:none;” id=”tx_hd2″>
<ul>
<li><a href=”#”>3QQ聊天助手 边聊边搜更轻松</a></li>
<li><a href=”#”>QQ聊天助手 边聊边搜更轻松</a></li>
<li><a href=”#”>QQ聊天助手 边聊边搜更轻松</a></li>
<li><a href=”#”>QQ聊天助手 边聊边搜更轻松</a></li>
<li><a href=”#”>QQ聊天助手 边聊边搜更轻松</a></li>
</ul>
</div>
<div class=”news_right_content” style=”display:none;” id=”tx_hd3″>
<ul>
<li><a href=”#”>4QQ聊天助手 边聊边搜更轻松</a></li>
<li><a href=”#”>QQ聊天助手 边聊边搜更轻松</a></li>
<li><a href=”#”>QQ聊天助手 边聊边搜更轻松</a></li>
<li><a href=”#”>QQ聊天助手 边聊边搜更轻松</a></li>
<li><a href=”#”>QQ聊天助手 边聊边搜更轻松</a></li>
</ul>
</div>
</div>
<script>
function hd(num){

for(var id = 0;id<4;id++)
{
if(id==num)
{
document.getElementById(“tx_hd”+id).style.display=”block”;
document.getElementById(“hdm”+id).className=”bg_block”;
}
else
{
document.getElementById(“tx_hd”+id).style.display=”none”;
document.getElementById(“hdm”+id).className=”bg_none”;
}
}
}</script>

有的朋友复制了代码后发现怎么页面那么乱,亲这是正常的。因为里面没样式。做好的页面直接套用就好。


华仔博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:js实现的最简单的滑动门
喜欢 (0)
[]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 分享了
    新青年摄影2014-06-20 10:33 回复