<!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>用jq实现鼠标移入按钮背景渐变其他的背景效果</title>
</head>
<style>
*{ margin:0; padding:0;}
.btn{
width: 160px;
height: 41px;
background: url(recommend_read_more.png) no-repeat; /*背景图片要竖直拼起来*/
display:block;
position: relative;/*一定要设置相对定位*/
}
.move_fade {
position: absolute;/*鼠标移入显示另外一个标签的类名设置样式*/
width: 100%;
height: 100%;
opacity: 0;
filter: alpha(opacity=0);
top: 0px;
left: 0px;
}
</style>
<body>
<a href="case.aspx" class="btn "></a>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
function moveFade(obj, back_y) {
$(obj).each(function () {
var this_event = null;
$(this).html($(this).html() + "<span class='move_fade'></span>");//添加另外一个标签名，并且设置绝对定位
var xy;
if ($(this).css('background-position') == undefined) { //判断背景的位置，根据当前的背景获取鼠标移入的背景位置
xy = [$(this).css('background-position-x'), $(this).css('background-position-y')];
}
else {
xy = $(this).css('background-position').split(' ');
}
$('.move_fade', this).css({
'background-image': $(this).css('background-image'),
'background-position': xy[0] + ' ' + back_y
}).hover(function () {
var obj = this;
function go() {
var v = $(obj).css('opacity') - 0 + 0.1;
if (v <= 1 && this_event == 'in') {
if (v > 0.9) {
v = 1;
}
$(obj).css({
'opacity': v,
'filter': 'alpha(opacity=' + (v * 100) + ')'
});
setTimeout(go, 50);
}
}
this_event = 'in';
go();
}, function () {
var obj = this;
function go() {
var v = $(obj).css('opacity') - 0.1;
if (v < 0.1) { v = 0; }
if (v >= 0 && this_event == 'out') {
$(obj).css({
'opacity': v,
'filter': 'alpha(opacity=' + (v * 100) + ')'
});
setTimeout(go, 50);
}
}
this_event = 'out';
go();
});
});
}
$(function(){
moveFade('.btn', '-41px')//对象，背景位置y轴
})
</script>
</body>
</html>