网页制作教程

图片等比例放大和缩小的代码

怎么实现滚屏无刷新动态加载内容

insertAdjacentHTML动态插入内容的使用方法

jquery获取值和控制值操作大全

现在的位置: 网页制作教程＞ JS网页特效＞正文

新闻列表按分组向上停顿式滚动的js特效

发表于2016/12/2 ⁄ JS网页特效 ⁄ 0条评论 ⁄ 热度 1,901℃

新闻列表按条进行分组，每2条一组，组和组之间有时间停顿间隔地向上滚动。

这款js特效对浏览器兼容性好。

每组的新闻条数可以根据需要更改。下面是示例代码：

<!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>
</head>
<body>
<style type="text/css">
#rollText{font:12px /20px verdana;}
</style><div id="rollAD" style="height:40px; position:relative; overflow:hidden;">
<div id="rollText" style="font-size:12px; line-height:20px;">
<a href="http://demo.webym.net/demo/20.html" title="">◇ 时尚网页模板演示</a><br />
<a href="http://demo.webym.net/demo/19.html" title="">◇ 公司官方网站模板演示</a><br />
<a href="http://demo.webym.net/demo/18.html" title="">◇ html5摄影网站模板演示</a><br />
<a href="http://demo.webym.net/demo/16.html" title="">◇ 小狗绕地球404页面演示</a><br />
<a href="http://demo.webym.net/demo/15.html" title="">◇ 蓝色网络公司网站模板演示</a><br />
<a href="http://demo.webym.net/demo/14.html" title="">◇ 软件公司网站模板演示</a><br />
<a href="http://demo.webym.net/demo/13.html" title="">◇ 简洁蓝色公司企业网站模板演示</a><br />
</div>
</div>
<script type="text/javascript">
// <![CDATA[
var textDiv = document.getElementById("rollText");
var textList = textDiv.getElementsByTagName("a");
if(textList.length > 2){
var textDat = textDiv.innerHTML;
var br = textDat.toLowerCase().indexOf("<br",textDat.toLowerCase().indexOf("<br")+3);
//var textUp2 = textDat.substr(0,br);
textDiv.innerHTML = textDat+textDat+textDat.substr(0,br);
textDiv.style.cssText = "position:absolute; top:0";
var textDatH = textDiv.offsetHeight;MaxRoll();
}
var minTime,maxTime,divTop,newTop=0;
function MinRoll(){
newTop++;
if(newTop<=divTop+40){
textDiv.style.top = "-" + newTop + "px";
}else{
clearInterval(minTime);
maxTime = setTimeout(MaxRoll,5000);
}
}
function MaxRoll(){
divTop = Math.abs(parseInt(textDiv.style.top));
if(divTop>=0 && divTop<textDatH-40){
minTime = setInterval(MinRoll,1);
}else{
textDiv.style.top = 0;divTop = 0;newTop=0;MaxRoll();
}
}
// ]]>
</script>
<br/><br/>更多代码请访问 <a href="http://www.webym.net/" target="_blank">网站源码</a>
</body>
</html>

运行代码提示：您可以先修改部分代码再运行。

声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/290.html