<!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. atitit.html5动画特效----打水漂 ducks_and_drakes

    atitit.html5动画特效----打水漂  ducks_and_drakes 1. 原理 1 2. fly jquery插件 1 3. ---------code 2 4. 参考 4 1. 原理 ...

  2. [svc][jk][mem]linux 内存清理/释放命令

    1.清理前内存使用情况 free -m 2.开始清理  echo 1 > /proc/sys/vm/drop_caches 3.清理后内存使用情况 free -m 4.完成! 查看内存条数命令: ...

  3. linux学习笔记30--网络命令ifconfig

    许多windows非常熟悉ipconfig命令行工具,它被用来获取网络接口配置信息并对此进行修改.Linux系统拥有一个类似的工具,也就是ifconfig(interfaces config).通常需 ...

  4. 数据库设计（二）Introduction to Database Design

    原文链接:http://www.datanamic.com/support/lt-dez005-introduction-db-modeling.html Introduction to Databa ...

  5. pycharm-community-3.1.1.tar.gz下载

    国外服务器着实慢, 下载地址:http://yun.baidu.com/share/link?shareid=2521912381&uk=3020189984

  6. google cloud本地环境搭建

    1.SDK下载:https://cloud.google.com/sdk/downloads 2.项目选择与配置:https://cloud.google.com/datalab/docs/quick ...

  7. 第一百五十三节，封装库--JavaScript，表单验证--备注字数验证

    封装库--JavaScript,表单验证--备注字数验证 效果图 html <div id="reg"> <h2 class="tuo"> ...

  8. Android开发人员必须掌握的10 个开发工具+应该深入学习的10个开源应用项目

    一.Android开发人员必须掌握的10 个开发工具 Android SDK 本身包含很多帮助开发人员设计.开发.测试和发布 Android 应用的工具,在本文中,我们将讨论 10 个最常用的工具. ...

  9. 【问题】SUSE已经安装了libsodium，安装zeromq时出现下面的错误？

    1.[问题]SUSE已经安装了libsodium,安装zeromq时出现下面的错误? checking for libsodium... no configure: error: Package re ...

  10. js 判断数组

    这么基础的东西实在不应该再记录了,不过嘛,温故知新~就先从数据类型开始吧 js六大数据类型:number.string.object.Boolean.null.undefined string: 由单 ...