关于鼠标划过,改变栏目的内容的分析

原创 2007年09月28日 11:20:00

 网页上经常出现鼠标经过,栏目的内容就改变了,现在网页里很流行这个,尤其是大的网站。先看下网易的。

function showDiv(obj,num,len)
{
 
for(var id = 1;id<=len;id++)
 
{
  var ss
=obj+id;
  
if(id==num){
  
try{document.getElementById(ss).style.display="block"}catch(e){};
  }
else{
  
try{document.getElementById(ss).style.display="none"}catch(e){};
  }

 }
  
}
 

这个方法就可以实现这个功能。下面分析一下。

obj是id号,就是可以多用途的用,很有扩展性哦,(*^__^*) 嘻嘻……。

num是列的id号,就是同一个栏目有不同的几组数据,就是可以切换的号码。

len就是多少组数据要更换。

看用法:

<div  id="dayphb1" style="display:block;">
<div class="title tbg1">
<h3><href="http://news.163.com/rank/?l=9" onmouseover="javascript:showDiv('dayphb',1,4);">点击</a></h3><h4><href="http://news.163.com/rank/?l=2" onmouseover="javascript:showDiv('dayphb',2,4);">评论</a></h4><h5><href="http://pic.news.163.com/dece.html" onmouseover="javascript:showDiv('dayphb',3,4);">图片</a></h5><h6><href="http://news.163.com/special/000129LA/news_wajue.html" onmouseover="javascript:showDiv('dayphb',4,4);">顶新闻</a></h6>
</div>
<div class="blank9 clear"></div>
<div class="content">
<ul>
<li><img src="http://cimg2.163.com/cnews/img07/no1.gif" width="17" height="11" /> <href="http://news.163.com/07/0928/04/3PF0LEU400011229.html">河北5旬男子将一家5口残杀后猥亵女孩</a></li>
<li><img src="http://cimg2.163.com/cnews/img07/no2.gif" width="17" height="11" /> <href="http://news.163.com/07/0928/04/3PEVN5KQ0001121M.html">英国85岁老太含冤被囚70年震惊全国( </a></li>
<li><img src="http://cimg2.163.com/cnews/img07/no3.gif" width="17" height="11" /> <href="http://news.163.com/07/0928/01/3PEL7HO800011229.html">重庆小伙骑车进藏 逃过6条藏獒千米狂</a></li>
<li><img src="http://cimg2.163.com/cnews/img07/no4.gif" width="17" height="11" /> <href="http://news.163.com/07/0928/05/3PF415VB00011229.html">剧组公园拍枪战场面 吓晕旁边女游客(</a></li>
<li><img src="http://cimg2.163.com/cnews/img07/no5.gif" width="17" height="11" /> <href="http://news.163.com/07/0928/05/3PF11VB50001124J.html">北大被评为最有影响力大学 清华排名 </a></li>
<li><img src="http://cimg2.163.com/cnews/img07/no6.gif" width="17" height="11" /> <href="http://news.163.com/07/0927/15/3PDIQ8S40001121M.html">布什安理会开会时再次向赖斯传纸条( </a></li>
<li><img src="http://cimg2.163.com/cnews/img07/no7.gif" width="17" height="11" /> <href="http://news.163.com/07/0928/02/3PEPJFE00001121M.html">南极融冰可能释放远古超级病毒(图)</a></li>
<li><img src="http://cimg2.163.com/cnews/img07/no8.gif" width="17" height="11" /> <href="http://news.163.com/07/0928/00/3PEG4T1T0001124J.html">购买第二套住房贷款首付款比例不得低</a></li>
<li><img src="http://cimg2.163.com/cnews/img07/no9.gif" width="17" height="11" /> <href="http://news.163.com/07/0928/02/3PEOPFDT0001121M.html">美国会通过决议建议伊拉克一分为三</a></li>
<li><img src="http://cimg2.163.com/cnews/img07/no10.gif" width="17" height="11" /> <href="http://news.163.com/07/0927/08/3PCRH4360001125G.html">四川民警夜间持枪执勤 抓获涉嫌卖淫 </a></li>
</ul>
</div>
</div>

紧接着就是

<div  id="dayphb2" style="display:none;">
<div class="title tbg2">
<h3><href="http://news.163.com/rank/" onmouseover="javascript:showDiv('dayphb',1,4);">点击</a></h3><h4><href="http://news.163.com/rank/?l=2" onmouseover="javascript:showDiv('dayphb',2,4);">评论</a></h4><h5><href="http://pic.news.163.com/dece.html" onmouseover="javascript:showDiv('dayphb',3,4);">图片</a></h5><h6><href="http://news.163.com/special/000129LA/news_wajue.html" onmouseover="javascript:showDiv('dayphb',4,4);">顶新闻</a></h6>
</div>
<div class="blank9 clear"></div>
<div class="content">
<ul>
<li><img src="http://cimg2.163.com/cnews/img07/no1.gif" width="17" height="11" /> <href="http://news.163.com/07/0927/13/3PDB65GM0001121M.html">透明国际将缅甸列为全球最腐败国家</a></li>
<li><img src="http://cimg2.163.com/cnews/img07/no2.gif" width="17" height="11" /> <href="http://news.163.com/07/0927/15/3PDIQ8S40001121M.html">布什安理会开会时再次向赖斯传纸条(</a></li>
<li><img src="http://cimg2.163.com/cnews/img07/no3.gif" width="17" height="11" /> <href="http://news.163.com/07/0927/14/3PDEOVJL0001121M.html">英国4岁女孩放飞气球飘到中国广州(</a></li>
<li><img src="http://cimg2.163.com/cnews/img07/no4.gif" width="17" height="11" /> <href="http://news.163.com/07/0927/11/3PD3FD3Q00011229.html">台湾母子3人因贫病交迫中秋当晚烧炭</a></li>
<li><img src="http://cimg2.163.com/cnews/img07/no5.gif" width="17" height="11" /> <href="http://news.163.com/07/0927/10/3PD0DJDF00011229.html">12岁女孩裸死学校公厕粪池 疑遭奸</a></li>
<li><img src="http://cimg2.163.com/cnews/img07/no6.gif" width="17" height="11" /> <href="http://news.163.com/07/0928/02/3PEOPFDT0001121M.html">美国会通过决议建议伊拉克一分为三</a></li>
<li><img src="http://cimg2.163.com/cnews/img07/no7.gif" width="17" height="11" /> <href="http://news.163.com/07/0927/16/3PDME54V0001124J.html">广东阳春境内火车撞汽车 火车司机死</a></li>
<li><img src="http://cimg2.163.com/cnews/img07/no8.gif" width="17" height="11" /> <href="http://news.163.com/07/0928/04/3PF0LEU400011229.html">河北5旬男子将一家5口残杀后猥亵女</a></li>
<li><img src="http://cimg2.163.com/cnews/img07/no9.gif" width="17" height="11" /> <href="http://news.163.com/07/0927/16/3PDL7KF600011229.html">香港美女抗癌坚强乐观 60万人次看</a></li>
<li><img src="http://cimg2.163.com/cnews/img07/no10.gif" width="17" height="11" /> <href="http://news.163.com/07/0928/05/3PF11VB50001124J.html">北大被评为最有影响力大学 清华排名</a></li>
</ul>
</div>
</div>

<div  id="dayphb3" style="display:none;">
<div class="title tbg3">
<h3><href="http://news.163.com/rank/" onmouseover="javascript:showDiv('dayphb',1,4);">点击</a></h3><h4><href="http://news.163.com/rank/?l=2" onmouseover="javascript:showDiv('dayphb',2,4);">评论</a></h4><h5><href="http://pic.news.163.com/dece.html" onmouseover="javascript:showDiv('dayphb',3,4);">图片</a></h5><h6><href="http://news.163.com/special/000129LA/news_wajue.html" onmouseover="javascript:showDiv('dayphb',4,4);">顶新闻</a></h6>
</div>
<div class="blank9 clear"></div>



<div class="content">
<ul>
<li><img src="http://cimg2.163.com/cnews/img07/no1.gif" width="17" height="11"/><href=http://news.163.com/photo/00AP0001/2584.html> 开心字典海选全国高校37名校花</a></li><li><img src="http://cimg2.163.com/cnews/img07/no2.gif" width="17" height="11"/><href=http://news.163.com/photo/05UR0001/2300.html> 校花10强选手</a></li><li><img src="http://cimg2.163.com/cnews/img07/no3.gif" width="17" height="11"/><href=http://news.163.com/photo/00AP0001/2993.html> 各地豪华办公楼</a></li><li><img src="http://cimg2.163.com/cnews/img07/no4.gif" width="17" height="11"/><href=http://news.163.com/photo/00AP0001/2939.html> 西方人眼中的中国十大美女</a></li><li><img src="http://cimg2.163.com/cnews/img07/no5.gif" width="17" height="11"/><href=http://news.163.com/photo/04FH0001/3430.html> 七个版本的小龙女大比拼</a></li><li><img src="http://cimg2.163.com/cnews/img07/no6.gif" width="17" height="11"/><href=http://news.163.com/photo/00AP0001/3526.html> 山东美女明星</a></li><li><img src="http://cimg2.163.com/cnews/img07/no7.gif" width="17" height="11"/><href=http://news.163.com/photo/06C10001/2738.html> BBS上流传的香港各学校校花</a></li><li><img src="http://cimg2.163.com/cnews/img07/no8.gif" width="17" height="11"/><href=http://news.163.com/photo/00AO0001/3507.html> 全球最贵10大收藏品</a></li><li><img src="http://cimg2.163.com/cnews/img07/no9.gif" width="17" height="11"/><href=http://news.163.com/photo/04FL0001/3341.html> 日本传说中的20个女鬼</a></li><li><img src="http://cimg2.163.com/cnews/img07/no10.gif" width="17" height="11"/><href=http://news.163.com/photo/00AN0001/3437.html> 新疆举行消防演习</a></li>
</ul></div>

    
    

</div>

请注意,当想让哪个首先展示的话,style="display:block;" 就可以了。

继续分析,还有一种方法。

 var data_ids= new Array();                     
data_ids[
0]="01";
data_ids[
1]="02";
data_ids[
2]="03";
data_ids[
3]="04";
data_ids[
4]="05";

function setclass(id)
{
    
for(var i=0;i<data_ids.length;i++)
    
{
        document.getElementById(
"li"+data_ids[i]).className = "";
    }

    document.getElementById(
"li"+id).className="on";
}


页面传递
 <ul class="book_r_b4_button" id="menu_class">
                            
<li class="on" id="li01"><href="01.01.html" onmouseover="javascript:setclass(01);" >
                                小说
</a></li>
                            
<li id="li02"><href="01.02.html" onmouseover="javascript:setclass(02);" >
                                少儿
</a></li>
                            
<li id="li03"><href="01.03.html" onmouseover="javascript:setclass(03);">
                                管理
</a></li>
                            
<li id="li04"><href="01.04.html" onmouseover="javascript:setclass(04);">
                                文学
</a></li>
                            
<li id="li05"><href="01.05.html" onmouseover="javascript:setclass(05);">
                                外语
</a></li>
                        
</ul>


鼠标划过可以改变class值来达到这个效果setclass_name这个函数里加入显示的内容的代码,就可以实现。不过网易的实现起来比较直接了当,没有绕弯子。

下面进一步说一下,鼠标划过的另外一个效果

就是刚开始显示都是题目,但是鼠标划过可以看到内容,这个也挺流行,学习下。

var currId1 = 'NewProduct1';
function changTop1(newId)
{
    
if( currId1!=null)
                    
{
      document.getElementById(currId1).style.display
="none";
      document.getElementById(currId1
+'_t').style.display="block";
    }
    
    document.getElementById(newId).style.display
="block";
    document.getElementById(newId
+'_t').style.display="none";
    currId1 
= newId;
}

<div id="NewProduct1_t" onmouseover="javascript:changTop1('NewProduct1);">
                                    
<h3 class="second">
                                        题目1
                                    
</h3>
                                
</div>  
                                
<div class="book_r_hot"  id="NewProduct1" style="display:none">
                                 
<div class="first">
                               内容1
                            
</div>
                        
</div>
<div id="NewProduct2_t" onmouseover="javascript:changTop1('NewProduct2');">
                                    
<h3 class="second">
                                        题目2
                                    
</h3>
                                
</div>  
                                
<div class="book_r_hot"  id="NewProduct2" style="display:none">
                                 
<div class="first">
                               内容2
                            
</div>
                        
</div>


大家都想鼠标划过要产生炫炫的感觉哦,多多学习才是,呵呵。Prosurfer原创哦,欢迎转载,大家共同进步。

http://blog.csdn.net/prosurfer

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jquery鼠标划过内容背景滑动切换

例1:左右效果 Html: /* servicesBox */ .servicesBox{ width:1000px;height:270px;margin:0 a...
  • cddcj
  • cddcj
  • 2016-11-23 15:39
  • 437

css3最新鼠标划过样式

列表鼠标划过后变色,选中后更改颜色

Table Stripes and Row Locking body {background:#fff;} h1 {font:bold 20px/26px Arial;} p,...

鼠标划过,放大镜

  • 2016-05-25 16:22
  • 411KB
  • 下载

向上逐行滚动JS代码文本特效,鼠标划过暂停

向上逐行滚动JS代码,鼠标划过暂停, a中的display:block;/*这个属性是必须的*/,这个文本特效JS代码很少很简洁。 这个文本特效js代码兼容IE6/' target='_...
  • aerchi
  • aerchi
  • 2012-01-12 16:49
  • 2678

javascript实现鼠标划过出现舞动的图片

javascript实现鼠标划过出现舞动的图片 var st = 0; function f1() { st++; switch(st) { case  1: document....
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)