js和jquery响应鼠标渐显渐隐及透明度的几种实现方式
发布于：2015-08-31 浏览：
许多朋友想实现DIV或导航条中栏目的渐隐渐现，但网上的相关教程不多，这里是武汉微白设计在网站建设过程中实际测试和使用过的效果，有需要的朋友可以参考，其中部分代码参考了其它的技术文章，在此对原作者表示感谢！
实例一：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>响应鼠标渐显渐隐的DIV</title>
<script>
window.onload = function(){
var sp = document.getElementById("pic").getElementsByTagName("div");
function e(a,f){
for(var i =0,j=a.length;i<j;i++){
f.call(a[i],i);
}
}
function ap(o,n){
if(document.all){
o.style.filter = "alpha(opacity=" + n + ")"
}else{
o.style.opacity = n/100;
}
}
e(sp,function(){
var n=20,o=this;//设置初始透明度
ap(this,n);
this.onmouseover = function(){
if(!!o.s){clearInterval(this.s);this.s=null}
o.s = setInterval(function(){
n+=4;
if(n>100){clearInterval(o.s);o.s=null}
ap(o,n);
},30)
}
this.onmouseout = function(){
if(!!o.s){clearInterval(o.s);o.s=null}
o.s = setInterval(function(){
n-=4;
if(n<50){clearInterval(o.s);o.s=null}//设置结束透明度
ap(o,n);
},30)
}
})
}
</script>
</head>
<body>
<style type="text/css">
.tips,.tips1,.tips2{width:100px;height:100px;display:block;opacity:1;filter:alpha(opacity=100);border:1px solid #000;background:#0ff;}
</style>
<div id="pic">
<div class="tips">我是谁？</div>
<div class="tips1">匆匆时光！</div>
<div class="tips2">我在等你……</div>
</div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------
实例二：以下为应用后的改进版，JS加载完后直接运行，对高亮导航加入了判断等，CSS样式可自己加：
<script type="text/javascript">
function nav_alpha(){
var sp = document.getElementById("nav").getElementsByTagName("li");//找到ID为nav的容器中的每个li标签
function e(a,f){
for(var i =0,j=a.length;i<j;i++){
f.call(a[i],i);
}
}
function ap(o,n){
if(document.all){
o.style.filter = "alpha(opacity=" + n + ")"
}else{
o.style.opacity = n/100;
}
}
e(sp,function(){
if(this.className == 'li_a'){var n=90,o=this;//判断是否是高亮，是则不透明
}else{
var n=50,o=this;}//设置初始透明度
ap(this,n);
this.onmouseover = function(){
if(!!o.s){clearInterval(this.s);this.s=null}
o.s = setInterval(function(){
n+=4;
if(n>100){clearInterval(o.s);o.s=null}
ap(o,n);
},30)
}
this.onmouseout = function(){
if(!!o.s){clearInterval(o.s);o.s=null}
o.s = setInterval(function(){
n-=4;
if(o.className == 'li_a'){if(n<90){clearInterval(o.s);o.s=null}
}else{
if(n<50){clearInterval(o.s);o.s=null}}//设置结束透明度
ap(o,n);
},30)
}
})
}
nav_alpha();//加载完后直接运行
<style type="text/css">
li{opacity:1;filter:alpha(opacity=100);}
</style>
<div id="nav">
<ul class="menu">
<li class="li_a"><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
-----------------------------------------------------------------------------------------------------------------------
实例三：使用Jquery方法实现的,对两张图片进行的渐隐操作，使用时注意添加相应图片:
<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script>
<script type="text/javascript">
$(function() {
$('#rssurl,#rsstip').mouseover(function() {
if (window.willhide) clearTimeout(window.willhide);
$('#rsstip').fadeIn(500)
});
$('#rssurl,#rsstip').mouseout(function() {
window.willhide = setTimeout(function() {
$('#rsstip').fadeOut(500)
},
750)
});
});
</script>
<style>
#rsstip{display:none;}
</style>
</head>
<body>
<div id="rss">
<a id="rssurl" href=http://www.weeeb.net target="_blank">111</a>
<div id="rsstip">
请点击右上角的 RSS 按钮并选择适合您的订阅方式～
</div>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------
实例四：对实例三的方法进行改进后用JQ实现的导航栏目的渐隐效果：
<!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=utf-8" />
<title>导航渐隐</title>
</head>
<body>
<div id="nav">
<ul class="menu">
<li><a class="li_a" title="首页" href=www.weeeb.net>首页</a></li>
<li><a title="服务项目" href="#">服务项目</a></li>
<li><a title="客户案例" href="#">客户案例</a></li>
<li><a title="最新动态" href="#">最新动态</a></li>
<li><a title="关于我们" href="#">关于我们</a></li>
<li><a title="联系我们" href="#">联系我们</a></li>
</ul>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$("#nav ul li a").not(".li_a").css('opacity', 0.5);//初始透明度0.5，除了类名为li_a的
$("#nav ul li a").parent().hover(
function(){
$("a",this).stop().animate({opacity: '1'},1000);
},
function(){
$("a",this).stop().animate({opacity: '0.5'},1000);
});
</script>
</body>
</html>