<!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>

用jq实现鼠标移入按钮背景渐变其他的背景效果的更多相关文章

  1. js jq 实现鼠标经过div背景以进度条方式 变宽，鼠标离开变小，同时文字颜色和原来不一样

    <!DOCTYPE html> <html> <head> <title></title> <script typet="t ...

  2. JS鼠标移入，移出事件

    该事件的效果就像百度首页的设置选项,当鼠标移入,移出时的效果,废话不多说了,直接上码. <!DOCTYPE html><html lang="en">< ...

  3. android Button 切换背景，实现动态按钮和按钮颜色渐变

        android Button 切换背景,实现动态按钮和按钮颜色渐变 一.添加android 背景筛选器selector实现按钮背景改变     1.右键单击项目->new->Oth ...

  4. 设置QPushbutton按钮背景、鼠标滑过状态、鼠标点击后状态用法

    1.1当要设置QPushbutton按钮背景,字体颜色,鼠标滑过状态,鼠标单击后状态时,可以用QSS来设置,具体的代码如下:     QPushButton *allSelect = new QPus ...

  5. jq鼠标移入和移出事件

    前几天帮朋友做了一个单页面,其中有个效果就是鼠标移动到头像上变换头像样式,当鼠标移出时恢复头像样式.当时没多想,脑子就蹦出了mouseover,mouseout两个方法. 但是在编写页面的过程中,无论 ...

  6. 当鼠标移入div上时，div的背景色在4s之内渐变为灰色，同时在5s之内顺时针旋转45度，且尺寸缩小一半；当鼠标移走时，再渐变恢复初始样式

    <style> #d1{ width:200px; height:200px; border:1px solid #000; transition:background 4s linear ...

  7. 巧用HTML5给按钮背景设计不同的动画

      如何巧用HTML5设计按钮背景不同动画特效,在该特效中,当鼠标滑过按钮时,使用CSS3   animation 来动画   background-size  和  background-posit ...

  8. Qt 为QPushButton、QLabel添加鼠标移入移出事件

    QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...

  9. # li鼠标移入移出，点击，变背景色，变checkbox选中状态

    移入移出背景色改变和点击背景色改变,两者是否相互覆盖? 若移出背景色恢复,影响点击事件的背景色改变,会产生效果为: 点击时,背景色改变,并且checkbox选中 鼠标移开后,checkbox仍选中,但 ...

随机推荐

  1. Windows 2003 远程桌面

  2. ListView局部更新（非notifyDataSetChanged）

    package com.example.test; import java.util.ArrayList; import java.util.List; import android.app.Acti ...

  3. KVC之-(id)valueForKey:(NSString *)key的实现原理与验证

    KVC之-(id)valueForKey:(NSString *)key的实现原理与验证 2.-(id)valueForKey:(NSString *)key的实现原理与验证; #功能:使用一个字符串 ...

  4. httpclient 优化

    (1)采用单例模式(重用HttpClient实例)    对于一个通信单元甚至是整个应用程序,Apache强烈推荐只使用一个HttpClient的实例.例如: private static HttpC ...

  5. 做过的自定义 View

    做过的自定义 View android view custom 音频条状图 需求 详细设计 具体实现 音频条状图 需求 音频图 最终效果类似于音频图中的条状图 只是效果模拟,并不监听真实的音频 条的宽 ...

  6. JQuery 中的Show方法

    对css中 display:none的对象有用,对visibility:hidden的对象无效.

  7. git设置忽略文件和目录

    1.登录gitbash命令端进入本地git库目录 Administrator@PC201601200946 MINGW32 /d/gitrespository/crmweb (master) 2.创建 ...

  8. PAT004 Root of AVL Tree

    题目: An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the two child ...

  9. MYSQL数据库连接

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  10. 【BZOJ】3392: [Usaco2005 Feb]Part Acquisition 交易（spfa）

    http://www.lydsy.com/JudgeOnline/problem.php?id=3392 同1674 #include <cstdio> #include <cstr ...