一个鼠标滑过的列表效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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" />
<title>鼠标移入移出效果</title>
<style>
body,ul,h2,p{ margin:0; padding:0; font-family:"微软雅黑"; background:#333;}
li{list-style:none;}
a{text-decoration:none;}
#box{width:270px;padding:10px 10px 20px;overflow:hidden;margin:20px auto 0; border:1px solid #FFF;}
.internal{width:266px;float:left;}
#box h2{height:38px;border-bottom:1px solid #ccc;padding-left:5px;}
#box h2 strong{float:left; line-height:38px;color:#885050;}
#box h2 a{float:right;width:52px;height:14px;font-size:12px;text-indent:20px;color:#fff;line-height:12px;font-weight:normal;margin-top:10px;}
#box li{height:30px;position:relative;border-bottom:1px dashed #ccc;}
#box li div,#box li p{height:30px;position:absolute;top:0;left:0;width:100%;}
#box li p{background:#fff;opacity:0;filter:alpha(opacity=0);}
#box li div a,#box li div span{line-height:30px;font-size:12px;height:30px;}
#box li div a {float:left;padding-left:5px;color:#7F5454;width:185px;overflow:hidden;}
#box li div span{padding-right:10px;float:right;color:#CF9494;}
</style>
<script type="text/javascript">
window.onload=function()
{
	var d=document;
	var oBox=d.getElementById('box');
	var aLi=oBox.getElementsByTagName('li');
	var i=0;
	
	for(i=0;i<aLi.length;i++)
	{
		var oP=aLi[i].getElementsByTagName('p')[0];
		oP.iAlpha=0;
		oP.times=null;
		aLi[i].onmouseover=function()
		{
			oP=this.getElementsByTagName('p')[0];
			oP.times && clearInterval(oP.times);
			oP.style.opacity=1;
			oP.style.filter="alpha(opacity=100)";
			oP.iAlpha=100;
		};
		aLi[i].onmouseout=function()
		{
			startMove(this.getElementsByTagName('p')[0])
		};
	}
};
function startMove(obj)
{
	obj.times && clearInterval(obj.time);
	obj.times=setInterval(function()
	{
		doMove(obj);
	},10);
}
function doMove(obj)
{
	var iSpeed=5;
	if(obj.iAlpha<=iSpeed)
	{
		clearInterval(obj.times);
		obj.iAlpha=0;
		obj.time=null;
	}
	else
	{
		obj.iAlpha-=iSpeed;
	}
	obj.style.filter="alpha(opacity="+obj.iAlpha+")";
	obj.style.opacity=obj.iAlpha/100;
}
</script>
</head>
<body>
<div id="box">
    <div class="internal">
        <h2><strong>今日新闻</strong><a href="javascript:;">more</a></h2>
        <ul>
            <li>
                <p></p>
                <div>
                    <a href="javascript:;"> 六旬老太偷电脑 </a>
                    <span>2011-09-10</span>
                </div>
            </li>
            <li>
                <p></p>
                <div>
                    <a href="javascript:;"> 自制古董骗贷10亿 </a>
                    <span>2011-09-10</span>
                </div>
            </li>
            <li>
                <p></p>
                <div>
                    <a href="javascript:;">赵薇携老公女儿游台北</a>
                    <span>2011-09-10</span>
                </div>
            </li>
            <li>
                <p></p>
                <div>
                    <a href="javascript:;">比伯戏耍纳什</a>
                    <span>2011-09-10</span>
                </div>
            </li>
            <li>
                <p></p>
                <div>
                    <a href="javascript:;">1000段YouTube最火视频</a>
                    <span>2011-09-10</span>
                </div>
            </li>
            <li>
                <p></p>
                <div>
                    <a href="javascript:;"> 卡宾创意视频征集大赛 </a>
                    <span>2011-09-10</span>
                </div>
            </li>
            <li>
                <p></p>
                <div>
                    <a href="javascript:;"> 单身熟女闺房大揭秘&nbsp; </a>
                    <span>2011-09-10</span>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

AخA
 
<!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" />
<title>鼠标移入移出效果</title>
<style>
body,ul,h2,p{ margin:0; padding:0; font-family:"微软雅黑"; background:#333;}
li{list-style:none;}
a{text-decoration:none;}
#box{width:270px;padding:10px 10px 20px;overflow:hidden;margin:20px auto 0; border:1px solid #FFF;}
.internal{width:266px;float:left;}
#box h2{height:38px;border-bottom:1px solid #ccc;padding-left:5px;}
#box h2 strong{float:left; line-height:38px;color:#885050;}
#box h2 a{float:right;width:52px;height:14px;font-size:12px;text-indent:20px;color:#fff;line-height:12px;font-weight:normal;margin-top:10px;}
#box li{height:30px;position:relative;border-bottom:1px dashed #ccc;}

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...​x
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

一个鼠标滑过的列表效果

分类

网站常用

描述

一个鼠标滑过的列表效果，也可认为是鼠标移入移出，会发现有光影效果划过，增加几分动感元素，让你的内容列表更加生动，更吸引用户，获得更好的用户体验。