华仔博客

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

js实现的最简单的滑动门

2013年12月3日 1767点热度 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日
    回复
  • 取消回复
    广告
    搜索
    最新 热点 随机
    最新 热点 随机
    最后的生还者4k阿里云盘分享 Ahrefs账号-Ahrefs的终极使用教程 Moz Pro共享账号-Moz工具完整教程 Moz Pro团购账号 Ahrefs正版账号共享使用 Ahrefs共享团购账号 Wordpress文章列表没有缩略图就显示默认图片 SEMrush 团购账号-SEMrush 的优点 2022最新Semrush正版账号共享使用 Semrush团购账号 SEMrush是什么-semrush使用教程 谷歌SEO关键词调研工具SEMRUSH如何使用 wordpress 产品图片放大镜效果制作 phpmyadmin 修改表 Table 'wp_options' is read only GSA Search Engine Ranker 项目窗口详细介绍 iRedMail 支持的密码 Wild Rift 英雄联盟手游美服转日服(国际服之间的转换)教程 网站更换主题喽 Burn It All Down (ft. PVRIS) _Worlds 2021 - League of Legends iredmail批量导入用户 Helo command rejected: ACCESS DENIED的 问题处理 宝塔面板编译开启ngx_pagespeed成功版 华仔教你如何看清一个网站和公众号 网站建设_wdcp mysql5.5升级5.6成功版 ios开发_UIButton的常见设置 ios开发_UIButton的状态 ios开发_什么是UIImageView ios开发_UIView的常见属性 ios开发_父控件、子控件 ios开发IBAction和IBOutlet的介绍
    最后的生还者4k阿里云盘分享Ahrefs账号-Ahrefs的终极使用教程
    济南seo解释很多人不愿意原创的原因 谷歌首页变图灵机,今天你的谷歌首页的google亮了吗 seo博客_引蜘蛛的目的以及怎么高效的引蜘蛛 为给父母省10万择校费,13岁宁夏女孩自杀 百度搜索团队说说什么是页面价值 seo博客_seo寻找资源的方法终极解密 dedecms仿淘宝产品显示效果 ios6.1正式发布,ios6.1完美越狱工具可能在周末发布 北京seo_lee详细介绍site语法下的结果数问题 Google搜索新算法,严惩侵权的网站 北京seo详细介绍如何获取sitemap激活码 做百度知道不被删除的实战技巧 iredmail邮件系统安装教程 微博营销推广,如何考核 医疗seoer对站内优化的总结 如何将你裂变与转换的效率提升10倍 centos7 mysql5.7安装教程 北京seo_站内优化之网站地图添加到robots.txt及提交给谷歌 网站首页内容页内链多少个合适 神舟天宫对接成功,神舟九号与天宫一号亲密接触 seo_文章怎么增加用户的阅读量 百度搜索上线ICP备案信息展示 apache服务器默认首页的设置方面 长春杀婴盗车事件后媒体的反思! 你若不离不弃,我必生死相依(雅安地震爱情集锦) 北京seo_SEO优化关键要素 一位做10年seo的老外经验之谈 ios开发笔记 Ahrefs账号-Ahrefs的终极使用教程 凤凰博客又一个神奇的博客推广利器

    © 2012 sem-home.com.版权所有Digital Marketing

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

    京ICP备12020022号