友情链接 样式 点击弹出图片加滚动

<div id="friendshipLink">
        <div id="longwidth">
            <div id="div1" class="kuang">
                <%for (int i = 0; i < FriendshipLinks.Count; i++)%>
                <%{ %>
                <a href="<%=FriendshipLinks[i].Url %>" title="<%=FriendshipLinks[i].Title %>" target="_blank" style="float: left;">
                    <img src="<%=FriendshipLinks[i].Thumbnail %>" style="border: 1px solid #eee; padding: 1px;" /></a>

                <%} %>
            </div>
            <div id="div2" class="kuang"></div>
        </div>

    </div>

 <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td width="38%" height="60" valign="top" style="padding-left: 5px; line-height: 28px;">
                            <a href="#displaySchool" class="foot sgyxu shui" id="displaySchool">
                                <img src="_skins/0011/imges/up.gif" style="float: left; display: inline; border: 0; text-align: center; padding-top: 2px;" id="imglink" /><b>友情链接</b></a>  <span class="sgyxu shui foohx">|</span>  <a href="#" class="foot sgyxu shui"><b>站点地图</b></a>  <span class="sgyxu foohx">|</span>  <a href="#" class="foot sgyxu shui"><b>联系我们</b></a>  <span class="sgyxu foohx">|</span>  <a href="#" class="foot sgyxu shui"><b>版权申明</b></a><br />
                         
                        </td>
                    </tr>
                </table>

<style type="text/css">
#friendshipLink {width:1000px; height:45px;overflow:hidden; display: none;margin: 0 auto 10px auto; }
#longwidth { height:45px;width:1000%;}
.kuang { float:left; height:45px; }
</style>
<script type="text/javascript">
    $(function () {
        $("#div2").html($("#div1").html()); //将div2的html设置成div1的html
        var mar = function () {
            if ($("#friendshipLink").scrollLeft() > $("#div1").width()) { //当滚动条隐藏的长度大于div1的宽度
                $("#friendshipLink").scrollLeft(0);
            }
            else {
                $("#friendshipLink").scrollLeft($("#friendshipLink").scrollLeft() + 1); //每次滚动条往右移动1px；
            }
        };
        var vid = setInterval(mar, 30);
        $("#friendshipLink").mouseenter(function () {
            clearInterval(vid);
        }).mouseleave(function () {
            vid = setInterval(mar, 30);
        });
    });
</script>

<script type="text/javascript">

    $(function () {
        $("#displaySchool").click(function () {
            if ($("#friendshipLink").css("display") == 'none') {
                $("#friendshipLink").css("position", "static");
                $("#friendshipLink").fadeIn(1000);
                $("#imglink").attr("src", "_skins/0011/imges/down.gif");
            } else {
                $("#friendshipLink").fadeOut(100);
                $("#imglink").attr("src", "_skins/0011/imges/up.gif");
            }

        });
    })

</script>