jQuery打造动态渐变按钮

最新推荐文章于 2022-07-02 18:30:07 发布

snake_hand

最新推荐文章于 2022-07-02 18:30:07 发布

阅读量141

点赞数

文章标签： javascript xhtml 前端 ViewUI

这篇随笔的来源于【教程】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() 方法来设置符合要求的事件(这里编写的是透明度的变化),从而产生渐变效果!

snake_hand

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery打造动态渐变按钮

&lt;script type="application/javascript" src="http://files.cnblogs.com/yc-755909659/jquery-1.9.1.min.js"&gt;&lt;/script&gt;&lt;script type="application/javascript"&gt;// &lt;![CDATA[$(document
复制链接

扫一扫