三种常用的网页滑动门效果源代码(无AJAX)

本文主要是介绍三种常用的网页滑动门效果源代码(无AJAX)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

三种常用的网页滑动门效果源代码，使用CSS+JS，无需ajax及jquery等。

第一种方式最简单，由js控制css显示样式。

第二种方式采用js事件和css遮罩，实现起来稍麻烦些，但可实现鼠标悬停切换功能。

第三种方式通过改变遮罩层的左右位置来实现，不建议使用，因为可能会造成某些浏览器的界面溢出现象。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>网页滑动门效果</title> <mce:style type="text/css"><!-- body,div,ul,li{ margin:0 auto; padding:0; } body{ font:12px "宋体"; text-align:center; } a:link{ color:#00F; text-decoration:none; } a:visited { color: #00F; text-decoration:none; } a:hover { color: #c00; text-decoration:underline; } ul{ list-style:none; } .main{ clear:both; padding:8px; text-align:center; } /*第一种形式*/ #tabs0 { height: 200px; width: 400px; border: 1px solid #cbcbcb; background-color: #f2f6fb; } .menu0{ width: 400px; } .menu0 li{ display:block; float: left; padding: 4px 0; width:100px; text-align: center; cursor:pointer; background: #FFFFff; } .menu0 li.hover{ background: #f2f6fb; } #main0 ul{ display: none; } #main0 ul.block{ display: block; } /*第二种形式*/ #tabs1{ text-align:left; width:400px; } .menu1box{ position:relative; overflow:hidden; height:22px; width:400px; text-align:left; } #menu1{ position:absolute; top:0; left:0; z-index:1; } #menu1 li{ float:left; display:block; cursor:pointer

这篇关于三种常用的网页滑动门效果源代码(无AJAX)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！