jQuery打造动态渐变按钮

snake_hand

浏览: 624957 次

最近访客更多访客>>

u012363178

Netpet_11

tsaowe

zhuxinyu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

这篇随笔的来源于【教程】jQuery打造动态渐变按钮这篇博文，在下怀着学习的态度，动手去做去理解，并记录下来，和大家分享！

1.看看自己的效果显示：

渐变效果

前端档案

颜色渐变

前端档案

2.html代码：

gradual-change-button.html

<!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>jQuery打造动态渐变按钮</title>
<style type="text/css" >
.button
{
    background: url("http://y.photo.qq.com/img?s=uDgIxsWYI&l=y.jpg") top no-repeat;
    display: block;
    height: 80px;
    width: 200px;
    text-indent: -9999px;
}
/*不需要在设置:hover的样式，而是设置span.hover的样式*/
.button span.hover
{  
    position: absolute;
    display: block;
    width: 200px;
    height: 80px;
    text-indent: -9999px;
    background: url("http://y.photo.qq.com/img?s=uDgIxsWYI&l=y.jpg") bottom no-repeat;
}
.content
{
    margin: 0 auto;
    width: 666px;
}
.jsbutton
{
    background: #F00;
    display: block;
    height: 80px;
    width: 200px;
    text-indent: -9999px;
}
/*不需要在设置:hover的样式，而是设置span.hover的样式*/
.jsbutton span.hover
{   /*注意要使用绝对定位*/
    position: absolute;
    display: block;
    width: 200px;
    height: 80px;
    text-indent: -9999px;
    background: #00F;
}
</style>
<script type="application/javascript" src="http://files.cnblogs.com/yc-755909659/jquery-1.9.1.min.js"></script>
<script type="application/javascript">
$(document).ready(function() {
    //把文本包含到<span>元素中，再附加到.jsbutton中
    $(".jsbutton,.button").wrapInner('<span class="hover"></span>').css('textIndex','0').each(function() {
         //先设置<span>元素中全透明，再添加鼠标悬停事件
         $("span.hover").css('opacity',0).hover(function() {
            $(this).stop().fadeTo(650,1);  //渐变至不透明
        },function(){
            $(this).fadeTo(650,0);//渐变至全透明
            });
    });
});
</script>
</head>

<body>
<div class="content">
  <div>渐变效果</div>
  <div><a class="button">编程之路</a></div>
  <br />
  <br />
  <div>颜色渐变</div>
  <div><a class="jsbutton">编程之路</a></div>
</div>
</body>
</html>

3.个人理解：

其实就是先应用的jQuery的wrapInner() 方法把"<span class="hover"></span>"添加到指定样式的a标签中,然后使用each() 方法来设置符合要求的事件(这里编写的是透明度的变化),从而产生渐变效果!

1
顶

1
踩

分享到：

swipeleft 执行2次 | jquery 控制 input disabled

2013-06-25 19:28
浏览 1113
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery打造动态渐变按钮

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery打造动态渐变按钮

评论

发表评论

相关推荐

最近访客更多访客>>