<!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. 我的Android进阶之旅------&gt;Android关于Activity管理的一个简单封装

    怎样管理当前的执行Activity栈,怎样彻底退出程序.本文封装了一个Activity管理类,能够方便随时退出程序. import java.util.Stack; import android.ap ...

  2. FPGA大公司面试笔试数电部分，看看你会多少

    1:什么是同步逻辑和异步逻辑?(汉王) 同步逻辑是时钟之间有固定的因果关系.异步逻辑是各时钟之间没有固定的因果关系. 答案应该与上面问题一致 [补充]:同步时序逻辑电路的特点:各触发器的时钟端全部连接 ...

  3. 从Python的角度来看编码与解码

    导语: Python2和Python3中,因为默认字符集的不同而造成的麻烦,简直是程序员的梦魇!要彻底告别这个麻烦,就需要从本质上来理解编码和解码. 为什么要有编码? 对于不会英文的中国人来说,将英文 ...

  4. 如何改变iframe滚动条的样式？

    如何改变iframe滚动条的样式? web前端开发 css javascript iframe html RayLiao 2014年11月19日提问 · 2014年11月20日更新 关注 关注 收藏 ...

  5. CSU 1335: 高桥和低桥 （二分查找，树状数组）

    Description 有个脑筋急转弯是这样的:有距离很近的一高一低两座桥,两次洪水之后高桥被淹了两次,低桥却只被淹了一次,为什么?答案是:因为低桥太低了,第一次洪水退去之后水位依然在低桥之上,所以不 ...

  6. iOS swift String 换行显示

    在oc中换行的方式 NSString *str = @" aaaaa \ bbbbb \ cccc \ "; swift中这种方式不可用 ,swift中换行采用新的方双三引号 &q ...

  7. linux-centos jdk安装

    第一步:查看Linux自带的JDK是否已安装 (卸载centOS已安装的1.4) 安装好的CentOS会自带OpenJdk,用命令 java -version ,会有下面的信息: java versi ...

  8. boa web服务器

      Boa是一种非常小巧的Web服务器,其可执行代码只有大约60KB左右.作为一种单任务Web服务器,Boa只能依次完成用户的请求,而不会fork出新的进程来处理并发连接请求.但Boa支持CGI,能够 ...

  9. 一个IDEA和jackson结合的一个错误异常

    一个字段是isSend,用IDEA自动生成的getter/setter方法名会把is去掉.变成getSend()/setSend(). 当返回的时候使用Jackson转json的时候,就会把isSen ...

  10. easyui 扩展 之 Tree的simpleData加载

    实例化.这里增加了三个属性,可以指定idFiled,textFiled和parentField.所以这里的simpleData可以不严格转换成tree的数据格式. $(function(){ $('# ...