`
xiang37
  • 浏览: 428298 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

通知公告 上下循环滚动

阅读更多
代码一:

<div id=design style="OVERFLOW: hidden; WIDTH: 248px; HEIGHT: 237px;">
<div id=design1 style="OVERFLOW: hidden">

滚动内容


</div>
<div id=design2>
</div>
</div>
<script>
var speed=30
design2.innerHTML=design1.innerHTML
function Marquee2()
{
if(design2.offsetTop-design.scrollTop<=0)
design.scrollTop-=design1.offsetHeight
else
{
design.scrollTop++
}
}
var MyMar2=setInterval(Marquee2,speed)
design.onmouseover=function()
{
clearInterval(MyMar2)
}
design.onmouseout=function()
{
MyMar2=setInterval(Marquee2,speed)
}
</script>

 

代码二:

<div id="marquees">

<!--

滚动内容

-->

</div>

<script language="JavaScript">

marqueesHeight=160;

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>
 
分享到:
评论

相关推荐

    html上下循环滚动的公告栏效果

    js实现的滚动公示栏效果,用于公告栏等的现实

    JavaScript实现公告栏上下滚动效果

    在当今的互联网应用中,公告栏上下滚动效果广泛应用于各类网站的公告或通知区域,以动态展示重要信息。本文将详细介绍如何使用JavaScript和jQuery来实现公告栏内容的自动滚动效果。 首先,我们需要理解公告栏滚动...

    jQuery实现的上下滚动公告栏

    为了确保内容循环滚动,我们需要在滚动到顶部或底部时重置元素的位置。 ```javascript var scrollSpeed = 500; // 滚动速度(毫秒) var distance = 50; // 每次滚动的距离(像素) function scrollAnnouncement()...

    不间断上下滚动公告代码.rar

    【描述】"不间断上下滚动公告代码"意味着这个代码将创建一个持续循环的滚动效果,信息会沿着设定的方向(向上或向下)不断地移动,为网站增添动态感。这种滚动公告可能适用于网站的头部、底部或者侧边栏,用以显示...

    winform 实现屏幕(字幕)上下滚动(来回滚动)

    winform实现窗体界面 字幕上下来回滚动。可随意控制显示内容的大小,可随意控制窗体界面大小。代码简单易懂。这里是用的.NET 4.0版本,如果你只安装别这个更低的版本,只需要把代码用记事本打开,copy代码,就行了 ...

    WPF自定义滚动文字控件(支持方向上下左右滚动)

    设置动画的Duration为`ScrollSpeed`,并在动画完成时设置其To值回原点,形成无限循环滚动的效果。 5. **代码实现** 在控件的代码-behind中,添加动画的启动和停止方法,以及处理`ScrollDirection`改变的事件。当...

    自适应宽度多列文字循环滚动实例

    "自适应宽度多列文字循环滚动实例"是一个典型的网页元素,它通常用于网站的公告或通知区域,为用户提供动态且吸引人的信息展示方式。这个实例不仅具有良好的视觉效果,而且考虑了浏览器的兼容性,确保在不同设备和...

    vue实现公告栏文字上下滚动效果的示例代码

    在Vue.js框架中,实现公告栏文字上下滚动的效果,可以通过利用Vue的动态组件和过渡效果来完成。这个功能在许多网页应用中常见,用于展示滚动通知或公告。下面将详细介绍如何使用Vue实现这一效果。 首先,我们需要...

    js特效网站公告滚动

    例如,我们可以设置定时器(`setInterval`函数),每隔一定时间就调整`&lt;li&gt;`元素的`top`或`bottom`属性,使其沿着垂直方向上下移动,形成循环滚动的效果。同时,为了实现无限循环,我们需要在元素滚出可视区域时将其...

    jquery上下翻动轮播公告栏

    【jQuery上下翻动轮播公告栏】是一种常见的网页动态效果,用于展示滚动公告或消息,提升用户交互体验。在这个项目中,我们利用JavaScript库jQuery来实现这一功能,它以其简洁的API和强大的DOM操作能力而广受欢迎。接...

    安卓滚动公告

    标题中的"安卓公告展示支持上下滚动"意味着我们要讨论的是一个能够自动循环滚动文本的控件,这在Android中通常通过自定义View或者使用现成的第三方库实现。 描述中提到"下载直接可以适应,已测试",这可能是指提供...

    文本滚动显示.rar

    文本滚动显示技术允许用户在有限的屏幕上查看超过屏幕容量的大量文本信息,通过上下滚动、左右滚动或者循环滚动的方式呈现。以下是对这一主题的详细探讨: 一、文本滚动显示的基本原理 文本滚动显示基于计算机图形...

    用JavaScript和ASP制作连续滚动的字幕

    在网站建设和维护过程中,滚动字幕是一种常见的展示方式,尤其适用于新闻公告、活动通知等需要实时更新信息的场景。传统的HTML `&lt;marquee&gt;` 标签虽然能够实现基本的滚动效果,但在用户体验方面存在一定的局限性,...

    微信小程序-滚动消息通知的实例代码

    微信小程序滚动消息通知是指在微信小程序中实现的一个滚动消息通知功能,通过使用swiper组件来实现上下滚动的效果。本篇文章将详细介绍微信小程序滚动消息通知的实例代码,并对相关知识点进行详细解释。 一、swiper...

    类似跑马灯Led灯的滚动效果demo

    在编程中实现跑马灯效果,通常涉及到字符串的循环滚动和定时更新。 在本示例中,“类似跑马灯Led灯的滚动效果demo”是一个用于按钮的程序,可以自定义显示的文字内容。用户可以根据需求输入一个字符数组,程序会...

    MarqueeView.zip

    2. **循环滚动**:默认情况下,MarqueeView支持无限循环滚动,确保用户在任何时间点进入应用时都能看到滚动中的内容。 3. **内容更新**:可以实时动态地更新公告内容,无需重新创建或刷新整个组件,提高了效率。 4...

    跑马灯大合集(上下左右)

    跑马灯,也被称为滚动公告或滚动条,是一种常见的网页动态效果,用于展示滚动文本、图片或其他信息。在网页设计中,跑马灯通常用来吸引用户的注意力,展示新闻更新、广告或者重要通知。jQuery 是一个广泛使用的 ...

    ticker-master.zip

    开发者可以通过简单的API调用来实现文本的滚动播放,比如设置滚动速度、方向(左右或上下)、是否循环滚动等。 1. **滚动动画**:`Ticker`支持水平和垂直两种滚动方向,可以模拟股票行情显示屏的滚动效果。通过调整...

    推送跑马灯效果不错可用

    跑马灯,也称为走马灯或滚动公告,源自早期的电子显示屏,通过循环滚动显示文字或图像来传达信息。在数字时代,这种效果通常通过CSS(层叠样式表)和JavaScript实现。CSS用于定义元素的布局和样式,而JavaScript则...

    jQuery文字轮播特效

    文字轮播是一种常见的网页特效,它可以在固定区域内,使文字内容像跑马灯一样循环滚动,以展示更多的文字信息。该技术在多种场景下有广泛应用,如新闻滚动、通知公告、在线广告等。 文章开始提到,作者原创了一套...

Global site tag (gtag.js) - Google Analytics