在线求助:这种新闻滚动的效果如何实现的?主要是ashx部分!

Question

http://202.75.40.204/blogarate/Realtime_.aspx感觉这种效果很好,国内很少见(也许我见的少!)主要是http://202.75.40.204/blogarate/Realtime.ashx 这个文件的具体实现原理和参数传递几天了搞不定!能够帮忙实现的达人,我再追铁加分表示感谢!

Answer 1

相关的js文件在这里: http://202.75.40.204/blogarate/js/RealTimeViewer.js

Answer 2

用JS操作页面。。Ajax定时更新数据。

Answer 3

的确,我也知道ajax的定时请求,并且是当前滚动的ID与数据库的最新ID进行判断决定是否加载下一批数据,关键是如果实现?

Answer 4

使用js里的定时器 setTimeout(Expression,DelayTime),定时通过ajax请求数据库

Answer 5

我这有段代码~~ 做的效果参考  http://fcwr3.taiclub.com.cn/Pages/FCHWR/PartOne.aspx   应征名单那块

Answer 6

1. 在onload事件的委托代码中，设置定时器setTimeout()
2. 在定时器中，定时查询数据库最近的5条信息，显示后，js操作信息，显示到页面上
3. 跟当前滚动ID没有关系吧，要不根据自增ID来找最近五条信息，要不根据创建时间来做这个事情
4. ajax取数据，页面读数据，设置显示，这个应该不是很难的事情啊
5. ashx的部分，只需要从数据库按照自增ID倒排序，找到最近的5条信息，返回json格式就OK了

Answer 7

首先请看 定时发送的 
Realtime.ashx?curPostID=26837,26838,26900,26899,27036&curMaxPostVoteID=97222curPostID 为当前5条的 postID    MaxPostVoteID这个一直增长 加一自增 返回的数据为 
1||26835,26837,26838,26900,26899||97223||<li class="headline"><div class="totalrateB"><a href="Post.aspx?Id=26835&url=http://blog.sanriotown.com/phuongx3:mymelody.com/2008/07/01/hello-kitty-hotel/&title=Hello Kitty Hotel?!&Author=phuongx3:mymelody.com&tags=Sanrio Related&score=12&votes=3&date=7/2/2008 12:56:28 AM&ScreenCap=">12</a>&nbsp;&nbsp;&nbsp;</div><div class="rateContent"><div class="snap_shots"><a class="postTitle" href="http://blog.sanriotown.com/phuongx3:mymelody.com/2008/07/01/hello-kitty-hotel/" onclick="window.location.href='Post.aspx?Id=26835&url=http://blog.sanriotown.com/phuongx3:mymelody.com/2008/07/01/hello-kitty-hotel/&title=Hello Kitty Hotel?!&Author=phuongx3:mymelody.com&tags=Sanrio Related&score=12&votes=3&date=7/2/2008 12:56:28 AM&ScreenCap='; return false;" onmouseover="">Hello Kitty Hotel?!</a></div>Recent rated 1034 days ago written by <a href="PostByAuthor.aspx?Author=phuongx3:mymelody.com">phuongx3:mymelody.com</a><br />Tagged: <a title="Find more posts on these subjects" href="PostByTags.aspx?Tags=Sanrio Related">Sanrio Related</a><br /><a href="Post.aspx?Id=26835&url=http://blog.sanriotown.com/phuongx3:mymelody.com/2008/07/01/hello-kitty-hotel/&title=Hello Kitty Hotel?!&Author=phuongx3:mymelody.com&tags=Sanrio Related&score=12&votes=3&date=7/2/2008 12:56:28 AM&ScreenCap=">More details</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="Post.aspx?Id=26835&url=http://blog.sanriotown.com/phuongx3:mymelody.com/2008/07/01/hello-kitty-hotel/&title=Hello Kitty Hotel?!&Author=phuongx3:mymelody.com&tags=Sanrio Related&score=12&votes=3&date=7/2/2008 12:56:28 AM&ScreenCap=">0 Comment(s)</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="Search.aspx?Id=Hello Kitty Hotel?!">Similiar posts</a><br /><br /></div></li>其实就是返回了 新的 5个的curPostID  然后一堆HTML  其实只是最新的 curPostID！26835 也就是这个

Answer 8

返回后的东西 是赋值在  
每次请求 这个都会跟着改变  
<div id="ctl00_ContentPlaceHolder1_postID" style="display:none;">
<input id="hCurPostID" type="hidden" value="27061,27060,27059,27058,27057">
<input id="hCurMaxPostVoteID" type="hidden" value="97273">
</div>看明白了这些 思路也就出来了   因为这里就显示了5条 保证5条数据  假设传递的参数为 27061,27060,27059,27058,27057  那么只要找到 27061 的上一条记录  然后 返回的就是27062,27061,27060,27059,27058   和 27062这个记录的HTML  显示这个  平且删除最后一条就行了 也就好比是 插入一条节点 然后删除最后一个 

Answer 9

 var PostUpdating = html.split("||");
        
        //alert(html);
        
        if (PostUpdating[0] == "1")
        {    
            $("#hCurPostID").val(PostUpdating[1]);
            $("#hCurMaxPostVoteID").val(PostUpdating[2]);
            var currentItem = PostUpdating[3];            $(currentItem).addClass("next").prependTo("#content .wrapper");
            
            $(".wrapper .next").animate( { marginTop: -1 }, BlogarateRealtime.animation, function() {
                $(".wrapper .next").css("marginTop", -1);
                $(".wrapper .next").removeClass("next");
                $(".wrapper .next").fadeIn(BlogarateRealtime.animation);
            });
            
            var postItem = $(".wrapper .headline");
            $(postItem[BlogarateRealtime.display]).animate( { opacity: .50 }, BlogarateRealtime.animation, function(){
                $(postItem[BlogarateRealtime.display]).remove();
            } );     
             
            $(postItem).mouseover(function() {
            $(this).addClass("active");
            }).mouseout(function() {
            $(this).removeClass("active");
            });
        }
这是核心js代码 

Answer 10

菜单好炫。。
你用timer AJAX 定时获取信息 在绑定页面上就可以了