一个鼠标滑过的列表效果

2024-09-05 12:18:13

字体：大中小

来源：转载

供稿：网友

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

<!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</head><body><div id="box">    <div class="internal">        <h2><strong>今日新闻</strong>more</h2>        <ul>            <li>                <p></p>                <div>                     六旬老太偷电脑                     <span>2011-09-10</span>                </div>            </li>            <li>                <p></p>                <div>                     自制古董骗贷10亿                     <span>2011-09-10</span>                </div>            </li>            <li>                <p></p>                <div>                    赵薇携老公女儿游台北                    <span>2011-09-10</span>                </div>            </li>            <li>                <p></p>                <div>                    比伯戏耍纳什                    <span>2011-09-10</span>                </div>            </li>            <li>                <p></p>                <div>                    1000段YouTube最火视频                    <span>2011-09-10</span>                </div>            </li>            <li>                <p></p>                <div>                     卡宾创意视频征集大赛                     <span>2011-09-10</span>                </div>            </li>            <li>                <p></p>                <div>                     单身熟女闺房大揭秘                      <span>2011-09-10</span>                </div>            </li>        </ul>    </div></div></body></html>

上一篇：点击获取页面高度，jS特效

下一篇：IE6/7/8/火狐/谷歌浏览器，右侧滚动条差异

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注