账号通
    

注册

找回密码

账号  

密码  

话题
互动
会员
服务
<<返回列表上一个主题 下一个主题 打印本帖 复制本帖地址

10612

查看

12

回复
主题：[分享][网页设计常用]鼠标滑动TAB切换新闻效果 [收藏主题] 本贴被认定为精华 转到：  
任我行 当前离线

6496

主题

191

广播

251

粉丝
添加关注
级别:管理员

用户积分:46050 分
登录次数:4182 次
注册时间:2006/4/26
最后登录:2024/11/21
任我行 发表于：2010/7/9 9:45:57   | 显示全部帖子 查看该作者主题 楼主 
科汛在线商城系统(NET)
有课程 找生源 就上科汛课堂街
效果一:



点击查看原图







代码一:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
  2. <HTML><HEAD><TITLE>绝对经典的滑轮新闻显示(javascript+css)</TITLE>
  3. <META http-equiv=Content-Type content="text/html; charset=gb2312">
  4. <style type="text/css">
  5. <!--
  6. BODY {
  7. PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: black; LINE-HEIGHT: 150%; PADDING-TOP: 10px; BACKGROUND-COLOR: white; TEXT-ALIGN: center
  8. }
  9. .dis {
  10. DISPLAY: block
  11. }
  12. .undis {
  13. DISPLAY: none
  14. }
  15. #cntR {
  16. WIDTH: 302px
  17. }
  18. #NewsTop {
  19. CLEAR: both; MARGIN-BOTTOM: 16px
  20. }
  21. #NewsTop P {
  22. FLOAT: left; LINE-HEIGHT: 21px
  23. }
  24. #NewsTop P.topTit {
  25. FONT-WEIGHT: bold; WIDTH: 117px
  26. }
  27. #NewsTop P.topC0 {
  28. BACKGROUND: #dcdcdc; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; CURSOR: pointer
  29. }
  30. #NewsTop P.topC1 {
  31. BACKGROUND: #c2130e; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; COLOR: #fff
  32. }
  33. #NewsTop #NewsTop_tit {
  34. BORDER-BOTTOM: #c2130e 3px solid; HEIGHT: 21px
  35. }
  36. #NewsTop #NewsTop_cnt {
  37. PADDING-LEFT: 32px; BACKGROUND: url(/upload/remotpic/200761216111204.gif) no-repeat 12px 13px; LINE-HEIGHT: 26px; PADDING-TOP: 7px; HEIGHT: 260px; TEXT-ALIGN: left
  38. }
  39. #NewsTop #NewsTop_cnt A {
  40. COLOR: #666; TEXT-DECORATION: none
  41. }
  42. #NewsTop #NewsTop_cnt A:hover {
  43. COLOR: #c2130e; TEXT-DECORATION: underline
  44. }
  45. -->
  46. </style>
  47. </HEAD>
  48. <BODY>
  49. <DIV id=cntR>
  50. <DIV id=NewsTop>
  51. <DIV id=NewsTop_tit>
  52. <P class=topTit>新闻排行</P>
  53. <P class=topC0>国内</P>
  54. <P class=topC0>国际</P>
  55. <P class=topC0>社会</P>
  56. <P class=topC0>网评</P>
  57. </DIV>
  58. <DIV id=NewsTop_cnt><SPAN title="Don't delete me"></SPAN>
  59. <SPAN>
  60. <A href="#" target=_self>新疆阜康铁路桥梁坍塌多节运煤车厢侧翻坠河</A><BR>
  61. <A href="#" target=_self>最高法:承诺不判赖昌星死刑没有超越法律程序</A><BR>
  62. <A href="#" target=_self>物权法:满70年住宅建设用地使用权将自动续期</A><BR>
  63. <A href="#" target=_self>弟弟被妻下药毒死男子买女尸为其配阴婚(图)</A><BR>
  64. <A href="#" target=_self>揭开郑州神枪手神秘面纱 头号狙击手是近视眼</A><BR>
  65. <A href="#" target=_self>美军高官:不排除和中国发生直接军事对抗可能</A><BR>
  66. <A href="#" target=_self>浙江东阳传奇富姐吴英涉嫌非法吸收存款被批捕</A><BR>
  67. <A href="#" target=_self>西方炒作"中国航母威胁论"称05年已正式服役</A><BR>
  68. <A href="#" target=_self>女孩生活无法自理请人大代表递交安乐死议案</A><BR>
  69. <A href="#" target=_self>建设部：住房公积金制度将覆盖农民工</A><BR>
  70. <div align="right"><A href="#" target=_self>...more</A></div>
  71. </SPAN>
  72. <SPAN>
  73. <A href="#" target=_self>美华裔女兵在营房上吊死亡军方介入调查(图)</A><BR>
  74. <A href="#" target=_self>组图：美国总统布什车队被撞</A><BR>
  75. <A href="#" target=_self>梦露掌握肯尼迪之弟秘密遭诱骗自杀(组图)</A><BR>
  76. <A href="#" target=_self>孟加拉国严打贪官人人自危奔驰宝马抛弃路边</A><BR>
  77. <A href="#" target=_self>韩国将举行大规模军事演习(图文)</A><BR>
  78. <A href="#" target=_self>组图：土星最大卫星表面发现“海洋”</A><BR>
  79. <A href="#" target=_self>墨西哥缉毒行动缴获2亿美元巨额现钞(组图)</A><BR>
  80. <A href="#" target=_self>组图：全球掀起裸体抗议加拿大捕猎海豹活动</A><BR>
  81. <A href="#" target=_self>美潜艇在百慕大失踪一晚航母战群出动搜索</A><BR>
  82. <A href="#" target=_self>匈牙利20万人示威 政要被民众扔鸡蛋(组图)</A><BR>
  83. <div align="right"><A href="#" target=_self>...more</A></div>
  84. </SPAN>
  85. <SPAN>
  86. <A href="#" target=_self>深圳女工被三名男子轮奸男友目睹过程(组图)</A><BR>
  87. <A href="#" target=_self>男子珍藏一角钱“币王”价格高达1.3万(图)</A><BR>
  88. <A href="#" target=_self>青海女孩被困洗头房每天接客十几次(图)</A><BR>
  89. <A href="#" target=_self>组图：老妻少夫演绎忘年恋69岁妻子成功除皱</A><BR>
  90. <A href="#" target=_self>陕西蓝田县电视台播放淫秽影像 达10分钟左右</A><BR>
  91. <A href="#" target=_self>女子自称被大学教授诱骗同居讨要分手费(图)</A><BR>
  92. <A href="#" target=_self>组图：男女私处成造型“性”趣礼品太出格</A><BR>
  93. <A href="#" target=_self>组图：四川泸州16岁女孩打造中国第一丑女</A><BR>
  94. <A href="#" target=_self>最高法:承诺不判赖昌星死刑没有超越法律程序</A><BR>
  95. <A href="#" target=_self>深圳发现睾丸被摘男童尸体续：疑为1月前失踪</A><BR>
  96. <div align="right"><A href="#" target=_self>...more</A></div>
  97. </SPAN>
  98. <SPAN>
  99. <A href="#" target=_self>养路费征稽员强制扣车致三轮车夫惨死车轮下</A><BR>
  100. <A href="#" target=_self>20多位学者谈***问题 方舟子遭多名专家批驳</A><BR>
  101. <A href="#" target=_self>考研女生自称揭露监考老师*** 成绩被判零分</A><BR>
  102. <A href="#" target=_self>全国政协委员建议一户一房制引起网民热议</A><BR>
  103. <A href="#" target=_self>河南周口市6名警察将人打昏后扔下楼摔死</A><BR>
  104. <A href="#" target=_self>组图：69岁老妻除皱成功 与少夫开始新生活</A><BR>
  105. <A href="#" target=_self>青海女孩被困洗头房每天接客十几次(图)</A><BR>
  106. <A href="#" target=_self>美上将：解放军不是美军对手 导弹打不垮台湾</A><BR>
  107. <A href="#" target=_self>新疆阜康铁路桥梁坍塌导致运煤列车脱轨</A><BR>
  108. <A href="#" target=_self>铁道部回应吴敬琏质疑:春运不涨价将长期坚持</A><BR>
  109. <div align="right"><A href="#" target=_self>...more</A></div>
  110. </SPAN>
  111. </DIV>
  112. <SCRIPT>
  113. var Tags=document.getElementById('NewsTop_tit').getElementsByTagName('p');
  114. var TagsCnt=document.getElementById('NewsTop_cnt').getElementsByTagName('span');
  115. var len=Tags.length;
  116. var flag=1;//修改默认值
  117. for(i=1;i<len;i++){
  118. Tags.value = i;
  119. Tags[i].onmouseover=function(){changeNav(this.value)};
  120. TagsCnt[i].className='undis';
  121. }
  122. Tags[flag].className='topC1';
  123. TagsCnt[flag].className='dis';
  124. function changeNav(v){
  125. Tags[flag].className='topC0';
  126. TagsCnt[flag].className='undis';
  127. flag=v;
  128. Tags[v].className='topC1';
  129. TagsCnt[v].className='dis';
  130. }
  131. </SCRIPT>
  132. </DIV>
  133. </DIV>
  134. </BODY></HTML>
效果二:



点击查看原图









代码二:
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  6. <title>滑动门技术</title>
  7. <style media="screen" type="text/css">
  8. <!--
  9. *{font-size:12px;}
  10. html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}
  11. UL{list-style-type:none; margin:0px;}
  12. /* 标准盒模型 */
  13. .ttl{height:18px;}
  14. .ctt{height:auto;padding:6px;clear:both;border:1px solid #064ca1;border-top:0;text-align:left;}
  15. .w936{margin:2px 0;clear:both;width:936px;/*这里调整整个滑动门的宽度*/}
  16. /* TAB 切换效果 */
  17. .tb_{background-image: url('/upload/remot2008/20083675856621.gif'); background-repeat: repeat-x;background-color: #E6F2FF;}
  18. .tb_ ul{height:24px;}
  19. .tb_ li{float:left;height: 24px;line-height:1.9;width: 94px;cursor:pointer;}
  20. /* 用于控制显示与隐藏的css类 */
  21. .normaltab   { background-image:url('/upload/remot2008/20083675857803.gif'); background-repeat: no-repeat; color:#1F3A87 ;}
  22. .hovertab    { background-image: url('/upload/remot2008/20083675857471.gif'); background-repeat: no-repeat; color:#1F3A87; font-weight:bold }
  23. .dis{display:block;}
  24. .undis{display:none;}
  25. -->
  26. </style>
  27. <script type="text/javascript" language="javascript">
  28. //<!CDATA[
  29. function g(o){return document.getElementById(o);}
  30. function HoverLi(n){
  31. //如果有N个标签,就将i<=N;
  32. for(var i=1;i<=6;i++){g('tb_'+i).className='normaltab';g('tbc_0'+i).className='undis';}g('tbc_0'+n).className='dis';g('tb_'+n).className='hovertab';
  33. }
  34. //如果要做成点击后再转到请将<li>中的onmouseover 改成 onclick;
  35. //]]>
  36. </script>
  37. </head>
  38. <body>
  39. <div class="w936">
  40. <div id="tb_" class="tb_">
  41. <ul>
  42. <li id="tb_1" class="hovertab" onmouseover="x:HoverLi(1);">
  43. 流行音乐</li>
  44. <li id="tb_2" class="normaltab" onmouseover="i:HoverLi(2);">
  45. 美女写真</li>
  46. <li id="tb_3" class="normaltab" onmouseover="a:HoverLi(3);">
  47. 平面设计</li>
  48. <li id="tb_4" class="normaltab" onmouseover="o:HoverLi(4);">
  49. 网络学堂</li>
  50. <li id="tb_5" class="normaltab" onmouseover="g:HoverLi(5);">
  51. 恋爱宝典</li>
  52. <li id="tb_6" class="normaltab" onmouseover="z:HoverLi(6);">
  53. 栏目文章</li>
  54. </ul>
  55. </div>
  56. <div class="ctt">
  57. <div class="dis" id="tbc_01">流行音乐 的内容</div>
  58. <div class="undis" id="tbc_02">美女写真 的内容</div>
  59. <div class="undis" id="tbc_03">平面设计 的内容</div>
  60. <div class="undis" id="tbc_04">网络学堂 的内容</div>
  61. <div class="undis" id="tbc_05">恋爱宝典 的内容</div>
  62. <div class="undis" id="tbc_06">栏目文章 的内容</div>
  63. </div>
  64. </div>
  65. </body>
  66. </html>
[/i][/i]







效果三:

点击查看原图





代码三:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>选项卡</title>
  5. <style type="text/css">
  6. <!--
  7. h1,h2,h3,h4,h5,h6,form{
  8. margin:0;
  9. padding:0;
  10. }
  11. #indexColumn{
  12. padding-bottom:2px;
  13. margin-bottom:0;
  14. border:#739FCB 1px solid;
  15. width:500px;
  16. }
  17. .centerColumnContent{
  18. clear:both;
  19. }
  20. /***选项卡*/
  21. .columnBar{
  22. /*兼容IE和Firefox*/
  23. width:500px!important;
  24. width:498px;
  25. padding-left:1px!important;
  26. padding:0 0 0 3px;
  27. margin:0 0 8px 0;
  28. list-style:none;
  29. float:left;
  30. background:url(/upload/remot2008/2008249626933.gif) repeat-x #FFF;
  31. line-height:25px;
  32. border-bottom:1px solid #739FCB;
  33. }
  34. .columnBar li{
  35. padding:0 16px 0 15px;
  36. float:left;
  37. cursor:pointer;
  38. background:url(/upload/remot2008/2008249626283.gif) no-repeat right center;
  39. }
  40. .columnBar li h3{
  41. color:#005295;
  42. font-size:14px;
  43. font-weight:normal;
  44. }
  45. /****选项卡高亮状态*/
  46. .columnBarOver{
  47. position:relative;
  48. margin:-1px 0 -1px -2px;
  49. padding:2px 14px 0 15px!important;
  50. line-height:24px;
  51. border-style:solid;
  52. border-width:1px 1px 0 1px;
  53. border-color:#5589BE #739FCB #739FCB #739FCB;
  54. background:url(/upload/remot2008/2008249626695.gif) repeat-x #FFF!important;
  55. }
  56. .columnBarOver h3{
  57. color:#F60!important;
  58. font-weight:bold!important;
  59. }
  60. /***中间内容*/
  61. .centerColumnContent{
  62. clear:both;
  63. }
  64. .cloumnDisplayText{
  65. color:#333;
  66. padding:5px 0 10px;
  67. margin-bottom:3px!important;
  68. margin:0 10px 4px;
  69. font-size:14px;
  70. line-height:180%;
  71. background:#FAFAFA;
  72. border-bottom:1px dashed #CCC;
  73. }
  74. -->
  75. </style>
  76. </head>
  77. <script type="text/javascript">
  78. <!--
  79. //通用选项卡样式内容变换
  80. function selCat(name,obj,n)
  81. {
  82. for(i=1;i<=n;i++)
  83. {
  84. eval("document.getElementById('"+name+i+"').className=''");
  85. //隐藏变换选项卡内容
  86. if(name == 'n' || name == 's'){}
  87. else{
  88. eval("document.getElementById('display_"+name+'_'+i+"').style.display='none'");
  89. }
  90. }
  91. //排行模块
  92. if(name == 'mt' || name == 'dt'){
  93. eval("document.getElementById('"+name+obj+"').className='topButtonOver'");
  94. }
  95. //所有中间选项卡模块
  96. else{
  97. eval("document.getElementById('"+name+obj+"').className='columnBarOver'");
  98. }
  99. //显示变换选项卡内容
  100. if(name == 'n' || name == 's'){}
  101. else{
  102. eval("document.getElementById('display_"+name+'_'+obj+"').style.display=''");
  103. }
  104. }
  105. function DLLRegistered(strID)
  106. {
  107. var o = null;
  108. try {
  109. o = new ActiveXObject(strID);
  110. }catch(e){
  111. return false;
  112. }
  113. if(o != null){
  114. o = null;
  115. return true;
  116. }else
  117. return false;
  118. }
  119. -->
  120. </script>
  121. <body >
  122. <div id="indexColumn">
  123. <ul class="columnBar">
  124. <li id="index1" onClick="selCat('index',1,5);">
  125. <h3>栏目一</h3>
  126. </li>
  127. <li id="index2" onClick="selCat('index',2,5);">
  128. <h3>栏目二</h3>
  129. </li>
  130. <li id="index3" onClick="selCat('index',3,5);" class="columnBarOver">
  131. <h3>栏目三</h3>
  132. </li>
  133. <li id="index4" onClick="selCat('index',4,5);">
  134. <h3>栏目四</h3>
  135. </li>
  136. <li id="index5" onClick="selCat('index',5,5);">
  137. <h3>栏目五</h3>
  138. </li>
  139. </ul>
  140. <div id="indexContent" class="centerColumnContent">
  141. <!--栏目一-->
  142. <div id="display_index_1" style="display:none">
  143. 栏目一
  144. </div>
  145. <!--栏目二-->
  146. <div id="display_index_2" style="display:none">
  147. 栏目二
  148. </div>
  149. <!--栏目三-->
  150. <div id="display_index_3">
  151. 栏目三
  152. </div>
  153. <!--栏目四-->
  154. <div id="display_index_4" style="display:none">
  155. 栏目四
  156. </div>
  157. <!--栏目五-->
  158. <div id="display_index_5" style="display:none">
  159. <!--栏目五-->
  160. 栏目五
  161. </div>
  162. </div>
  163. </div></body>
  164. </html>
 
有课程 找生源 就上科汛课堂街
  支持(7) | 反对(7) 回到顶部顶端 回到底部底部
＜上一主题 | 下一主题 ＞
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行0.12500秒 powered by KesionCMS 9.0