设为首页收藏本站
切换到宽版

Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
Discuz!官方免费开源建站系统»论坛 › Discuz! 交流与讨论 › Discuz!-模板 › qq客服上用的图片焦点js+css
123下一页
返回列表 发新帖

[素材] qq客服上用的图片焦点js+css

[复制链接]
briskvoice 发表于 2011-9-30 00:00:09 | 显示全部楼层 |阅读模式
本帖最后由 briskvoice 于 2011-9-30 00:03 编辑



使用方法：
1.把附件包的图片上传到www/image/
2.在需要的页面添加diy(静态模块)，添加如下代码
  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. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>QQ995505479</title>
  6. <style type="text/css">
  7. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,iframe {margin:0;padding:0;}
  8. fieldset,img {border:0;}
  9. address,caption,cite,dfn,em,th,var {font-style:normal;font-weight:normal;}
  10. ol,ul {list-style:none;}
  11. caption,th {text-align:left;}
  12. h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
  13. q:before,q:after {content:'';}
  14. abbr,acronym {border:0;}

  16. .on,.question,.often,.question_q a{
  17.         background:url(image/index_bg.png) no-repeat;
  18. }
  19. .left{
  20.         float:left;
  21.         width:670px;
  22. }

  24. .banner{
  25.         width:670px;
  26.         height:240px;
  27.         margin-top:5px;
  28.         position:relative;
  29. }
  30. .banner_tab{
  31.         height:43px;
  32.         position:absolute;
  33.         right: 5px;
  34.         bottom: 5px;
  35. }
  36. .banner_tab ul {
  37.         cursor:pointer;
  38. }
  39. .banner_tab li {
  40.     float: left;
  41.     list-style-type: none;
  42.     text-align: center;
  43. }
  44. .banner_tab a {
  45.          width:80px;
  46.          height:43px;
  47.          display:block;
  48.          margin-right:2px;
  49. }
  50. .banner_tab  img{
  51.         border:1px solid #659ab6;
  52. }
  53. .hidecontent {display:none;}
  54. .on{
  55.          background-position:0px -100px;
  56. }
  57. .on img{
  58.       border:1px solid #0099ff;
  59. }
  60. .out{}

  62. .clear{ clear:both;}

  64. .content{
  65.         margin:0 auto;
  66.         background:url(image/content_bg.png) repeat-x top;
  67.         border-left:1px solid #bad1de;
  68.         border-right:1px solid #bad1de;
  69. }

  71. .tab_img{
  72.          width:72px;
  73.          height:35px;
  74.          margin-top:3px;
  75.          border:1px solid #fff;
  76. }

  78. .help{
  79.         margin-top:10px;
  80.         width:670px;
  81. }
  82. .help .div_p{
  83.         padding:10px 5px 15px;
  84.         >padding:13px 5px 15px;
  85. }
  86. .help .help_ul{
  87.         padding:10px 0px 30px 30px;
  88.         >padding-top:1px;
  89. }

  91. .help_ul li{
  92.         float:left;
  93.         width:310px;
  94.         height:28px;
  95.         line-height:28px;
  96.         position:relative;
  97. }
  98. .help_ul .img_hot{
  99.         top:8px;
  100.         position:absolute;
  101. }

  103. a.k:link, a.k:visited {
  104.         color:#228ada;
  105.         text-decoration:none;
  106. }
  107. a.k:active,a.k:hover {
  108.         color:#000;
  109.         text-decoration:underline;
  110. }
  111. .right{
  112.         width:230px;
  113.         float:right;
  114. }




  119. </style>
  120. <script type="text/javascript">
  121. function setTab(/*string*/name,/*int*/ itemCnt,/*int*/ curItem, /**/classHide, /**/classShow)
  122. {
  123.          for(i=1;i<=itemCnt;i++)
  124.         {
  125.                 eval("document.getElementById('tab_" + name + "_" + i + "').className='" + classHide + "'");
  126.         }
  127.         eval("document.getElementById('tab_" + name + "_" + curItem + "').className='" + classShow + "'");

  129. for(i=1;i<=itemCnt;i++)
  130. {
  131.   eval("ele_hide = document.getElementById('con_" + name + "_" + i +"')");
  132.   if(ele_hide) ele_hide.style.display = "none";
  133. }
  134. eval("ele_play = document.getElementById('con_" + name + "_" + curItem + "')");
  135. if(ele_play) ele_play.style.display = "block";
  136. }
  137. </script>

  139. </head>

  141. <body>
  142. <div class="banner" id="banner">
  143.                         <div class="banner_tab clearfix">
  144.                                 <ul>
  145.                                   <li id="tab_tophome_1" class="on"><a href="/other/phone_flow.shtml" target="_blank"  onmousemove="startIndex=1;setTab('tophome',4,1,'out','on');" onclick="javascript:pgvSendClick({hottag:'KF.SERVICE.INDEX.PHONE_2'});"><img src="image/ad_1.jpg"  class="tab_img" alt="电话按键指引"/></a></li>
  146.                                   <li id="tab_tophome_2" class="out"><a href="/self/self_help.shtml" target="_blank" onmousemove="startIndex=2;setTab('tophome',4,2,'out','on');" onclick="javascript:pgvSendClick({hottag:'KF.SERVICE.INDEX.SELF_2'});"><img src="image/ad_3.jpg"  class="tab_img" alt="自助服务"/></a></li>
  147.                                   <li id="tab_tophome_3" class="out"><a href="showSurvey?survey_id=567" target="_blank" onmousemove="startIndex=3;setTab('tophome',4,3,'out','on');" onclick="javascript:pgvSendClick({hottag:'KF.SERVICE.INDEX.STUDY_2'});"><img src="image/ad_2.jpg"  class="tab_img" alt="腾讯学堂"/></a></li>
  148.                                   <li id="tab_tophome_4" class="out"><a href="c1090519040.htm" target="_blank" onmousemove="startIndex=4;setTab('tophome',4,4,'out','on');" onclick="javascript:pgvSendClick({hottag:'KF.SERVICE.INDEX.SOSO_2'});"><img src="ad_4.jpg"  class="image/tab_img" alt="问问专区"/></a></li>
  149.                                 </ul>  
  150.                         </div>
  151.                         <div>
  152.                                 <div id="con_tophome_1"><a href="/other/phone_flow.shtml" target="_blank" onclick="javascript:pgvSendClick({hottag:'KF.SERVICE.INDEX.PHONE_1'});"><img src="image/ad_1.jpg" alt="电话按键指引"/></a></div>   
  153.                                 <div id="con_tophome_2"  class="hidecontent"><a href="/self/self_help.shtml" target="_blank" onclick="javascript:pgvSendClick({hottag:'KF.SERVICE.INDEX.SELF_1'});"><img src="image/ad_3.jpg" alt="自助服务" /></a></div>   
  154.                                 <div id="con_tophome_3"  class="hidecontent"><a href="showSurvey?survey_id=567" target="_blank" onclick="javascript:pgvSendClick({hottag:'KF.SERVICE.INDEX.STUDY_1'});"><img src="image/ad_2.jpg" alt="腾讯学堂" /></a></div>   
  155.                                 <div id="con_tophome_4"  class="hidecontent"><a href="c1090519040.htm" target="_blank" onclick="javascript:pgvSendClick({hottag:'KF.SERVICE.INDEX.SOSO_1'});"><img src="image/ad_4.jpg" alt="问问专区"/></a></div>     
  156.                           <div class="clear"></div>
  157.                         </div>
  158.         </div>
  159.                 <script type="text/javascript">
  160. var pause = false;
  161. var con_num = 4;
  162. var startIndex = 1;
  163. function setLoop(){
  164.   try{
  165.    var oScroll = document.getElementById('banner');
  166.    oScroll.noWrap = true;
  167.    oScroll.onmouseover = function(e){pause = true;};
  168.    oScroll.onmouseout = function(e){pause = false;};
  169.    setInterval('scrollTopHome()', 3000);
  170.    }catch(e){alert(e.toString());}
  171. }
  172. function scrollTopHome(){
  173.   if(pause) return;
  174.   startIndex += 1;
  175.   if(startIndex > con_num){startIndex = 1;}
  176.   setTab('tophome',4,startIndex,'out','on');
  177. }
  178. setLoop();
  179. </script>
  180. </body>
  181. </html>
复制代码

OK完工



本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

七酱 发表于 2011-9-30 00:01:56 | 显示全部楼层
围观不解释
回复

使用道具 举报

anluan 发表于 2011-9-30 02:02:37 | 显示全部楼层
同样二楼
回复

使用道具 举报

wyq8848 发表于 2011-9-30 07:11:48 | 显示全部楼层
挺！不知道是什么效果，马上试一试
回复

使用道具 举报

jxhjjm 发表于 2011-9-30 07:20:38 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

ilei365 发表于 2011-9-30 07:26:18 | 显示全部楼层
很不错。。。。。。。
回复

使用道具 举报

eisdl 发表于 2011-9-30 09:59:26 | 显示全部楼层
本帖最后由 eisdl 于 2011-9-30 10:00 编辑

楼主  有问题   图片路径错误  没有前面的image
  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. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>QQ995505479</title>
  6. <style type="text/css">
  7. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,iframe {margin:0;padding:0;}
  8. fieldset,img {border:0;}
  9. address,caption,cite,dfn,em,th,var {font-style:normal;font-weight:normal;}
  10. ol,ul {list-style:none;}
  11. caption,th {text-align:left;}
  12. h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
  13. q:before,q:after {content:'';}
  14. abbr,acronym {border:0;}

  16. .on,.question,.often,.question_q a{
  17. background:url(index_bg.png) no-repeat;
  18. }
  19. .left{
  20. float:left;
  21. width:670px;
  22. }

  24. .banner{
  25. width:670px;
  26. height:240px;
  27. margin-top:5px;
  28. position:relative;
  29. }
  30. .banner_tab{
  31. height:43px;
  32. position:absolute;
  33. right: 5px;
  34. bottom: 5px;
  35. }
  36. .banner_tab ul {
  37. cursor:pointer;
  38. }
  39. .banner_tab li {
  40. float: left;
  41. list-style-type: none;
  42. text-align: center;
  43. }
  44. .banner_tab a {
  45. width:80px;
  46. height:43px;
  47. display:block;
  48. margin-right:2px;
  49. }
  50. .banner_tab img{
  51. border:1px solid #659ab6;
  52. }
  53. .hidecontent {display:none;}
  54. .on{
  55. background-position:0px -100px;
  56. }
  57. .on img{
  58. border:1px solid #0099ff;
  59. }
  60. .out{}

  62. .clear{ clear:both;}

  64. .content{
  65. margin:0 auto;
  66. background:url(content_bg.png) repeat-x top;
  67. border-left:1px solid #bad1de;
  68. border-right:1px solid #bad1de;
  69. }

  71. .tab_img{
  72. width:72px;
  73. height:35px;
  74. margin-top:3px;
  75. border:1px solid #fff;
  76. }

  78. .help{
  79. margin-top:10px;
  80. width:670px;
  81. }
  82. .help .div_p{
  83. padding:10px 5px 15px;
  84. >padding:13px 5px 15px;
  85. }
  86. .help .help_ul{
  87. padding:10px 0px 30px 30px;
  88. >padding-top:1px;
  89. }

  91. .help_ul li{
  92. float:left;
  93. width:310px;
  94. height:28px;
  95. line-height:28px;
  96. position:relative;
  97. }
  98. .help_ul .img_hot{
  99. top:8px;
  100. position:absolute;
  101. }

  103. a.k:link, a.k:visited {
  104. color:#228ada;
  105. text-decoration:none;
  106. }
  107. a.k:active,a.k:hover {
  108. color:#000;
  109. text-decoration:underline;
  110. }
  111. .right{
  112. width:230px;
  113. float:right;
  114. }




  119. </style>
  120. <script type="text/javascript">
  121. function setTab(/*string*/name,/*int*/ itemCnt,/*int*/ curItem, /**/classHide, /**/classShow)
  122. {
  123. for(i=1;i<=itemCnt;i++)
  124. {
  125. eval("document.getElementById('tab_" + name + "_" + i + "').className='" + classHide + "'");
  126. }
  127. eval("document.getElementById('tab_" + name + "_" + curItem + "').className='" + classShow + "'");

  129. for(i=1;i<=itemCnt;i++)
  130. {
  131. eval("ele_hide = document.getElementById('con_" + name + "_" + i +"')");
  132. if(ele_hide) ele_hide.style.display = "none";
  133. }
  134. eval("ele_play = document.getElementById('con_" + name + "_" + curItem + "')");
  135. if(ele_play) ele_play.style.display = "block";
  136. }
  137. </script>

  139. </head>

  141. <body>
  142. <div class="banner" id="banner">
  143. <div class="banner_tab clearfix">
  144. <ul>
  145. <li id="tab_tophome_1" class="on"><a href="/other/phone_flow.shtml" target="_blank" onmousemove="startIndex=1;setTab('tophome',4,1,'out','on');" onclick="javascript:pgvSendClick({hottag:'KF.SERVICE.INDEX.PHONE_2'});"><img src="ad_1.jpg" class="tab_img" alt="电话按键指引"/></a></li>
  146. <li id="tab_tophome_2" class="out"><a href="/self/self_help.shtml" target="_blank" onmousemove="startIndex=2;setTab('tophome',4,2,'out','on');" onclick="javascript:pgvSendClick({hottag:'KF.SERVICE.INDEX.SELF_2'});"><img src="ad_3.jpg" class="tab_img" alt="自助服务"/></a></li>
  147. <li id="tab_tophome_3" class="out"><a href="showSurvey?survey_id=567" target="_blank" onmousemove="startIndex=3;setTab('tophome',4,3,'out','on');" onclick="javascript:pgvSendClick({hottag:'KF.SERVICE.INDEX.STUDY_2'});"><img src="ad_2.jpg" class="tab_img" alt="腾讯学堂"/></a></li>
  148. <li id="tab_tophome_4" class="out"><a href="c1090519040.htm" target="_blank" onmousemove="startIndex=4;setTab('tophome',4,4,'out','on');" onclick="javascript:pgvSendClick({hottag:'KF.SERVICE.INDEX.SOSO_2'});"><img src="ad_4.jpg" class="tab_img" alt="问问专区"/></a></li>
  149. </ul>
  150. </div>
  151. <div>
  152. <div id="con_tophome_1"><a href="/other/phone_flow.shtml" target="_blank" onclick="javascript:pgvSendClick({hottag:'KF.SERVICE.INDEX.PHONE_1'});"><img src="ad_1.jpg" alt="电话按键指引"/></a></div>
  153. <div id="con_tophome_2" class="hidecontent"><a href="/self/self_help.shtml" target="_blank" onclick="javascript:pgvSendClick({hottag:'KF.SERVICE.INDEX.SELF_1'});"><img src="ad_3.jpg" alt="自助服务" /></a></div>
  154. <div id="con_tophome_3" class="hidecontent"><a href="showSurvey?survey_id=567" target="_blank" onclick="javascript:pgvSendClick({hottag:'KF.SERVICE.INDEX.STUDY_1'});"><img src="ad_2.jpg" alt="腾讯学堂" /></a></div>
  155. <div id="con_tophome_4" class="hidecontent"><a href="c1090519040.htm" target="_blank" onclick="javascript:pgvSendClick({hottag:'KF.SERVICE.INDEX.SOSO_1'});"><img src="ad_4.jpg" alt="问问专区"/></a></div>
  156. <div class="clear"></div>
  157. </div>
  158. </div>
  159. <script type="text/javascript">
  160. var pause = false;
  161. var con_num = 4;
  162. var startIndex = 1;
  163. function setLoop(){
  164. try{
  165. var oScroll = document.getElementById('banner');
  166. oScroll.noWrap = true;
  167. oScroll.onmouseover = function(e){pause = true;};
  168. oScroll.onmouseout = function(e){pause = false;};
  169. setInterval('scrollTopHome()', 3000);
  170. }catch(e){alert(e.toString());}
  171. }
  172. function scrollTopHome(){
  173. if(pause) return;
  174. startIndex += 1;
  175. if(startIndex > con_num){startIndex = 1;}
  176. setTab('tophome',4,startIndex,'out','on');
  177. }
  178. setLoop();
  179. </script>
  180. </body>
  181. </html>
复制代码

回复

使用道具 举报

非一般感觉 发表于 2011-9-30 11:00:55 | 显示全部楼层
   不错  先看看了啊
回复

使用道具 举报

Iisluo.com 发表于 2011-9-30 11:33:58 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
回复

使用道具 举报

wsyp 发表于 2011-9-30 11:47:09 | 显示全部楼层
这个不错。学习收集了！
回复

使用道具 举报

下一页 »
123下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2024-11-18 06:22 , Processed in 0.030064 second(s), 3 queries , Gzip On, Redis On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表