Jquery 插件-2 Texthover 

/*
下面的这个实例的意思是 当我们hover一个对象的时候，
它能改变它的text、background、foreground三个属性，也就是文本、背景色、前景色。用户可以设 定他自己想设定的值，
而不是固定死的。当然，如果用户没有设置，我们会给他一个默认值。
*/
;(function($) {

    $.fn.textHover = function (options) {
        var defaultVal = {
            Text: 'Your mouse is over',
            ForColor: 'Red',
            BackColor: 'Gray'
        }
        var obj  = $.extend(defaultVal, options);

             return this.each(function(){
             var selObject = $(this);//获取当前对象.

             var oldText = selObject.text();//获取当前对象的text值。
             var oldBgColor = selObject.css("backgroud-color");//获取当前对象的背景色
             var oldColor = selObject.css("color");//获取当前对象的字体的颜色

             selObject.hover(function(){    //hover的时候执行 Example:.hover( handlerIn(eventObject), handlerOut(eventObject) )
             //定义一个hover方法。
                  selObject.text(obj.Text);//进行赋值 
                  selObject.css("background-color", obj.BackColor);//进行赋值
                  selObject.css("color", obj.ForeColor);//进行赋值 
               }, 
               function()//hover离开的时候实行
               { 
                 selObject.text(oldText);
                 selObject.css("background-color", oldBgColor);
                 selObject.css("color", oldColor); 
                }); 
            });
 } 
 })(jQuery);

 

aspx code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MyPlugin4.aspx.cs" Inherits="MyPlugin4" %>

<!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 runat="server">
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/textHover.js" type="text/javascript"></script>
    <title></title>

    <script type="text/javascript">
        $(document).ready(function () {
            $('#div1').textHover(
            { Text: 'I am going to over..',
                ForeColor: 'yellow',
                BackColor: 'Red'
            });
            $('#div2').textHover(
            { Text: 'I am seconddiv...'
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="div1">
            Mouse over here.....
        </div>
        <div id="div2">
            Mouse over here.....
        </div>
    </div>
    </form>
</body>
</html>

 

 

posted @ 2014-03-17 15:40  chengdu.jack.li  阅读(181)  评论(0)  编辑  收藏  举报