zoukankan      html  css  js  c++  java
  • 定义文字样式-插件

    今天抽时间写一个定义文字样式的插件:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>word</title>
    </head>
    <body>
    <div class="word">
    <p>文字插件文字插件文字插件文字插件文字插件</p><br />
    <p>文字插件文字插件文字插件文字插件文字插件</p><br />

    <p>文字插件文字插件文字插件文字插件文字插件</p><br />
    <p>文字插件文字插件文字插件文字插件文字插件</p><br />

    <p>文字插件文字插件文字插件文字插件文字插件</p><br />
    <p>文字插件文字插件文字插件文字插件文字插件</p><br />

    <p>文字插件文字插件文字插件文字插件文字插件</p><br />
    <p>文字插件文字插件文字插件文字插件文字插件</p><br />

    <p>文字插件文字插件文字插件文字插件文字插件</p><br />
    <p>文字插件文字插件文字插件文字插件文字插件</p><br />


    </div>


    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    (function($){
    $.fn.extend({
    aWords:function(word){
    var defaults={
    color:"black",
    backgroundColor:"#f2f2f2",
    paddingLeft:10
    };
    var word=$.extend(defaults,word);
    return this.each(function(obj){
    var obj=$(this);
    var o=word;
    var item=$("p",obj);
    item.hover(function(){
    $(this).css(
    {color:o.color},
    {backgroundColor:o.backgroundColor}
    );
    $(this).animate(
    {paddingLeft:o.paddingLeft},
    {queue:false,duration:300}
    )
    },function(){
    $(this).css(
    {color:""},
    {backgroundColor:""}
    );
    $(this).animate(
    {paddingLeft:"0"},
    {queue:false,duration:300}
    )
    })
    })
    }
    })
    })(jQuery);

    //调用代码
    $(document).ready(function(){
    $(".word").aWords({
    paddingLeft:"10px",
    color:"red"
    })
    })
    </script>

    </body>
    </html>

  • 相关阅读:
    分层图最短路(DP思想) BZOJ2662 [BeiJing wc2012]冻结
    动态规划 BZOJ1925 地精部落
    线性DP SPOJ Mobile Service
    线性DP codevs2185 最长公共上升子序列
    数位DP POJ3208 Apocalypse Someday
    线性DP POJ3666 Making the Grade
    杨氏矩阵 线性DP? POJ2279 Mr.Young's Picture Permutations
    tarjan强连通分量 洛谷P1262 间谍网络
    树链剖分 BZOJ3589 动态树
    二分图 BZOJ4554 [Tjoi2016&Heoi2016]游戏
  • 原文地址:https://www.cnblogs.com/fs521cw/p/5180327.html
Copyright © 2011-2022 走看看