仿QQ切换卡效果

最新推荐文章于 2024-08-13 16:15:07 发布
chuibian5528
最新推荐文章于 2024-08-13 16:15:07 发布
阅读量80
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/1431597/blog/188864
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<style type="text/css">
body{text-align:center}
*{vertical-align: middle; border:none;padding:0;margin:0;}
a{color:#333;text-decoration:none}
a:hover{color:#ff0101;text-decoration:underline;}
.chzk { width: 244px; height: 371px; font-size:12px; line-height:15px;background:#E3E3E3;margin:auto;text-align:left}

.chzk h3 { height: 42px; overflow: hidden; width: 244px; }
.chzk h3 a { float: left; height: 42px; width: 122px; display: block; text-align: center; font: bolder 18px/32px Microsoft Yahei; }
.chzk_rg { color: #666666; background: url(http://mat1.gtimg.com/henan/images/news/2012news/globy.gif) no-repeat 0px -77px; }
.chzk_rg_active {  background: url(http://mat1.gtimg.com/henan/images/news/2012news/globy.gif) no-repeat 0px -35px; color: #2873C2;}
.chzk_lf { background: url(http://mat1.gtimg.com/henan/images/news/2012news/globy.gif) no-repeat 0px -35px; color: #2873C2; }
.chzk_lf_active { color: #666666; background: url(http://mat1.gtimg.com/henan/images/news/2012news/globy.gif) no-repeat 0px -173px; }
.chzk_show_1,.chzk_show_2 { height: 297px; width: 206px; background: #FFF; margin: 8px 10px 18px; padding: 3px 10px 0px; }
.chzk_show_1 h4,.chzk_show_2 h4,.ypd h4,.homeman_show h4,.rdrp h4 { font-size: 12px; line-height: 32px; }
.chzk_show_1 dl,.chzk_show_2 dl,.ypd dl,.homeman_show dl,.rdrp dl { line-height: 20px; }
.chzk_show_1 dl dt,.chzk_show_2 dl dt,.ypd dl dt,.homeman_show dl dt,.rdrp dl dt { float: left; padding-right: 7px; }
.chzk_list,.ypd_list { margin-top: 10px; }

.chzk_list li,.ypd_list li { height: 24px; line-height: 24px; overflow: hidden; width: 100%; background: url(http://mat1.gtimg.com/henan/images/2012index/shouye/global_2.jpg) no-repeat -338px -20px;}

</style>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>

<script type="text/javascript"> 
$(document).ready(function(){
  $(".saypic_lf").hover(function(){$(".picshow_bg").slideToggle("slow");$(".picshow_txt").slideToggle("slow");});$(".saypic_rg").hover(function(){$(".picshow1_bg").slideToggle("slow");$(".picshow1_txt").slideToggle("slow");});$(".pic_rg_show1").hover(function(){$(".pic_rg_show1_bg").slideToggle("slow");$(".pic_rg_show1_txt").slideToggle("slow");});$(".pic_rg_show2").hover(function(){$(".pic_rg_show2_bg").slideToggle("slow");$(".pic_rg_show2_txt").slideToggle("slow");});$(".pic_rg_show3").hover(function(){$(".pic_rg_show3_bg").slideToggle("slow");$(".pic_rg_show3_txt").slideToggle("slow");});

  $(".chzk_rg").hover(function(){$(".chzk h3 a:first").removeClass("chzk_lf");$(".chzk h3 a:last").removeClass("chzk_rg"); $(".chzk h3 a:first").addClass("chzk_lf_active");$(".chzk h3 a:last").addClass("chzk_rg_active");$(".chzk_show_1").css("display","none");$(".chzk_show_2").css("display","block");});
  $(".chzk_lf").hover(function(){$(".chzk h3 a:first").removeClass("chzk_lf_active");$(".chzk h3 a:last").removeClass("chzk_rg_active");$(".chzk h3 a:first").addClass("chzk_lf");$(".chzk h3 a:last").addClass("chzk_rg");$(".chzk_show_1").css("display","block");$(".chzk_show_2").css("display","none");});
  
  $(".num_echo_rg").hover(function(){$(".num_echo h3 a:first").removeClass("num_echo_lf_action");$(".num_echo h3 a:last").removeClass("num_echo_rg"); $(".num_echo h3 a:first").addClass("num_echo_lf");$(".num_echo h3 a:last").addClass("num_echo_rg_action");$(".num_echo_show_1").css("display","none");$(".num_echo_show_2").css("display","block");});
  $(".num_echo_lf_action").hover(function(){$(".num_echo h3 a:first").removeClass("num_echo_lf");$(".num_echo h3 a:last").removeClass("num_echo_rg_action"); $(".num_echo h3 a:first").addClass("num_echo_lf_action");$(".num_echo h3 a:last").addClass("num_echo_rg");$(".num_echo_show_1").css("display","block");$(".num_echo_show_2").css("display","none");});
});
</script> 

<div class="chzk" style="border:gray solid 2px">
                        <h3><a href="http://henan.qq.com/l/news/xwzt/newszt.htm" target="_blank" class="chzk_lf" >专题策划</a>
                        <a href="http://henan.qq.com/l/news/henan_weekly/list20121022145425.htm" target="_blank" class="chzk_rg">豫周刊</a></h3>
<div class="chzk_show_1" style="display:block;">
<h4><a href="http://henan.qq.com/zt2013/xianxie2013/index.htm"target="_blank" >2013世界献血日特别策划</a></h4>
                                     <dl>
                                       <dt><a href="http://henan.qq.com/zt2013/xianxie2013/index.htm" target="_blank"><img src="http://img1.gtimg.com/henan/pics/hv1/240/4/1349/87719985.jpg" width="90" height="60" /></a></dt>
                                     <dd>参与活动可获得拍立得专属留影，还有U盘拿哦…[<a href="http://henan.qq.com/zt2013/xianxie2013/index.htm" target="_blank">详细</a>]</dd>
                                     </dl>


                               <h4><a href="http://henan.qq.com/zt2013/ziranditu/index.htm"target="_blank">郑州汽车自燃地图</a></h4>
                          <dl>
                                     <dt><a href="http://henan.qq.com/zt2013/ziranditu/index.htm"target="_blank"><img src="http://img1.gtimg.com/henan/pics/hv1/124/238/1336/86934214.jpg" alt="郑州汽车自燃地图" width="90" height="60" /></a></dt>
                                  <dd>哪些路段最易自燃？大豫网绘制“郑州防自燃地图”…[<a href="http://henan.qq.com/zt2013/ziranditu/index.htm"target="_blank">详细</a>]</dd>
                          </dl>
                                                                  <ul class="chzk_list">
<li><a href="http://henan.qq.com/zt2013/dtsk/index.htm" target="_blank">低碳送考行动派：城市满格正能量</a></li>

  <li><a href="http://henan.qq.com/zt2013/byqzy/index.htm" target="_blank">今夏首场暴雨入侵中原</a></li>

 <li><a href="http://henan.qq.com/zt2013/dizhen/index.htm" target="_blank">祈福雅安 河南在行动</a></li>

  <li><a href="http://henan.qq.com/zt2013/H7N9/index.htm" target="_blank">河南出现H7N9禽流感病例</a></li>




                                          
   

                                                                       </ul>
                    </div>
<!--[if !IE]>|xGv00|0f586f23aa538e359641880eabf3c7ab<![endif]-->
<div class="chzk_show_2" style="display:none;">
 <h4><a href="http://henan.qq.com/news/henan_weekly/week_10.htm" target="_blank">豫周刊第十期</a></h4>
                                     <dl>
                                       <dt>
<a href="http://henan.qq.com/news/henan_weekly/week_10.htm" target="_blank"><img src="http://img1.gtimg.com/henan/pics/hv1/166/120/1216/79101166.jpg" width="90" height="60" /></a></dt>
                                     <dd> 信阳“桥坚强”由木头支撑，已有七八十年历史&hellip;[<a href="http://henan.qq.com/news/henan_weekly/week_10.htm" target="_blank">详细</a>]</dd>
                                     </dl>

<h4><a href="http://henan.qq.com/news/henan_weekly/week_9.htm" target="_blank">豫周刊第九期</a></h4>
                                     <dl>
                                       <dt><a href="http://henan.qq.com/news/henan_weekly/week_9.htm" target="_blank"><img src="http://img1.gtimg.com/henan/pics/hv1/10/61/1211/78760840.jpg" width="90" height="60" /></a></dt>
                                     <dd>《一九四二》29日上映，唤醒记忆中的苦难往事&hellip;[<a href="http://henan.qq.com/news/henan_weekly/week_9.htm" target="_blank">详细</a>]</dd>

                                     </dl>
                                
                                                                 <ul class="chzk_list">

<li><a href="http://henan.qq.com/news/henan_weekly/week_8.htm" target="_blank">豫周刊第八期：河南降保障房准入门槛</a></li>

<li><a href="http://henan.qq.com/news/henan_weekly/week_7.htm" target="_blank">豫周刊第七期：红薯哥洛阳街头征婚</a></li>

    <li><a href="http://henan.qq.com/news/henan_weekly/week_6.htm" target="_blank">豫周刊第六期：记者节我们在路上</a></li>



<li><a href="http://henan.qq.com/news/henan_weekly/week_5.htm" target="_blank">豫周刊第五期：大豫员工带大家鬼混</a></li>

                                                                                                                                                                                             </ul>
                    </div>      </div>
转载于:https://my.oschina.net/u/1431597/blog/188864
chuibian5528
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿QQ切换卡效果

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><styletype="text/css">body{text-align:center}*{vertical-align:middle...
复制链接

扫一扫