javascript特效--鼠标移动切换内容

js特效--鼠标移动切换内容

    我们经常在网页上看到，当鼠标移动到一个小标题，同一个内容框的东西发生了变化，我们移动到图片出现图片信息，移动到新闻，就出现新闻消息。感觉很神奇，接触之后才发现，基本功能的实现还是很简单的。
    首先，写一个html页面，并定义两个小标题，就简单的显示‘新闻’和‘图片’
并分别给两个标题定义两个不同的id，这里为了方便定义了一个无序列表
(为了在鼠标放在文字上，有变化，可以加上链接)

 

<ul>
  <a href="#"  > <li id="a" >新闻</li></a>
  <a href="#"  > <li id="b" >图片</li></a>
</ul>

 

    写两个框分别来放新闻内容和图片内容，并分别给他们定义一个id
为了让两个框出现在同一个位置，可以对下面的那个框设置不可见： style="display:none"

display 属性规定元素应该生成的框的类型。none 表示不显示

 

<div width="300" height="300" id="content" style="display:''">今日新闻</div>
<div width="300" height="300" id="content2" style="display:none">图片…</div>

 （框的具体放法，看个人喜好，可以给标签加上不同的样式）

 

   简单的效果的图片实例
  
 鼠标移动到“新闻”和“图片”出现不同的内容，为了实现这一效果才，采用javascript写一个方法change()来控制
为了对鼠标停留的标签对象进行操作，必须知道要对哪个框进行操作，还要得到它的id，所以在方法中传入参数，这里为了方便传入了两个参数，操作的标题框对象和对应的内容框的id

效果：当鼠标移到“图片”上，内容框显示图片
           当鼠标移到“新闻”上，内容框显示的是今日新闻

//给方法传入参数，传入当前的操作对象和对应的大框的id
function change(li,id){
	//获得当前列表标签中的对象
	var div_li= document.getElementById(id);
	//如果当前对象不可见
	if(div_li.style.display=="none"){
		//就改成可见的,
		div_li.style.display="";
		//为了看到明显一点的效果，改变列表项的背景颜色
		li.style.background="#ffff00";
		
		//根据id，改变另一个内容框不可见
		if(id=="content"){
			var div2 = document.getElementById('content2');
			div2.style.display='none';
		}else{
			var div2 = document.getElementById('content');
			div2.style.display='none';
		}	
	}

 

最后，在文字列表中用onmouseover（鼠标滑过事件）去调用change方法即可
(记得给参数传入当前对象，和对应的大框的id) 

<ul>
  <a href="#"  > <li id="a" onmouseover="change(this,'content')">新闻</li></a>
  <a href="#"  > <li id="b" onmouseover="change(this,'content2')">图片</li></a>
</ul>

    就这样简单的切换效果就出来了