<!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>
<script type="text/javascript" src="http://221.130.163.175/publish/www/resource/res/js/jquery.min.js"></script>
<style>
/* 多行滚动 */
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv li{height:25px;padding-left:10px;}
#scrollDiv2{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
#scrollDiv2 li{height:25px;padding-left:10px;}
</style>
<script type="text/javascript">
// 多行滚动
(function($){
$.fn.extend({
Scroll:function(opt,callback){
if(!opt) var opt={};
var _this=this.eq(0).find("ul:first");
var lineH=_this.find("li:first").height(),
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),
speed=opt.speed?parseInt(opt.speed,10):1000, //卷动速度，数值越大，速度越慢（毫秒）
timer=opt.timer?parseInt(opt.timer,10):5000; //滚动的时间间隔（毫秒）
if(line==0) line=1;
var upHeight=0-line*lineH;
scrollUp=function(){
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i<=line;i++){
_this.find("li:first").appendTo(_this);
}
_this.css({marginTop:0});
});
}
_this.hover(function(){
clearInterval(timerID);
},function(){
timerID=setInterval("scrollUp()",timer);
}).mouseout();
}
})
})(jQuery);
(function($){
$.fn.extend({
Scroll2:function(opt,callback){
if(!opt) var opt={};
var _this=this.eq(0).find("ul:first");
var lineH=_this.find("li:first").height(),
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),
speed=opt.speed?parseInt(opt.speed,10):1000, //卷动速度，数值越大，速度越慢（毫秒）
timer=opt.timer?parseInt(opt.timer,10):5000; //滚动的时间间隔（毫秒）
if(line==0) line=1;
var upHeight=0-line*lineH;
scrollUp2=function(){
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i<=line;i++){
_this.find("li:first").appendTo(_this);
}
_this.css({marginTop:0});
});
}
_this.hover(function(){
clearInterval(timerID);
},function(){
timerID=setInterval("scrollUp2()",timer);
}).mouseout();
}
})
})(jQuery);
$(document).ready(function(){
$("#scrollDiv").Scroll({line:1,speed:1000,timer:3000});
$("#scrollDiv2").Scroll2({line:1,speed:1000,timer:3000});
});
</script>
</head>
<body>
<!-- 多行滚动 -->
<div id="scrollDiv">
<ul>
<li>这是公告标题的第一行</li>
<li>这是公告标题的第二行</li>
<li>这是公告标题的第三行</li>
<li>这是公告标题的第四行</li>
<li>这是公告标题的第五行</li>
<li>这是公告标题的第六行</li>
<li>这是公告标题的第七行</li>
<li>这是公告标题的第八行</li>
</ul>
</div>
<br/>
<div id="scrollDiv2">
<ul>
<li>这是公告标题2的第一行</li>
<li>这是公告标题2的第二行</li>
<li>这是公告标题2的第三行</li>
<li>这是公告标题2的第四行</li>
<li>这是公告标题2的第五行</li>
<li>这是公告标题2的第六行</li>
<li>这是公告标题2的第七行</li>
<li>这是公告标题2的第八行</li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
总的来说，"基于DIV的JS文字滚动特效"是一个结合了HTML、CSS和JavaScript技术的实例，展示了如何通过编程实现动态的用户界面效果。这种特效不仅提高了网页的视觉吸引力，也为用户提供了更友好的阅读体验。理解和掌握...
通过分析和理解这些代码，开发者可以学习到如何编写跨浏览器的JavaScript文字滚动效果，以及在实际项目中如何解决兼容性问题。这不仅是提升JavaScript技能的好途径，也是了解浏览器差异和优化技术的实践机会。
在本场景中，"js文字滚动插件制作新闻公告列表scroll文字间歇滚动"涉及到的核心技术是利用JS实现文字滚动效果，这通常用于展示新闻公告列表，以有限的空间显示更多的内容。以下将详细讲解如何制作这样的插件以及涉及...
"js文字横向滚动特效，头尾停止"是利用JavaScript和jQuery库实现的一种特定效果，当文字滚动到页面的边缘时会自动停止。 jQuery是一个轻量级、高性能的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互...
在创建文字滚动效果时，通常会选取一个包含文字的容器元素，如`<div>`，然后利用JavaScript来改变这个元素的样式，尤其是其`top`或`bottom`属性，以实现文本的滚动效果。 滚动插件的核心代码通常包括以下几个部分：...
总的来说，"js+css3文字上下滚动切换动画特效"是一个结合了前端两种核心技术的实践案例，展示了如何通过JavaScript的动态控制与CSS3的动画效果，创造出引人注目的网页交互体验。无论是用于网站标题、通知栏还是其他...
本项目名为“js文字滚动一次一行特效”，它利用HTML、CSS和JavaScript技术实现了类似抽奖公告的文字滚动效果，使得信息以逐行滚动的方式呈现，既具有视觉吸引力，又便于用户阅读。 首先，我们要理解HTML在这个效果...
"图片文字滚动特效JS大杂烩"就是一个专门收集了多种图片和文字滚动特效的资源包，它提供了丰富的JavaScript代码示例，适用于那些希望为自己的网站增添动态效果的开发者。以下是对这些知识点的详细解释： 1. **图片...
在这个场景中，"js文字滚动制作js scroll单排文字滚动向上间歇滚动"涉及到的是使用JavaScript实现一种常见的网页特效——文字滚动。 文字滚动是一种常见的网页动态效果，它可以使页面上的文本按照设定的方向（如...
js 特效 html 特效 文字滚动显示 js 特效 html 特效 文字滚动显示
JavaScript是一种广泛应用于网页和网络应用的脚本语言，它能够为网页添加动态功能，如交互式表单、动画效果和各种用户界面...掌握这些知识点后，你可以创建出自己的JavaScript文字滚动效果，为网页增添动态和互动性。
"js实现文字内容无缝滚动动画效果"是一个常见的JavaScript技术应用，主要用于创建一种视觉上连续、无中断的文字滚动展示，常见于新闻网站或者公告栏。这种效果使得有限的空间内可以展示更多的信息，而不会显得拥挤。...
标题提到的"图片滚动，文字滚动，图片横竖滚动，超好的横竖同时无缝隙滚动代码，js，滚动特效"是网页设计中的常见技术，主要用于创建引人注目的交互式内容。这种技术主要依赖于JavaScript，一种广泛用于客户端网页...
以下是对"网页文字滚动的10种效果js实现"的详细解读： 1. **淡入淡出滚动**：此效果使文字在页面上逐渐显现，然后淡出，创造出优雅的视觉过渡。通过调整透明度变化的时间和速度，可以调整效果的平滑度。 2. **向上...
JavaScript文字滚动是一种常见的网页动态效果，它可以使文本在页面上以滚动的方式显示，常用于新闻更新、公告栏或者页面的标题展示。这种效果是通过JavaScript编程实现的，它可以为网页增添交互性和动感，吸引用户的...
标题"几种js文字滚动(滚动 新闻)代码共享"表明我们将探讨如何利用JavaScript实现文字滚动效果，通常这种效果也被称为滚动新闻或滚动公告。 JavaScript文字滚动的基本原理是通过改变文本元素的位置或透明度，使文字...
本文将深入探讨如何使用JavaScript（简称js）来创建一个双行关联的向上文字滚动效果，以及如何实现多组文字滚动列表。我们将通过分析标题、描述以及提供的资源文件名来讲解这一技术。 首先，我们要理解“js文字滚动...
在本文中，我们将深入探讨如何使用JavaScript实现单行文字的滚动效果，这是一种常见的动态显示信息的方式，尤其适用于有限的空间展示大量文本。 首先，我们需要理解基本的HTML结构，因为JavaScript通常与HTML和CSS...
总的来说，制作一个“js文字滚动插件制作双行关联向上文字间歇滚动”涉及到JavaScript基础、DOM操作、动画处理、浏览器兼容性和插件设计等多个方面。通过深入理解这些知识点，并结合实际项目需求，我们可以构建出一...