Question

我想在图库中应用此jQuery http://jsfiddle.net/awaises/9tFLK/。我的朋友在ASP.NET中开发了网站，他使用了DataList。我可以在html中实现代码，但在ASP.Net中我无法理解应该在哪里应用代码。请指导我如何实现jquery？数据列表代码如下...（对于一些重要的信号，而不是标志不会出现，这就是我在下面的代码中使用圆括号的原因）

<asp:DataList ID="dalphoto" runat="server" BorderStyle="Solid" BorderWidth="0px" RepeatColumns="6" RepeatDirection="Horizontal" DataKeyField="HotelPhoto">
    <AlternatingItemStyle BorderStyle="Solid" BorderWidth="0px" />
    <SeparatorStyle BorderStyle="Solid" BorderWidth="0px" />
    <ItemTemplate>
    <asp:Image ID="Image" width="80px" height="80px" runat="server" ImageUrl='<%# "~/Photos/HotelPhotos/" + Eval("Photourl") %>' />
    </ItemTemplate>
</asp:DataList>

Answer 1

修改DataList的标记，如下所示

<asp:DataList ID="dalphoto" runat="server" BorderStyle="Solid" BorderWidth="0px" RepeatColumns="6" RepeatDirection="Horizontal"  DataKeyField="HotelPhoto">
        <ItemTemplate>
            <div class="thumbnail-item">
                <asp:Image ID="Image" width="80px" height="80px" runat="server" CssClass="thumbnail" ImageUrl='<%# "~/Photos/HotelPhotos/" + Eval("Photourl") %>'/>
                <div class="tooltip"><img src="<%# "Photos/HotelPhotos/" + Eval("Photourl") %>" alt="" width="330" height="185" /><span class="overlay"></span>
            </div>
            </div>   
        </ItemTemplate>
    </asp:DataList>

从小提琴中抓取css和javascript，无需任何修改即可使用。

<强> CSS

.thumbnail-item { 
    /* position relative so that we can use position absolute for the tooltip */
    position: relative; 
    float: left;  
    margin: 0px 5px; 
}

.thumbnail-item a { 
    display: block; 
}

.thumbnail-item img.thumbnail {

}

.tooltip { 
    /* by default, hide it */
    display: none; 
    /* allow us to move the tooltip */
    position: absolute; 
    /* align the image properly */
}

.tooltip span.overlay { 
    /* the png image, need ie6 hack though */
    /* put this overlay on the top of the tooltip image */
    position: absolute; 
    top: 0px; 
    left: 0px; 
    display: block; 
}

<强>的JavaScript

// Load this script once the document is ready
    $(document).ready(function () {

        // Get all the thumbnail
        $('div.thumbnail-item').mouseenter(function(e) {

            // Calculate the position of the image tooltip
            x = e.pageX - $(this).offset().left;
            y = e.pageY - $(this).offset().top;

            // Set the z-index of the current item, 
            // make sure it's greater than the rest of thumbnail items
            // Set the position and display the image tooltip
            $(this).css('z-index','15')
            .children("div.tooltip")
            .css({'top': y + 10,'left': x + 20,'display':'block'});

        }).mousemove(function(e) {

            // Calculate the position of the image tooltip            
            x = e.pageX - $(this).offset().left;
            y = e.pageY - $(this).offset().top;

            // This line causes the tooltip will follow the mouse pointer
            $(this).children("div.tooltip").css({'top': y + 10,'left': x + 20});

        }).mouseleave(function() {

            // Reset the z-index and hide the image tooltip 
            $(this).css('z-index','1')
            .children("div.tooltip")
            .animate({"opacity": "hide"}, "fast");
        });

    });

鼠标悬停在ASP.NET DataList上的缩略图jQuery实现

1 个答案: