<!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。激活某个程序的api attilax总结

    Atitit.激活某个程序的api attilax总结 1. 设置当前某窗口为当前窗口,有几个步骤要做:1.得到窗口句柄FindWindow2.切换键盘输入焦点AttachThreadInput3.显 ...

  2. 反射学习2-通过反射机制动态获取属性的值模拟Struts的自动赋值

    一.准备知识:   Java反射机制   处理事务的JavaBean   String的操作常用方法 二.模拟步骤   这里我们通过反射机制动态获取属性的值模拟Struts中的自动赋值. 1.首先创建 ...

  3. Mac上Nginx-增加对HLS的支持

    Mac上Nginx-增加对HLS的支持 我们在Mac上搭建直播服务器Nginx说了如何在Mac搭建视频直播服务器Nginx,对RTMP推流和RTMP拉流的支持.接下来说说如何增加对HLS的支持. 在N ...

  4. 对java中hashmap深入理解

    1.HashMap的结构是怎样的? 二维结构,第一维是数组,第二维是链表 2.Get方法的流程是怎样的? 先调用Key的hashcode方法拿到对象的hash值,然后用hash值对第一维数组的长度进行 ...

  5. spring junit 部署两套测试方案

    第一套方案: 1.初始化application:使用@ContextConfigurationr的classpath属性,如 @ContextConfiguration(locations = { & ...

  6. 跟着百度学PHP[14]-PDO的错误处理模式&PDO执行SQL

    我们在使用PDO去执行sql语句的时候并不会报错.如下案例所示: <?php try { //$pdo = new pdo("mysql:host=主机;port=端口;dbname= ...

  7. java 读写文件常用方法

    package study.bigdata; import org.apache.commons.io.FileUtils; import org.apache.commons.io.IOUtils; ...

  8. Ubuntu 12.04下PostgreSQL-9.1安装与配置详解(在线安装) [转]

    说明:       我是用root用户在终端登陆的,如果是非root用户,那在命令前需要加上"sudo",你懂的... 第一步:在Ubuntu下安装Postgresql       ...

  9. openssl基础

    OpenSSL 是一个安全套接字层密码库,囊括主要的密码算法.常用的密钥和证书封装管理功能及SSL协议,并提供丰富的应用程序供测试或其它目的使用. OpenSSL is an open source ...

  10. OSX 10.8+下开启Web共享的方法 /转

    OSX 10.8+ Mountain Lion 下开启 Web Sharing(Web 共享)的方法 JUL 28, 2012  #OS X  #how-to  #apache  #web  #sha ...