该功能怎么实现？？？急求

爱做梦的程序员 2011-10-14 11:59:33



具体效果看：http://www.mbaobao.com/ 底部热门评论区块，该功能js或jquery怎么实现，高分求实现代码，或是思路，请懂的指点指点

下面是jquery的一些代码，但是本人对jquery是刚入门，无法看透


//评论滚动

	var comment_list = $("#comment-list");

	var comment_interval;

	if(comment_list.find(".item").size()>5){

		setTimeout(function(){

			comment_list.find("img").each(function(){

				var src2 = $(this).attr("src2");

				$(this).attr("src",src2);

			});

			comment_interval = comment_scroll();

		},2000)

		comment_list.bind("mouseover",function(){

			clearInterval(comment_interval);

		}).bind("mouseout",function(){

			comment_interval = comment_scroll();

		});

	}


能实现效果就行，谢谢了
...全文
149 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
liangws 2011-10-15
  • 打赏
  • 举报
 回复
简单实现方法，楼主根据实际情况修改


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

 </head>

 <style>

 .item{height:92px;overflow:hidden;border-bottom:1px solid #EFEFEF;margin-bottom:10px;color:blue}

 </style>

<script type="text/javascript" src="jquery-1.6.4.min.js"></script>



</head>

<body>

<div id="testID" style="height:450px;overflow: hidden;">

<div class="item">111111</div>

<div class="item">222222</div>

<div class="item">333333</div>

<div class="item">444444</div>

<div class="item">555555</div>

<div class="item">666666</div>

<div class="item">777777</div>

<div class="item">888888</div>

<div class="item">999999</div>

</div>

</body>



<script>

$(function() {

	//滚动函数

	function scroll(){

		//每次将第一个div移到尾部

		$("#testID").append(function(){

			return $(this).find(".item:first");

		});

		//将第一个div以0毫秒的速度收起来，然后再以2000毫秒的速度往下滑动

		$(".item:first").slideUp(0).slideDown(2000);

	}

	//每2000毫秒执行一次滚动函数

	var timeObj = setInterval(function(){

		scroll();

	}, 2000)

	

	//鼠标移入DIV时取消滚动，移出时继续滚动

	$("#testID").mouseover(function(){

		clearInterval(timeObj);

	}).mouseout(function(){

		timeObj = setInterval(function(){

			scroll();

		}, 2000)

	});

});	

</script>

</html>
爱做梦的程序员 2011-10-15
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 liangws 的回复:]
引用 2 楼 qq675845810 的回复:

引用楼主 qq675845810 的回复:
具体效果看：http://www.mbaobao.com/ 底部热门评论区块，该功能js或jquery怎么实现，高分求实现代码，或是思路，请懂的指点指点

下面是jquery的一些代码，但是本人对jquery是刚入门，无法看透
JScript code

//评论滚动
var comme……
[/Quote]
你的的代码是可以实现，只不过是你现在的滚动的内容是向上滚动，我要的是向下滚动，你能不能把这步
//每次将第一个div移到尾部

        $("#testID").append(function(){

            return $(this).find(".item:first");

        });

改为‘每次将最后一个div移动第一位’，本人对jquery才刚入门，不太懂用，只能用些简单的

liangws 2011-10-15
  • 打赏
  • 举报
 回复
你看清楚点。我的代码已经是实现了，并不是第一个DIV隐藏和出现。。
liangws 2011-10-15
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 qq675845810 的回复:]

引用楼主 qq675845810 的回复:
具体效果看：http://www.mbaobao.com/ 底部热门评论区块，该功能js或jquery怎么实现，高分求实现代码，或是思路，请懂的指点指点

下面是jquery的一些代码，但是本人对jquery是刚入门，无法看透
JScript code

//评论滚动
var comment_list = $("#comment-list……
[/Quote]

不会.我的效果应该就是你说的啊。不是普通的第一个DIV隐藏和出现。。再看清楚点
liangws 2011-10-15
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 qq675845810 的回复:]

引用楼主 qq675845810 的回复:
具体效果看：http://www.mbaobao.com/ 底部热门评论区块，该功能js或jquery怎么实现，高分求实现代码，或是思路，请懂的指点指点

下面是jquery的一些代码，但是本人对jquery是刚入门，无法看透
JScript code

//评论滚动
var comment_list = $("#comment-list……
[/Quote]

不会吧。。我的已经是滚动了啊
峭沙 2011-10-15
  • 打赏
  • 举报
 回复
上面有点小错误，修正下，另外8楼的代码让我很纠结，既然用了jquery为嘛还有getElementById()这种东西？逻辑也有点绕。。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

 </head>

 <style>

 .item{height:60px;overflow:hidden;border-bottom:2px solid #EFEFEF;margin-bottom:10px;color:blue}

 #testID{width: 30%;height:400px;overflow: hidden;border: 5px solid black;padding: 10px;}

 </style>

<script type="text/javascript" src="jquery.js"></script>



</head>

<body>

<div id="testID">

<div class="item">111111</div>

<div class="item">222222</div>

<div class="item">333333</div>

<div class="item">444444</div>

<div class="item">555555</div>

<div class="item">666666</div>

<div class="item">777777</div>

<div class="item">888888</div>

<div class="item">999999</div>

</div>

</body>



<script>

$(function() {

    //滚动函数

    function scroll(elem){

    	//找到最后一个div隐藏，并移动到最前面去，再以2000毫秒的速度往下滑动显示

    	elem.children().last().hide().prependTo(elem).slideDown(2000);

    }

    //获取测试容器

    var container = $("#testID");

    //每2000毫秒执行一次滚动函数

    var timeObj = setInterval(function(){

        scroll(container);

    }, 2000)

    

    //鼠标移入DIV时取消滚动，移出时继续滚动

    $("#testID").mouseenter(function(){

        clearInterval(timeObj);

    }).mouseleave(function(){

    	var elem = $(this);

        timeObj = setInterval(function(){

            scroll(elem);

        }, 2000)

    });

});    

</script>

</html>
爱做梦的程序员 2011-10-15
  • 打赏
  • 举报
 回复
[Quote=引用 9 楼 axiheyhey 的回复:]
借用1楼的代码改了下

HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generat……
[/Quote]
这就对了
爱做梦的程序员 2011-10-15
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 qq675845810 的回复:]
花了点时间终于按自己的思路，把效果给弄出来了，下面是代码：

HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/……
[/Quote]

对，就这种效果了
yisiyou 2011-10-15
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 liangws 的回复:]
你看清楚点。我的代码已经是实现了，并不是第一个DIV隐藏和出现。。
[/Quote]

楼主是不是没看仔细呀，是实现了啊。
峭沙 2011-10-15
  • 打赏
  • 举报
 回复
借用1楼的代码改了下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

 </head>

 <style>

 .item{height:92px;overflow:hidden;border-bottom:1px solid #EFEFEF;margin-bottom:10px;color:blue}

 </style>

<script type="text/javascript" src="jquery.js"></script>



</head>

<body>

<div id="testID" style="height:450px;overflow: hidden;">

<div class="item">111111</div>

<div class="item">222222</div>

<div class="item">333333</div>

<div class="item">444444</div>

<div class="item">555555</div>

<div class="item">666666</div>

<div class="item">777777</div>

<div class="item">888888</div>

<div class="item">999999</div>

</div>

</body>



<script>

$(function() {

    //滚动函数

    function scroll(elem){

    	//找到最后一个div隐藏，并移动到最前面去，再以2000毫秒的速度往下滑动显示

    	elem.find(".item:last").hide().prependTo(elem).slideDown(2000);

    }

    //获取测试容器

    var container = $("#testID");

    //每2000毫秒执行一次滚动函数

    var timeObj = setInterval(function(){

        scroll(container);

    }, 2000)

    

    //鼠标移入DIV时取消滚动，移出时继续滚动

    $("#testID").mouseover(function(){

        clearInterval(timeObj);

    }).mouseout(function(){

        timeObj = setInterval(function(){

            scroll(this);

        }, 2000)

    });

});    

</script>

</html>
爱做梦的程序员 2011-10-15
  • 打赏
  • 举报
 回复
花了点时间终于按自己的思路，把效果给弄出来了，下面是代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link rel="stylesheet" type="text/css" href="css/css.css"/>

<style type="text/css">

body {

	margin:0;

	padding:0;

	font-size:12px;

}

ul, li {

	margin:0;

	padding:0;

	list-style:none;

}

.total {

	width:500px;

	height:400px;

	border:2px solid #f60;

	margin:0 auto;

	overflow:hidden;

}

.total ul li {

	width:500px;

	height:100px;

	float:left;

}

.div3 {

	width:496px;

	height:96px;

	overflow:hidden;

	border:2px solid #0CF;

}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs

/jquery/1.4.0/jquery.min.js"></script>

<script>

	$(document).ready(function(){

		huan();								  

		$("#div1").mouseover(function(){clearTimeout(ff)});

		$("#div1").mouseout(function(){ff=setTimeout("huan()",2000);});

		});

		var ff;

	function huan(){

		 var num=document.getElementById('div1').getElementsByTagName('li').length-1;

		 var b=document.getElementById('b');

		 b.innerHTML=document.getElementById('b'+num).innerHTML;

	    	for(var i=num;i>0;i--){	

				if(i==1){

					document.getElementById('b1').innerHTML=b.innerHTML;

					$("#b1").hide().slideDown(800);

				}else{

					document.getElementById('b'+i).innerHTML=document.getElementById('b'+(i-1)).innerHTML;

				}

	 		}

			ff=setTimeout("huan()",2000);

	}	

</script>

</head>

<body>

<div class="total" id="div1">

  <ul>

    <li id="b1">

      <div style="background-color:#D1D1D1" class="div3">11111111</div>

    </li>

    <li id="b2">

      <div style="background-color:#FFCAE4;" class="div3">222222222222</div>

    </li>

    <li id="b3">

      <div style="background-color:#D8F1E0; color:#069;" class="div3">3333333333</div>

    </li>

    <li id="b4">

      <div style="background-color:#FFCACA; color:#C60;" class="div3">4444444444</div>

    </li>

    <li id="b5">

      <div style="background-color:#E4E4E4; color:#06F;" class="div3">55555555555</div>

    </li>

    <li id="b"></li>

  </ul>

</div>

</body>

</html>
liangws 2011-10-15
  • 打赏
  • 举报
 回复
����$("#testId").prepend(function(){$(this).find(".item:last)}��
爱做梦的程序员 2011-10-15
  • 打赏
  • 举报
 回复
[Quote=引用楼主 qq675845810 的回复:]
具体效果看：http://www.mbaobao.com/ 底部热门评论区块，该功能js或jquery怎么实现，高分求实现代码，或是思路，请懂的指点指点

下面是jquery的一些代码，但是本人对jquery是刚入门，无法看透
JScript code

//评论滚动
var comment_list = $("#comment-list");
var comment_in……
[/Quote]
已经接近我要的了，不过我要的是内容也要一起随着循环滚动的，你那里是每次都是执行第一个div隐藏和出现而已，我要的是每执行一次，每个div就向下移动一个div的高度，遇到最后一个div就变成第一div
基于MSP430F149的时钟程序
基于MSP430F149的时钟程序。main disp timer C语言实现
Unity原生录音，优化音频时间固定大小和内存大小问题和语音识别，语音合成的工程文件
原生的录音存在这录音时间固定，内存大小固定的问题，该工程解决录音以上的问题，可以将音频保存本地，或者服务器上面，目前功能已经实现，如果你觉得内存还大的话可以进行压缩。 语音识别和语音合成都是用百度平台...
java的demo打印功能,急求一个用Java实现的打印及打印预览功能的Demo
急求一个用Java实现的打印及打印预览功能的Demo关注:153答案:2手机版解决时间 2021-02-13 01:40提问者夜灬零乱花寂2021-02-12 05:28急求一个用Java实现的打印及打印预览功能的Demo最佳答案二级知识专家自然卷的气质...
Ajax地名,百度地图高亮效果或者只显示中国地名怎么实现？急求！！！
height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}地图展示// 百度地图API功能var map = new BMap.Map("allmap"); // 创建Map实例map.setMapStyle({styleJson:[{"featureType": "p...
汇编语言中把数据打印到屏幕上的指令是什么啊？急求答案
汇编语言中把数据打印到屏幕上的指令是什么啊？急求答案 2012-4-22 14:52 提问者： 紫梦之雨000 | 浏览...没有这个指令，DOS中断21H的功能号AH=02h，可以实现输出一个字符，我给你一个整数输出的例子。 ;输出
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章