JQUERY的商品浏览效果

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<link rel="stylesheet" type="text/css" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow' rel='stylesheet' type='text/css' />
        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://tympanus.net/Development/GridNavigationEffects/js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="http://tympanus.net/Development/GridNavigationEffects/js/jquery.mousewheel.js"></script>
        <script type="text/javascript" src="http://tympanus.net/Development/GridNavigationEffects/js/jquery.gridnav.js"></script>
        <link rel="stylesheet" type="text/css" href="http://tympanus.net/Development/GridNavigationEffects/css/gridNavigation.css" />
        <script type="text/javascript">
            $(function() {
                $('#tj_container').gridnav({
                    type    : {
                        mode        : 'sequpdown',     // use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
                        speed        : 400,            // for fade, seqfade, updown, sequpdown, showhide, disperse, rows
                        easing        : '',            // for fade, seqfade, updown, sequpdown, showhide, disperse, rows    
                        factor        : 50,            // for seqfade, sequpdown, rows
                        reverse        : false            // for sequpdown
                    }
                });
            });
        </script>


<div id="tj_container" class="tj_container">
    <div class="tj_nav">
        <span id="tj_prev" class="tj_prev">Previous</span>
        <span id="tj_next" class="tj_next">Next</span>
    </div>
    <div class="tj_wrapper">
        <ul class="tj_gallery">
        <%string[] str = ViewData["Message"] as string[]; string[] strTitle = ViewData["strTitle"] as string[]; string[] strCurrentPrice = ViewData["strCurrentPrice"] as string[];
        for (int i = 0; i < str.Length; i++)
        { %>
            <li style="250px;" id=demo_customevents><a href="#" title='<%=strTitle[i]+" 只要 "+strCurrentPrice[i] +"元！" %>'><img src='<%=str[i] %>'alt="image01" /></a></li>
            <%} %>
        </ul>
    </div>
</div>
<link rel="stylesheet" type="text/css" href="http://demo.tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/colortip-1.0/colortip-1.0-jquery.css"/>
<%--
<script type="text/javascript" src="http://demo.tutorialzine.com/2010/07/colortips-jquery-tooltip-plugin/colortip-1.0/colortip-1.0-jquery.js"></script>--%>
<script type="text/javascript" >
(function($){
    $.fn.colorTip = function(settings){

        var defaultSettings = {
            color        : 'yellow',
            timeout        : 500
        }
        
        var supportedColors = ['red','green','blue','white','yellow','black'];
        
        /* Combining the default settings object with the supplied one */
        settings = $.extend(defaultSettings,settings);

        /*
        *    Looping through all the elements and returning them afterwards.
        *    This will add chainability to the plugin.
        */
        
        return this.each(function(){

            var elem = $(this);
            
            // If the title attribute is empty, continue with the next element
            if(!elem.attr('title')) return true;
            
            // Creating new eventScheduler and Tip objects for this element.
            // (See the class definition at the bottom).
            
            var scheduleEvent = new eventScheduler();
            var tip = new Tip(elem.attr('title'));

            // Adding the tooltip markup to the element and
            // applying a special class:
            
            elem.append(tip.generate()).addClass('colorTipContainer');

            // Checking to see whether a supported color has been
            // set as a classname on the element.
            
            var hasClass = false;
            for(var i=0;i<supportedColors.length;i++)
            {
                if(elem.hasClass(supportedColors[i])){
                    hasClass = true;
                    break;
                }
            }
            
            // If it has been set, it will override the default color
            
            if(!hasClass){
                elem.addClass(settings.color);
            }
            
            // On mouseenter, show the tip, on mouseleave set the
            // tip to be hidden in half a second.
            
            elem.hover(function(){

                tip.show();
                
                // If the user moves away and hovers over the tip again,
                // clear the previously set event:
                
                scheduleEvent.clear();

            },function(){

                // Schedule event actualy sets a timeout (as you can
                // see from the class definition below).
                
                scheduleEvent.set(function(){
                    tip.hide();
                },settings.timeout);

            });
            
            // Removing the title attribute, so the regular OS titles are
            // not shown along with the tooltips.
            
            elem.removeAttr('title');
        });
        
    }


    /*
    /    Event Scheduler Class Definition
    */

    function eventScheduler(){}
    
    eventScheduler.prototype = {
        set    : function (func,timeout){

            // The set method takes a function and a time period (ms) as
            // parameters, and sets a timeout

            this.timer = setTimeout(func,timeout);
        },
        clear: function(){
            
            // The clear method clears the timeout
            
            clearTimeout(this.timer);
        }
    }


    /*
    /    Tip Class Definition
    */

    function Tip(txt){
        this.content = txt;
        this.shown = false;
    }
    
    Tip.prototype = {
        generate: function(){
            
            // The generate method returns either a previously generated element
            // stored in the tip variable, or generates it and saves it in tip for
            // later use, after which returns it.
            
            return this.tip || (this.tip = $('<span class="colorTip">'+this.content+
                                             '<span class="pointyTipShadow"></span><span class="pointyTip"></span></span>'));
        },
        show: function(){
            if(this.shown) return;
            
            // Center the tip and start a fadeIn animation
            this.tip.css('margin-left',-this.tip.outerWidth()/2).fadeIn('fast');
            this.shown = true;
        },
        hide: function(){
            this.tip.fadeOut();
            this.shown = false;
        }
    }
    
})(jQuery);
</script>

<script type="text/javascript" >
    $(document).ready(function() {

        /* Adding a colortip to any tag with a title attribute: */

    $('[title]').colorTip({ color: 'blue',timeout:200 });

    });
    </script>

</asp:Content>