利用js做鼠标滑过显示离开隐藏的特效

这个特效主要用在网页位置不够用而需要展示的内容又太多时使用。默认显示一个标题,鼠标停留在某个标题上才显示下面的内容。实现的思路很简单,注意判断id,相当是将display设为block反之设为none。

下面来看代码,和其他js特效一样。分为2部分。

1.js部分

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript"> 
	function blurtitle(v){ //鼠标滑过显示内容方法
		for(var i=0;i<3;i++){ //以3个标题举例
			if("title"+i == v.id){ //当前循环的i如果是正确的标题,将内容的display设为block,即显示
				document.getElementById("content"+i).style.display = "block";
			}else{ //当前循环的i是其他标题,将内容设为none,即隐藏
				document.getElementById("content"+i).style.display = "none"; 
			}
		}
	}
</script>

2.html部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<li>
    <span onmouseover="javascript:blurtitle(this)" id="title0" style="color: #191919;"><strong>1.标题一</strong></span>
</li>
<li>
    <span id="content0" style="display:none">内容一</span>
</li>
<li>
    <span onmouseover="javascript:blurtitle(this)" id="title1" style="color: #191919;"><strong>2.标题二</strong></span>
</li>
<li>
    <span id="content1" style="display:none">内容二</span>
</li>
<li>
    <span onmouseover="javascript:blurtitle(this)" id="title2" style="color: #191919;"><strong>3.标题三</strong></span>
</li>
<li>
    <span id="content2" style="display:none">内容三</span>
</li>

这里只做了简单的文字。图片、链接等其他特效组件自行添加。

演示地址:www.apieye.com/plus/97.html

本文固定链接: https://www.apieye.com/97.html | APIEYE

该日志由 Jazzy 于2012年08月22日发表在 JavaScript, web基础 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 利用js做鼠标滑过显示离开隐藏的特效 | APIEYE
关键字: ,

利用js做鼠标滑过显示离开隐藏的特效:等您坐沙发呢!

发表评论

您必须 [ 登录 ] 才能发表留言!