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= " width: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>

转载于:https://www.cnblogs.com/bober/archive/2011/11/14/2248398.html