`

javascript滚动新闻代码

阅读更多

我在这里列出两种滚动模式:大家可以将代码拷贝到本机,建立一个html文件,直接运行就可以了。
1:一个一个的循环上移

<style>a{display:block;font-size:15px};</style>
<div id="div1" style="width:300px;height:68px;overflow:hidden">
<a href="javascript:">1,我要赚钱,</a>
<a href="javascript:">2,我要生活 </a>
<a href="javascript:">3,我要买房,</a>
<a href="javascript:">4,我要一切</a>
<a href="javascript:">5,男人就要对自己狠点</a>
</div>
<script>
var t=setInterval(myfunc,1000)
var d=document.getElementById("div1")
function myfunc(){
var o=d.firstChild
d.removeChild(o)
d.appendChild(o)
}
d.onmouseover=function(){clearInterval(t)}
d.onmouseout=function(){t=setInterval(myfunc,1000)}
</script>


2:整体循环上移

<div id="marquees">
   <a href="#">新闻一</a><br>
   <br>
   <a href="#">新闻二</a><br>
   <br>
   <a href="#">新闻三</a><br>
   <br>
   <a href="#">新闻四</a><br>
   <br>
</div>
<script language="JavaScript">

marqueesHeight=200;
stopscroll=false;

with(marquees){
   style.width=0;
   style.height=marqueesHeight;
   style.overflowX="visible";
   style.overflowY="hidden";
   noWrap=true;
   onmouseover=new Function("stopscroll=true");
   onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');

preTop=0; currentTop=0;

function init(){
   templayer.innerHTML="";
   while(templayer.offsetHeight<marqueesHeight){
     templayer.innerHTML+=marquees.innerHTML;
   }
   marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
   setInterval("scrollUp()",30);
}
document.body.onload=init;

function scrollUp(){
   if(stopscroll==true) return;
   preTop=marquees.scrollTop;
   marquees.scrollTop+=1;
   if(preTop==marquees.scrollTop){
     marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
     marquees.scrollTop+=1;
   }
}
</script>

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

分享到:
评论

相关推荐

    ASP滚动新闻代码ASP滚动新闻代码ASP滚动新闻代码

    根据给定的信息,本文将详细解释ASP滚动新闻代码的相关知识点,包括如何实现新闻滚动效果、ASP页面中的元素解析以及数据库连接等内容。 ### ASP滚动新闻代码分析 #### 1. HTML与Marquee标签 首先,我们注意到HTML...

    网页滚动新闻代码.rar

    网页滚动新闻代码是一种常见的JavaScript特效,它用于在网站上创建动态的、自动更新的信息展示区域。这种技术可以吸引用户注意力,提升网站的交互性和信息传递效率。在这个名为"网页滚动新闻代码.rar"的压缩包中,...

    javascript 滚动新闻

    使用一小段javascript做的滚动新闻,只要你了解了这段代码的用处,还可以结合AJAX和新闻类站点的RSS做一个实时更新、实实滚动的新闻展示效果

    html滚动新闻html滚动新闻

    三、JavaScript实现复杂滚动新闻 如果需要更复杂的滚动效果,如自定义速度、方向、暂停/播放等,可以借助JavaScript。比如,使用jQuery库创建一个简单的新闻轮播效果: ```html 新闻1 新闻2 &lt;!-- 更多新闻项 -...

    javascript滚动新闻

    JavaScript滚动新闻是一种常见的网页动态效果,它通过JavaScript代码实现新闻标题在页面上自动滚动或循环显示,以此提高信息的可读性和用户体验。这种技术广泛应用于网站的新闻资讯、公告栏等区域,使得有限的空间...

    jQuery实现滚动新闻代码.zip

    本项目“jQuery实现滚动新闻代码”利用jQuery的灵活性和强大的功能,结合Bootstrap 3框架,创建了一个响应式的新闻滚动效果。Bootstrap 3是Twitter推出的一个开源前端框架,它提供了丰富的预设样式、组件和...

    滑轮新闻滚动代码

    本篇文章将深入探讨“滑轮新闻滚动代码”这一主题,以及如何使用JavaScript来实现这样的功能。 首先,我们来理解什么是“滑轮新闻滚动”。这种效果通常指的是新闻标题或内容在页面的指定区域(如顶部横幅或侧边栏)...

    经典新闻滚动代码,左右,上下滚动

    实现新闻滚动代码通常有多种方法,其中最常见的是JavaScript和CSS。JavaScript可以提供动态交互,而CSS则负责样式和布局。例如,`index.html`可能是包含新闻滚动的HTML页面,而`guendong.html`可能是另一个示例或者...

    Flash XML滚动新闻代码.rar

    标题中的“Flash XML滚动新闻代码.rar”提示我们这是一个与Flash技术相关的资源,它利用XML(可扩展标记语言)来实现新闻的动态滚动效果。在Web开发中,Flash曾被广泛用于创建互动式用户界面和多媒体内容,而XML则是...

    单行jQuery循环滚动新闻代码.rar

    "单行jQuery循环滚动新闻代码.rar" 这个标题表明这是一个使用jQuery库实现的JavaScript特效,具体是让新闻标题在一行内进行循环滚动。在网页设计中,这种效果通常用于展示最新资讯或者有限空间内的多条信息,以节省...

    滚动新闻源代码 简单易用

    滚动新闻是一种常见的网页设计元素,它可以在页面上自动滚动显示一系列的文字或消息,通常用于展示最新的新闻、公告或其他重要的实时更新信息。滚动新闻在网站设计中非常实用,特别是在需要持续更新内容而不会占用...

    滚动新闻 网页特效 源代码

    本案例中,我们关注的是一个滚动新闻的网页特效源代码,这通常用于显示实时更新的信息,如新闻、公告或者天气预报等,使得用户无需刷新页面就能获取最新内容。 首先,源代码以HTML 4.0 Transitional DTD(Document ...

    Flash XML滚动新闻代码

    本主题聚焦于“Flash XML滚动新闻代码”,这通常是指利用Adobe Flash(现称为Adobe Animate)与XML文件结合,实现动态滚动新闻或信息展示的技术。 Flash,作为一个曾经流行的动画和交互式内容创作工具,允许开发者...

    网站首页全屏banner和滚动新闻代码(jQuery),自动滚动切换,也可点击按钮切换,适合网站首页使用,兼容主流浏览器

    2. **CSS样式**:配合jQuery实现的JavaScript代码,需要有相应的CSS样式来控制Banner和滚动新闻的布局、过渡动画等。 3. **图片和内容的准备**:提前准备好全屏Banner的图片和滚动新闻的内容,确保它们与JavaScript...

    Flash+XML滚动新闻代码

    在IT行业中,Flash+XML滚动新闻代码是一种常见的网页动态效果技术,它结合了Adobe Flash的图形展示能力和XML的结构化数据存储与交换功能。Flash以其丰富的动画效果和交互性深受网页设计师的喜爱,而XML则提供了方便...

    flash+xml滚动新闻代码.zip

    总结来说,"flash+xml滚动新闻代码.zip"中的实现依赖于HTML5来构建页面结构,CSS来设计样式和动画,JavaScript和jQuery来处理动态逻辑和用户交互,而XML则作为数据存储格式。这样的组合使得开发者能够创建出一个功能...

    javascript不间断文字滚动控制代码

    在标题中提到的“javascript不间断文字滚动控制代码”,是指利用JavaScript实现的一种滚动文本的控制机制。这种机制通常结合HTML和CSS一起工作,通过JavaScript定时改变文本的位置来模拟滚动效果。下面我们将深入...

    几种js文字滚动(滚动 新闻)代码共享

    以下是一个使用JavaScript实现简单垂直滚动新闻的代码片段: ```javascript // 获取要滚动的元素 var newsArea = document.getElementById('newsArea'); // 设置初始位置 var topPos = 0; // 滚动函数 function ...

    无缝滚动新闻的Javascript源代码.doc

    在提供的文件中,我们可以看到实现无缝滚动新闻的关键部分包括CSS样式和JavaScript函数。 首先,CSS样式定义了新闻列表的布局和样式。`.new_newsT`是整个新闻区域的类,设置了内边距和外边距。`.list`类用于定义...

    javascript 滚动特效

    JavaScript滚动特效是一种常见的网页交互设计,它通过JavaScript代码来实现页面元素的动态滚动效果,比如导航菜单、新闻滚动、图片轮播等。这种特效能够提升用户体验,使网站更具活力和吸引力。JavaScript滚动特效...

Global site tag (gtag.js) - Google Analytics