排行榜鼠标感应放大显示效果

2个月前 (03-17 11:15)阅读53回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值4189
  • 级别管理员
  • 主题837
  • 回复2
楼主

名次排行榜鼠标感应特效,当用户的鼠标经过时立即显示详细信息,并放大图片显示效果,实用排行榜js特效。

<!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">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>排行榜鼠标感应放大显示效果_武鸣人</title>
<style type="text/css">
<!--
/*============ Global Style Start ============*/
*{margin:0;padding:0;}
body{background-color:#FFF;color:#000;font:normal 12px "宋体",Georgia,"Times New Roman",Times,serif;}
img{border:0;}
a:link,a:visited{color:#000;text-decoration:none;}a:hover{color:#F65100;text-decoration:underline;}
div,p,span,h1,h2,h3,h4,h5,h6,input,ul,li{text-align:left;}
ul,li{list-style-type:none;}
dt,dd{clear:both;}
p{line-height:150%;}
.cred,a.cred:link,a.cred:visited,a.cred:hover{color:#F00;}
.corange,a.corange:link,a.corange:visited,a.corange:hover{color:#F65100;}
/*clear both*/
.clearfix:after {content: ".";display:block;height:0;clear: both; visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
*+html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clear{ clear: both; font-size:1px; width:1px; height:1px; visibility: hidden;}
/*============ End Global Style ============*/
#sidebar{margin:0 auto;width:265px;height:auto;}
#sidebar h2,#softinfo h2{font-size:14px;height:14px;padding:8px 0 7px 20px;border:1px solid #CDCCCA;letter-spacing:1px;overflow:hidden;}
#sidebar h2 span,#softinfo h2 span{color:#EF2888;}
#sidebar p{margin:0 auto;margin:10px 0 10px 0;width:233px;height:36px;color:#777575;background-color:#F7F7F7;display:block;padding:15px;border:1px solid #C5C4C1;}
.num_one{display:none;height:54px;padding:8px 10px;border:1px solid #E5E5E5;border-width:1px 0px;background-color:#F4F4F4;clear:both}
.num_one span{float:left;margin-right:10px;display:block;width:37px;height:48px;padding-top:4px;background:url(images/bg_num.gif) no-repeat;font-size:32px;color:#000;text-align:center}
.num_one .p50{float:left;margin-right:10px;}
.num_one ul{float:left;padding:0}
.num_one ul li{padding-bottom:2px;white-space:nowrap}
.num_two{cursor:pointer;height:24px;padding:2px 8px 0;clear:both}
.num_two span{display:block;width:17px;line-height:14px;float:left;color:#000;margin:4px 6px 0 0;font-weight:bold;text-align:center}
.num_two a{float:left;margin-top:4px !important;margin-top:6px}
.bg{background-color:#FBFBFB;}
.bg01{background-color:#F7F7F7;}
#copyright{margin:0 auto;margin-top:10px;width:960px;padding:20px 0 20px 0;text-align:center;border-top:3px solid #DDD;}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
// 浏览器兼容的获取节点方法
function $(objectId){
   if(document.getElementById && document.getElementById(objectId)){
      // W3C DOM
      return document.getElementById(objectId);
   }
   else if (document.all && document.all(objectId)){
      // MSIE 4 DOM
      return document.all(objectId);
   }
   else if (document.layers && document.layers[objectId]){
      // NN 4 DOM.. note: this won't find nested layers
      return document.layers[objectId];
   }
   else{
      return false;
   }
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
/* Script Form www.wangyou.com */
var now_show_id =0 ;
function swap(id,bool)
{
    //alert(bool);
    if(id == now_show_id )return true;
    now_show_id =id ;
    for(var i=1;i<=10;i++)
    {
        if(bool)
        {
            if($('b'+i) != null){
                $("b"+i).style.display = bool ? 'none' : 'block';
                $("s"+i).style.display = bool ? 'block' : 'none';
            }
        }
    }
    $("b"+id).style.display = bool ? 'block' : 'none';
    $("s"+id).style.display = bool ? 'none' : 'block';
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
var now_id = 1;
function swap1(id,bool)
{
//alert(bool);
if(id == now_id )return true;
now_id =id ;
for(var i=1;i<=10;i++)
{
if(bool)
{
if($('d'+i) != null){
                $("d"+i).style.display = bool ? 'none' : 'block';
    $("a"+i).style.display = bool ? 'block' : 'none';
            }
}
}
$("d"+id).style.display = bool ? 'block' : 'none';
$("a"+id).style.display = bool ? 'none' : 'block';
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
/* End Script */
//-->
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="sidebar">
<div id="s1" onmouseover="swap('1',1 );" class="num_two bg01"><span>01</span><a href="#" target="_blank">MP3格式--真...</a></div><div id="b1" onMouseOut="swap('1',0 );" class="num_one"><span>01</span><div class="p50"><a href="#" target="_blank"><img src="/img/20240317_www_wuming_ren_3.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="#" target="_blank">MP3格式--真...</a></li><li>歌手:<a href="#" target="_blank">汪宇东</a></li><li><a href="#" class="more02" onclick="top_song_vote(this,570074,-10,-40,'test');return false;" style="cursor:hand;">给我投票 >></a></li></ul></div>
<div id="s2" onmouseover="swap('2',1 );" class="num_two bg"><span>02</span><a href="#" target="_blank">Too youn...</a></div><div id="b2" onMouseOut="swap('2',0 );" class="num_one"><span>02</span><div class="p50"><a href="#" target="_blank"><img src="/img/20240317_www_wuming_ren_3.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="#" target="_blank">Too youn...</a></li><li>歌手:<a href="#" target="_blank">OuttaSk...</a></li><li><a href="#" class="more02" onclick="top_song_vote(this,628771,-10,-40,'test');return false;" style="cursor:hand;">给我投票 >></a></li></ul></div>
<div id="s3" onmouseover="swap('3',1 );" class="num_two bg01"><span>03</span><a href="#" target="_blank">原创→恐怖的一天</a></div><div id="b3" onMouseOut="swap('3',0 );" class="num_one"><span>03</span><div class="p50"><a href="#" target="_blank"><img src="/img/20240317_www_wuming_ren_3.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="#" target="_blank">原创→恐怖的一天</a></li><li>歌手:<a href="#" target="_blank">孙宇</a></li><li><a href="#" class="more02" onclick="top_song_vote(this,17186,-10,-40,'test');return false;" style="cursor:hand;">给我投票 >></a></li></ul></div>
<div id="s4" onmouseover="swap('4',1 );" class="num_two bg"><span>04</span><a href="#" target="_blank">想你的日子</a></div><div id="b4" onMouseOut="swap('4',0 );" class="num_one"><span>04</span><div class="p50"><a href="#" target="_blank"><img src="/img/20240317_www_wuming_ren_3.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="#" target="_blank">想你的日子</a></li><li>歌手:<a href="#" target="_blank">鑫鑫</a></li><li><a href="#" class="more02" onclick="top_song_vote(this,214259,-10,-40,'test');return false;" style="cursor:hand;">给我投票 >></a></li></ul></div>
<div id="s5" onmouseover="swap('5',1 );" class="num_two bg01"><span>05</span><a href="#" target="_blank">咖啡年华</a></div><div id="b5" onMouseOut="swap('5',0 );" class="num_one"><span>05</span><div class="p50"><a href="#" target="_blank"><img src="/img/20240317_www_wuming_ren_3.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="#" target="_blank">咖啡年华</a></li><li>歌手:<a href="#" target="_blank">帅帅_WU</a></li><li><a href="#" class="more02" onclick="top_song_vote(this,787832,-10,-40,'test');return false;" style="cursor:hand;">给我投票 >></a></li></ul></div>
<div id="s6" onmouseover="swap('6',1 );" class="num_two bg"><span>06</span><a href="#" target="_blank">身别的朋友</a></div><div id="b6" onMouseOut="swap('6',0 );" class="num_one"><span>06</span><div class="p50"><a href="#" target="_blank"><img src="/img/20240317_www_wuming_ren_3.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="#" target="_blank">身别的朋友</a></li><li>歌手:<a href="#" target="_blank">随风扬</a></li><li><a href="#" class="more02" onclick="top_song_vote(this,595468,-10,-40,'test');return false;" style="cursor:hand;">给我投票 >></a></li></ul></div>
<div id="s7" onmouseover="swap('7',1 );" class="num_two bg01"><span>07</span><a href="#" target="_blank">《放学》</a></div><div id="b7" onMouseOut="swap('7',0 );" class="num_one"><span>07</span><div class="p50"><a href="#" target="_blank"><img src="/img/20240317_www_wuming_ren_3.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="#" target="_blank">《放学》</a></li><li>歌手:<a href="#" target="_blank">衣冠&琴兽</a></li><li><a href="#" class="more02" onclick="top_song_vote(this,605794,-10,-40,'test');return false;" style="cursor:hand;">给我投票 >></a></li></ul></div>
<div id="s8" onmouseover="swap('8',1 );" class="num_two bg"><span>08</span><a href="#" target="_blank">原创「经典情书」</a></div><div id="b8" onMouseOut="swap('8',0 );" class="num_one"><span>08</span><div class="p50"><a href="#" target="_blank"><img src="/img/20240317_www_wuming_ren_3.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="#" target="_blank">原创「经典情书」</a></li><li>歌手:<a href="#" target="_blank">布拉格のVae</a></li><li><a href="#" class="more02" onclick="top_song_vote(this,609012,-10,-40,'test');return false;" style="cursor:hand;">给我投票 >></a></li></ul></div>
<div id="s9" onmouseover="swap('9',1 );" class="num_two bg01"><span>09</span><a href="#" target="_blank">祝愿(原创)</a></div><div id="b9" onMouseOut="swap('9',0 );" class="num_one"><span>09</span><div class="p50"><a href="#" target="_blank"><img src="/img/20240317_www_wuming_ren_3.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="#" target="_blank">祝愿(原创)</a></li><li>歌手:<a href="#" target="_blank">超人LOVE</a></li><li><a href="#" class="more02" onclick="top_song_vote(this,567174,-10,-40,'test');return false;" style="cursor:hand;">给我投票 >></a></li></ul></div>
<div id="s10" onmouseover="swap('10',1 );" class="num_two bg"><span>10</span><a href="#" target="_blank">《走音格格》</a></div><div id="b10" onMouseOut="swap('10',0 );" class="num_one"><span>10</span><div class="p50"><a href="#" target="_blank"><img src="/img/20240317_www_wuming_ren_3.gif" width="50" height="50" alt="" /></a></div><ul><li><a href="#" target="_blank">《走音格格》</a></li><li>歌手:<a href="#" target="_blank">☆Gina★</a></li><li><a href="#" class="more02" onclick="top_song_vote(this,639976,-10,-40,'test');return false;" style="cursor:hand;">给我投票 >></a></li></ul></div>
</div>
</body>
</html>


0
0
收藏0
回帖

排行榜鼠标感应放大显示效果 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息