1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>用jq实现鼠标移入按钮背景渐变其他的背景效果</title>
6 </head>
7 <style>
8 *{ margin:0; padding:0;}
9 .btn{
10 width: 160px;
11 height: 41px;
12 background: url(recommend_read_more.png) no-repeat; /*背景图片要竖直拼起来*/
13 display:block;
14 position: relative;/*一定要设置相对定位*/
15 }
16 .move_fade {
17 position: absolute;/*鼠标移入显示另外一个标签的类名设置样式*/
18 width: 100%;
19 height: 100%;
20 opacity: 0;
21 filter: alpha(opacity=0);
22 top: 0px;
23 left: 0px;
24 }
25 </style>
26 <body>
27
28
29 <a href="case.aspx" class="btn "></a>
30
31
32 <script type="text/javascript" src="js/jquery.js"></script>
33 <script>
34 function moveFade(obj, back_y) {
35
36 $(obj).each(function () {
37 var this_event = null;
38 $(this).html($(this).html() + "<span class='move_fade'></span>");//添加另外一个标签名，并且设置绝对定位
39 var xy;
40 if ($(this).css('background-position') == undefined) { //判断背景的位置，根据当前的背景获取鼠标移入的背景位置
41 xy = [$(this).css('background-position-x'), $(this).css('background-position-y')];
42 }
43 else {
44 xy = $(this).css('background-position').split(' ');
45 }
46
47 $('.move_fade', this).css({
48 'background-image': $(this).css('background-image'),
49 'background-position': xy[0] + ' ' + back_y
50 }).hover(function () {
51 var obj = this;
52 function go() {
53
54 var v = $(obj).css('opacity') - 0 + 0.1;
55
56 if (v <= 1 && this_event == 'in') {
57 if (v > 0.9) {
58 v = 1;
59 }
60 $(obj).css({
61 'opacity': v,
62 'filter': 'alpha(opacity=' + (v * 100) + ')'
63 });
64 setTimeout(go, 50);
65 }
66 }
67 this_event = 'in';
68 go();
69
70 }, function () {
71
72 var obj = this;
73 function go() {
74 var v = $(obj).css('opacity') - 0.1;
75 if (v < 0.1) { v = 0; }
76 if (v >= 0 && this_event == 'out') {
77 $(obj).css({
78 'opacity': v,
79 'filter': 'alpha(opacity=' + (v * 100) + ')'
80 });
81
82 setTimeout(go, 50);
83 }
84 }
85 this_event = 'out';
86 go();
87 });
88 });
89 }
90
91 $(function(){
92 moveFade('.btn', '-41px')//对象，背景位置y轴
93 })
94 </script>
95 </body>
96 </html>
