0

我想在画廊上应用这个 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>
4

1 回答 1

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");
        });

    });​

​</p>

于 2012-10-30T23:48:42.447 回答