原生jQuery背景动画效果
2015-02-13 23:40:49 访问(1893) 赞(0) 踩(0)
-
<!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>原生jQuery背景动画效果</title>
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:0;}
body{ background:#fff;}
#slowx{ width:150px; height:auto; margin:200px auto; background:#F2F2F2; padding:20px;}
#slowx ul li{ height:42px; line-height:42px; padding-left:50px; text-align:left; margin:5px; position:relative; overflow:hidden;}
#slowx ul li span{ width:42px; height:84px; display:block; position:absolute; left:0; top:0;}
#slowx ul li a{ text-decoration:underline; color:#656565; font-size:12px;}
#slowx ul li:hover a{ text-decoration:none; color:#BC0000;}
</style>
</head>
<body>
<!-- 代码部分begin -->
<div id="slowx">
<ul>
<li><span><img src="http://web.slowx.net/Res/Img/2015/201502/p2/img1.png" /></span><a href="#">联系我们</a></li>
<li><span><img src="http://web.slowx.net/Res/Img/2015/201502/p2/img2.png" /></span><a href="#">智能地址</a></li>
<li><span><img src="http://web.slowx.net/Res/Img/2015/201502/p2/img3.png" /></span><a href="#">广场</a></li>
</ul>
</div>
<script type="text/javascript" language="javascript" src="<%=jQuery%>"></script>
<script type="text/javascript" language="javascript">
$(function(){
$('#slowx li').hover(function(){
$('span',this).stop().animate({'top':'-42px'});
},function(){
$('span',this).stop().animate({'top':'0px'});
});
});
</script>
<!-- 代码部分end -->
</body>
</html>
参考来源：http://www.lanrenzhijia.com/jquery/background_fanzhuan1222.html
上一条：
下一条：
版权声明：
如果本站的资源使用了您的作品，请联系我们，我们会及时的注明
本站所有的资源均为免费自由下载，目的是让大家学习和交流
由于收集过程中几经转载，所以很多作品的原作者不详
如果您不愿在本站展示，请联系我们，我们会及时删除
相关评论
发表评论