华仔博客

  • 首页
  • seo
  • 网站建设
  • 工具资源
  • 生活
  • 程序开发
  • 网上那点事
  • 网络营销
华仔博客
一个经验分享的博客
  1. 首页
  2. 网站建设
  3. 正文

js实现的最简单的滑动门

2013年12月3日 1935点热度 0人点赞 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>

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

标签: js js滑动门
最后更新:2013年12月3日

admin

这个人很懒,什么都没留下

点赞
下一篇 >

文章评论

  • 新青年摄影

    分享了

    2014年6月20日
    回复
  • 取消回复
    广告
    搜索
    最新 热点 随机
    最新 热点 随机
    谷歌SEO的页面标题和元描述的长度多长最合适? 如何利用wordpress编辑网站页面 Hitpaw watermark remover去图片视频水印神器 中国教育报发稿联系方式 WordPress博客页面和文章 如何充分利用您的 SEMrush 帐户 什么是 Robots.txt 文件以及Robots.txt 文件如何工作 ? WordPress列表页分页制作教程 youtube视频响应式插件Simple YouTube Responsive WordPress文章页添加展开/收缩功能 WordPress栏目调用去掉Ul标签 WordPress如何调用置顶文章 《长安三万里》云盘分享 《名侦探柯南:黑铁的鱼影》云盘分享 《变形金刚:超能勇士崛起》云盘分享 如何使用奈飞Netflix cookies登录奈飞Netflix 《蜘蛛侠:纵横宇宙》云盘分享 长空之王云盘分享 阿诺施瓦辛格第一部电视剧《面目全非FUBAR》云盘分享 闪电侠第九季云盘分享 速度与激情10云盘分享 永生战士2022 灌篮高手电影粤语版云盘分享 超级马力欧兄弟大电影云盘分享 银河护卫队3百度云盘阿里云盘 漫长的季节阿里云盘 GSA Search Engine Ranker项目屏幕 GSA Search Engine Ranker内容创建服务推荐 GSA Search Engine Ranker 仿写服务推荐 GSA Search Engine Ranker电子邮件账户推荐
    谷歌SEO的页面标题和元描述的长度多长最合适?
    dede网站建设实用篇 Disallow: /test和Disallow: /test/的区别 个人微信号怎么实现公众号自动回复功能 13年四川高考高考满分作文:中国式平衡 dedecms转wordpress详细版,成功版,经典版 北京seo_本地php环境的搭建 WordPress博客页面和文章 微博营销_企业微博的建设以及微博推广的技巧 Ahrefs正版账号共享使用 转载:seowhy夫唯的人生经历 ios开发_UIButton的常见设置 百度快照跟网站权重没半毛钱关系-lee如是说 小美人鱼真人版云盘分享 Netflix奈飞,HBO Max,Disney+账号会员免费分享 神舟天宫对接成功,神舟九号与天宫一号亲密接触 怒呛人生阿里云盘 config_global.php未找到或者无法访问解决方法 北京seo_网站三大标签的优化 曼达洛人第三季中字4k阿里网盘 安徽的满分作文,大学上还是不上我也无语了 seo工具_升级版外链查询工具21号放出 json gbk转utf8 mysql 5.5 数据库主从同步教程 seo详解企业优化容易作弊的3点 北京seo_关于6.22号和28号的百度更新lee说话了 ecshop首页通过关键词调用产品 北京seo_404页面对seo有什么影响 phpstudy forbidden 403错误的处理方法 ios6.1正式发布,ios6.1完美越狱工具可能在周末发布 生活小记_蛋疼的事情终于都过去了

    © 2012-2023 sem-home.com.版权所有.

    主题KRATOS貌似作者网站打不开了,就没加,嗯就这样

    京ICP备12020022号