jQuery实现滑动门效果
课堂练习jQ代码
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>滑动门效果</title><style type="text/css">ul.tabs{list-style: none;margin-left: 70px;}ul.tabs li{margin: 0;padding: 0;float: left;width: 50px;height: 26px;line-height: 26px;font-size: 16px;}ul.tabs li a.active{display: block;width: 50px;height: 26px;line-height: 26px;background-color: #66ccff;color: #ffffff;cursor: pointer;}</style><script src="jquery-3.3.1.js"></script>
<script type="text/javascript">$(document).ready(function(){$(".tab_content").hide();$("ul.tabs li a:first").addClass("active");$(".tab_content:first").show();$("ul.tabs li a").hover(function(){$("ul.tabs li a").removeClass("active");$(this).addClass("active");$(".tab_content").hide();var activeTab = $(this).attr("name");$(activeTab).show();})})</script>
</head>
<body>
<table align="center" width="300" border="0" cellpadding="0" cellspacing="0">
<tr><td align="left" height="50" style="font-size: 22px;" valign="bottom">电影排行</td><td align="center" valign="bottom"><ul class="tabs"><li><a name="#tab1">热播</a></li><li><a name="#tab2">经典</a></li></ul></td>
</tr>
</table><div id="tab1" class="tab_content"><table align="center" width="300" border="0" cellpadding="0" cellspacing="0"><script>var num=1;var nameArray = new Array("终结者5","飓风营救","我是传奇","一线生机","罗马假日","史密斯夫妇","午夜邂逅");var dnumArr = new Array("阿诺德.施瓦辛格","连姆.尼森","威尔.史密斯","杰森.斯坦森","格里高利.派克","布拉德.皮特","克里斯.埃文斯");for(var i=0;i<nameArray.length;i++){document.write('<tr height="43">');document.write('<td width="26" align="center" class="f_td">'+(num++)+'</td>');document.write('<td width="75" align="left" class="f_td"><a href="#">'+nameArray[i]+'</a></td>');document.write('<td width="90" align="right" class="f_td">'+dnumArr[i]+'</td></tr>');}</script></table>
</div>
<div id="tab2" class="tab_content"><table align="center" width="300" border="0" cellspacing="0" cellpadding="0"><script>var num = 1;var nameArr = new Array("机械师2：复活","变形金刚","暮光之城","怦然心动","电话情缘","超凡蜘蛛侠","雷神");var dnumArr = new Array("杰森.斯坦森","希亚.拉博夫","克里斯汀.斯图尔特","玛德琳.卡罗尔","杰西.麦特卡尔菲","安德鲁.加菲尔德","克里斯.海姆斯沃斯");for(var i = 0; i<nameArr.length; i++) {document.write('<tr height="43">');document.write('<td width="26" align="center" class="f_td">' + (num++) + '</td>');document.write('<td width="75" align="left" class="f_td"><a href="#">' + nameArr[i] + '</td>');document.write('<td width="90" align="right" class="f_td">' + dnumArr[i] + '</td></tr>');}</script></table>
</div></body>
</html>
jQuery实现滑动门效果相关推荐
- 滑动门套滑动门css,JS+CSS实现带小三角指引的滑动门效果
本文实例讲述了JS+CSS实现带小三角指引的滑动门效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS带小三角指引的滑动门,有朋友说在IE6下看不到效果,其实能看到,因为那个小三角颜色比较淡, ...
- html css纵向滑动列表,JS实现的简洁纵向滑动菜单(滑动门)效果
本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果.分享给大家供大家参考,具体如下: 这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自 ...
- 原生JavaScript实现滑动门效果
一.什么是滑动门 首先你要了解什么是滑动门. 生活中我们经常看到一些网站或是商城有一些滑动门的效果, 那么怎么实现一个简单的滑动门的网页特效呢?下面简单分享一下方法, 二.实现滑动门所需技术 简单的H ...
- css滑动门效果，文字两侧背景花纹自适应
css滑动门效果:不同长度的文字,两侧的背景图案一致,如下图所示. 效果预览: 素材图片:t2.jpg 源代码如下: <!DOCTYPE html> <html lang=" ...
- php多重滑动门,CSS如何实现滑动门效果
CSS实现滑动门效果主要通过设置伪元素的样式来实现,在鼠标滑过时给元素设置display:block让它显示,鼠标滑出时隐藏 一个网站的导航栏对于网站来说有着举足轻重的地位,导航栏的风格也是各式各样的 ...
- jquery——9滑动门
滑动门: 点击话费,只有话费显示,其它的隐藏; 点击机票,只有机票显示,其它的隐藏: 先做出以下效果图: 实现的功能: 点击机票,机票在四个链接中排第二个,需要让第二个div出来,其他的隐藏; 点击机 ...
- html如何做滑动门效果,JS+CSS实现简单滑动门(滑动菜单)效果
本文实例讲述了JS+CSS实现简单滑动门的方法.分享给大家供大家参考.具体如下: 这是一款超简约设计的滑动门菜单,鼠标放到主菜单上,里面的内容会跟着变化,实际上本演示是一个范例,从代码中的注释你就能感 ...
- css的滑动门效果,JS+CSS实现简易实用的滑动门菜单效果
本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希 ...
- html如何做滑动门效果,div+css制作简单滑动门效果
现在流行的网站设计中,水平导航菜单占据了大壁江山.的确,无论是门户网站还是企事业单位网站,都大量的采用水平的导航菜单设计.而水平导航菜单中,又有绝大多数网站采用"滑动门"设计. 首 ...
- 一个简单的滑动门效果代码
//滑动门 function menu(a,idName,cssName) { for(i=1;i<=2;i++) { if(i==a) { ...
最新文章
- Mysql备份与还原及优化方法
- 解读网络“攻城狮”的发展---老赵带你铺一段路
- python的运行窗口-在 Python 窗口中执行工具
- Imagine,is real crazy!
- mysql 输出参数赋值_【Mysql 调用存储过程，输出参数的坑】
- java整形怎么转字符串型_java整型与字符串互转
- servlet——三兄弟的另外两个：过滤器/监听器
- linux安装python3.7
- Winform 导航菜单的方法
- pytorch中lstm用法详解（二）
- java ir_基本功 | Java即时编译器原理解析及实践
- web打印组件康虎云报表与odoo整合示例
- [C/C++]Windows下的getch函数实现
- mac下下载安装mat
- 收藏一个Excel甘特图模板
- 74LS138译码器实现举重裁判电路-QuartusII 软件仿真
- 【转载】你必须知道的10种国产编程语言
- Iphone 游戏引擎剖析
- 使用了一次VPN关闭后，网页打不开了
- intellij idea处理xml文件File encoding is disabled,Encoding is hard-coded in the text.提示的方法