[经验分享] jQuery响应鼠标的滑动式背景透明的说明效果

[复制链接]

奇

671 主题	1 听众	3247 积分

中级设计师

Rank: 5 Rank: 5

纳金币: 324742
精华: 0

电梯直达

楼主

发表于 2011-12-30 19:15:04 |只看该作者 |倒序浏览

这是一个非常棒的响应鼠标的、滑动式背景变色并且透明的文字说明效果，当然！肯定的！这里引用了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