纳金网
标题:
jQuery响应鼠标的滑动式背景透明的说明效果
[打印本页]
作者:
奇
时间:
2011-12-30 19:15
标题:
jQuery响应鼠标的滑动式背景透明的说明效果
这是一个非常棒的响应鼠标的、滑动式背景变色并且透明的文字说明效果，当然！肯定的！这里引用了jQuery插件，兼容性不用说了，IE系列浏览器和火狐、Chrome等都可以实现。
为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。
点击查看：网页特效
运行演示：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>感应鼠标的滑动式图片说明效果_烈火网_Veryhuo.COM</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.box{
position:relative;
width:320px;
height:200px;
overflow:hidden;
background:#0088ff;
}
.note{
position:absolute;
left:0;
top:176px;
width:100%;
height:100%;
filter:progid
XImageTransform.Microsoft.gradient(enabled='***e',startColorstr='#0F000000',endColorstr='#0F000000');
background:rgba(0,0,0,0.7);
text-align:center;
}
.title{
display:block;
width:100%;
height:100%;
font-size:18px;
color:#ffffff;
text-decoration:none;
}
span{
font-size:24px;
color:#CC0000;
}
</style>
<script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".note").hover(function(){
$(this).animate({top:'0'},"900");
},function(){
$(this).animate({top:'176px'},"900");
});
});
</script>
</head>
<body>
<div class="box">
<img src="/uploads/common/images/wall_s8.jpg" alt="烈火网" width="320" height="200">
<div class="note">
<a href="#" class="title"><span>欢迎光临【烈火网】欢迎光临</span><br>烈火网（Veryhuo.COM）提供计算机知识、网站运营、软件应用、设计教程、编程开发与IT资讯等为主要宗旨，同时有源码下载、站长工具、在线手册、免费资源等内容，是国内快捷易懂、内容丰富的站长学习平台。</a>
</div>
</div>
</body>
</html> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
文章源自：烈火网，原文：http://www.veryhuo.com/a/view/43400.html
作者:
奇
时间:
2012-1-6 20:24
可以一试
作者:
晃晃
时间:
2012-1-29 23:18
在关爱中让友情更深，在牵挂中让亲情更暖，在老实中让心底更静，在简单中让生活更美，在问候中让祝福更好，在祝福中让春节更快乐！
作者:
菜刀吻电线
时间:
2012-2-13 23:22
真是不错啊
作者:
tc
时间:
2012-4-16 23:25
我看看就走，你们聊！
作者:
菜刀吻电线
时间:
2012-5-14 23:22
呵呵，很好，方便罗。
作者:
奇
时间:
2012-7-27 23:28
俺是新人,这厢有礼了!
作者:
tc
时间:
2012-8-18 23:49
读铁系缘分，顶铁系友情
欢迎光临 纳金网 (http://rs.narkii.com/club/)
Powered by Discuz! X2.5
XImageTransform.Microsoft.gradient(enabled='***e',startColorstr='#0F000000',endColorstr='#0F000000');