动态绑定数据后的图片移动与静态写死图片移动的区别问题

joke50 2010-09-15 09:29:54



<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Scroll2.ascx.cs" Inherits="Controller_WebUserControl" %>



<asp:DataList ID="DataList2" runat="server" Height="450px" Width="200px" >

    <ItemTemplate>

    <div style="height:100%;width:100%">

        <div id="colee_bottom" style="overflow:hidden;height:75px;width:200px;">

        <table cellpadding="0" cellspacing="0" align="center" width="100%" height="100%" border="0">

        <tr>

            <td>

                <table height="100%" width="75px">

                    <tr>

                        <td>

                            <div id="colee_bottom1" style="width:100%; height:60px">

                                <img height="60px" src='Admin/Friends/upload/<%#DataBinder.Eval(Container.DataItem,"Image_small")%>'width="75px" alt="">

                            </div>

                        </td>

                    </tr>

                </table>

            </td>

            <td>

                <table width="125px" height="60px">

                    <tr>

                        <td>【<b><%#DataBinder.Eval(Container.DataItem,"FriendName") %></b>】</td>

                    </tr>

                    <tr>

                        <td> <%#DataBinder.Eval(Container.DataItem,"FriendAddress") %></td>

                    </tr>

                    <tr>

                        <td>电话：<%#DataBinder.Eval(Container.DataItem,"FriendPhone") %></td>

                    </tr>

                </table>

            </td>

        </tr>

            </table>

            <div id="colee_bottom2"></div>

        </div>

        </div>

    </ItemTemplate>   

</asp:DataList>

<script language="javascript" type="text/javascript">

var speed=30

var colee_bottom2=document.getElementById("colee_bottom2");

var colee_bottom1=document.getElementById("colee_bottom1");

var colee_bottom=document.getElementById("colee_bottom");

colee_bottom2.innerHTML=colee_bottom1.innerHTML

colee_bottom.scrollTop=colee_bottom.scrollHeight

function Marquee2(){

if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)

colee_bottom.scrollTop+=colee_bottom2.offsetHeight

else{

colee_bottom.scrollTop--

}

}

var MyMar2=setInterval(Marquee2,speed)

colee_bottom.onmouseover=function() {clearInterval(MyMar2)}

colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}

</script>

箭头部分在循环滚动，下面框出来的部分不动。。。。

...全文

89 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

shikun520 2010-09-16

打赏
举报

友情帮顶！如果用jquery应可以实现吧

老Key 2010-09-15

打赏
举报

呵呵。。学习。。。

joke50 2010-09-15

打赏
举报



<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Scroll2.ascx.cs" Inherits="Controller_WebUserControl" %>

    <div style="height:100%;width:100%">

        <div id="colee" style="overflow:hidden;height:500px;width:190px;">

        <div id="colee1">

            <div style="width:80px; height:60px">

                <p>

                    <img height="60px" width="75px" src='image/014.jpg'/> 

				    <img height="60px" width="75px" src='image/015.jpg'/> 

				    <img height="60px" width="75px"src='image/016.jpg'/> 

				    <img height="60px" width="75px"src='image/017.jpg'/> 

				    <img height="60px" width="75px"src='image/018.jpg'/> 

				    <img height="60px" width="75px"src='image/019.jpg'/> 

				    <img height="60px" width="75px"src='image/020.jpg'/> 

				    <img height="60px" width="75px"src='image/021.jpg'/>                 

				</p> 

            </div>

            </div>

            <div id="colee2"></div>

        </div>

        </div>



<script>

    var speed = 30;

    var colee2 = document.getElementById("colee2");

    var colee1 = document.getElementById("colee1");

    var colee = document.getElementById("colee");

    colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2

    function Marquee1() {

        //当滚动至colee1与colee2交界时

        if (colee2.offsetTop - colee.scrollTop <= 0) {

            colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端

        } else {

            colee.scrollTop++;

        }

    }

    var MyMar1 = setInterval(Marquee1, speed);//设置定时器

    //鼠标移上时清除定时器达到滚动停止的目的

    colee.onmouseover = function () { clearInterval(MyMar1) }

    //鼠标移开时重设定时器

    colee.onmouseout = function () { MyMar1 = setInterval(Marquee1, speed) }

</script>