<!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. zookeeper（五）：Zookeeper中的Access Control(ACL)

    概述 传统的文件系统中,ACL分为两个维度,一个是属组,一个是权限,子目录/文件默认继承父目录的ACL.而在Zookeeper中,node的ACL是没有继承关系的,是独立控制的. Zookeeper的 ...

  2. 点滴积累【C#】---对上传文件的路径进行加密，以免将路径暴露在浏览器上，避免一些安全隐患！

    效果: 描述: 本事例是为解决在上传或下载文件时避免将路径暴露在外.在上传时将路径进行加密保存到DataTable或数据库中,在下载是再读取DataTable中加密数据进行解密下载. 代码: [前台代 ...

  3. [iOS]delegate和protocol

    转自:http://haoxiang.org/2011/08/ios-delegate-and-protocol/ 今天上班和同事讨论工程怎么组织的时候涉及到这个话题.iOS开发上对delegate使 ...

  4. 3.selenium模块

    本节内容: 介绍 安装 基本使用 选择器 等待元素被加载 元素交互操作 其他 项目练习 一.介绍 selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行Ja ...

  5. C++语言基础(21)-异常

    C++语言本身或者标准库抛出的异常都是 exception 的子类,称为标准异常(Standard Exception).你可以通过下面的语句来捕获所有的标准异常: try{ //可能抛出异常的语句 ...

  6. 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例

    今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...

  7. vue render函数 函数组件化

    之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法,它只是一个接受参数的函数 在这个例子中,我们标记组件为functional,这意味它是无状态(没有data), ...

  8. 【问题记录】mybatis开启事务方法时，一级缓存可能引发的问题

    首先,上代码: public void listMybatisModel() { List<MybatisModel> mybatisModels = mapper.listMybatis ...

  9. SQL Server DTS向导，字段转换出现202和200错误

    当使用SQL Server 2012的DTS向导(Import and Export Data/导入导出数据)时,会出现如下问题: 当来源数据直接使用表的时候,没有任何问题 但如果来源数据是查询时,就 ...

  10. Java实现ZIP解压功能

    1.引入依赖 <dependency> <groupId>org.apache.ant</groupId> <artifactId>ant</ar ...