`
andrew.yulong
  • 浏览: 171612 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

上下滚动 标题时停留(简化版本)

    博客分类:
  • js
阅读更多
<div style="height:18px;overflow:hidden;margin-left:10px">
<div id="marqueebox">
<div class="tp"><a href="http://www.umaz.cn/13/19-1.html" target=_blank>垂直网站受宠</a></div>
<div class="tp"><a href="http://pioneer.baidu.com/" target=_blank>网吧产业</a></div>
<div class="tp"><a href="http://www.umaz.cn/13/index.html" target=_blank>垂直网站赢利</a></div>
<div class="tp"><a href="http://2008.baidu.com/" target=_blank>奥运歌曲</a></div>
<div class="tp"><a href="http://pioneer.baidu.com/" target=_blank>网吧行业赚钱</a></div>
<div class="tp"><a href="http://www.umaz.cn/13/19-1.html" target=_blank>垂直网站受宠</a></div>
<div class="tp"><a href="http://up.baidu.com/site.html" target=_blank>精品网站</a></div>
<div class="tp"><a href="http://2008.baidu.com/baike.html" target=_blank>福娃的秘密</a></div>
<div class="tp"><a href="http://www.umaz.cn/13/11-1.html" target=_blank>社区三步走</a></div>
<br clear="all"> <!--  加上这句话当循环完后会出现一段时间的空行 -->
</div>
</div>
<SCRIPT>
function startmarquee(lh,speed,delay) {
var p=false;
var t;
var sh;
var o=document.getElementById("marqueebox");
o.innerHTML
+=o.innerHTML;
o.style.marginTop
=0;
o.onmouseover
=function(){p=true;}
o.onmouseout
=function(){p=false;}
function start(){
sh 
= o.offsetHeight;
o.style.height 
= sh;
t
=setInterval(scrolling,speed);
if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
}
function scrolling(){
if(parseInt(o.style.marginTop)%lh!=0){
o.style.marginTop
=parseInt(o.style.marginTop)-1+"px";
if(Math.abs(parseInt(o.style.marginTop))>=sh/2) o.style.marginTop=0;
}
else{
clearInterval(t);
setTimeout(start,delay);
}
}
setTimeout(start,delay);
}
startmarquee(
18,20,3000);
</SCRIPT>

 

分享到:
评论

相关推荐

    上下滚动tab标题跟随联动效果,点击tab滚动切换模块

    "上下滚动tab标题跟随联动效果,点击tab滚动切换模块"这一技术实现,是UI设计中的一个常见功能,常用于增强用户的交互体验,尤其在电商、资讯类应用中广泛使用。这种效果模仿了大众点评店铺详情页的设计,旨在提供...

    标题上下滚动

    标题上下滚动是一种常见的UI设计效果,它在网页、APP或者软件界面中被广泛使用,用于显示重要的通知、提示信息或滚动新闻。这种效果使得信息能够动态地吸引用户的注意力,而无需占据屏幕的固定空间。在编程实现时,...

    delphi滚动字幕(标题滚动,上下及左右字幕滚动)

    本项目涉及了三种类型的滚动字幕实现,包括标题滚动、Label滚动以及字幕从下往上滚动。下面将详细讲解这些滚动效果的实现原理和步骤。 1. **标题滚动**: 标题滚动通常是应用程序窗口顶部的标题栏中的文字进行动态...

    易语言标签上下滚动

    在易语言中,"标签上下滚动"是一个常见的用户界面(UI)效果,常用于显示大量文本信息时,避免因信息过多而无法完全展示。 "标签"在软件开发中通常指的是一个可以显示固定或动态文本的控件,如Windows操作系统中的...

    文章标题上下轮番滚动.zip

    在网页设计中,文章标题的上下轮番滚动是一种常见的动态效果,它能够吸引用户的注意力,尤其是在新闻网站或者公告栏上,这种设计可以让重要的信息在有限的空间内得到有效的展示。接下来,我们将深入探讨如何实现这样...

    Android 实现TextView上下滚动效果

    在Android开发中,实现TextView的上下滚动效果可以让信息在有限的空间内持续展示,提升用户体验。以下将详细讲解如何实现这一功能。 首先,我们要明白TextView是Android SDK中的一个基础组件,用于显示单行或多行...

    WinForm 文本上下滚动控件

    "WinForm文本上下滚动控件"是专为实现这种功能而设计的自定义控件,它允许文本在控件区域内上下滚动,提供了一种动态显示大量文本的方式,尤其适用于日志查看、消息提示等场景。 该控件的特点在于其高度可定制性。...

    首页通知上下滚动效果

    在Android应用开发中,"首页通知上下滚动效果"是一种常见的用户界面(UI)设计,用于展示重要的、实时更新的通知信息。这种效果使得用户无需离开主页面就能获取到新消息,提高了用户体验。本篇将深入探讨如何实现...

    上下滚动中间有间隔

    "上下滚动中间有间隔"指的是在页面滚动时,每滚动到一定位置会有一个短暂的停留,这个效果可以通过设置定时器来实现。接下来我们将详细探讨如何使用JavaScript来创建这种滚动效果。 首先,我们需要理解JavaScript的...

    上下滚动公告效果.rar

    5. **响应式设计**: 当考虑不同设备和屏幕尺寸时,公告滚动效果应具备响应式设计,确保在手机、平板和桌面电脑上都能良好显示。这可能涉及到使用媒体查询(media queries)调整布局和滚动速度。 6. **性能优化**: ...

    jquery上下滚动插件

    **jQuery上下滚动插件**是一种常用的前端开发工具,主要用于实现网页元素(如`&lt;li&gt;`列表项)的平滑上下滚动效果。这种效果在展示新闻、公告或产品列表时非常常见,可以为用户带来动态浏览体验,提升网站的互动性和...

    js+css3文字上下滚动切换动画特效

    通过调整这两个文件中的参数,你可以定制文字滚动切换动画的各种细节,如动画时长、延迟、速度和颜色变化。 总的来说,"js+css3文字上下滚动切换动画特效"是一个结合了前端两种核心技术的实践案例,展示了如何通过...

    css3文字上下滚动切换特效.zip

    《CSS3文字上下滚动切换特效详解》 在网页设计中,动态效果的运用能极大地提升用户体验,其中文字滚动切换特效就是一个常见的元素。本篇文章将详细解析"css3文字上下滚动切换特效",并探讨如何利用jQuery和CSS3实现...

    js图片滚动插件支持单排图片上下滚动、图片无缝滚动

    本文将深入探讨这种支持单排图片上下滚动和无缝滚动的js图片滚动插件。 首先,单排图片上下滚动是指在网页的一行(或一列)内展示图片,并允许用户通过点击按钮或自动播放来上下滚动这些图片。这种方式使得有限的...

    Android数字上下滚动(积分效果)

    在Android开发中,有时我们需要实现一些特殊的视觉效果来提升用户体验,比如数字的上下滚动效果,这通常被用于显示积分、评分或计数等动态变化的数据。"Android数字自动滚动效果"是一个常见的需求,它能让数字在界面...

    jQuery Bootstrap响应式新闻列表文字上下滚动特效

    标题中的“jQuery Bootstrap响应式新闻列表文字上下滚动特效”指的是使用jQuery库和Bootstrap框架来创建一个适应不同设备屏幕尺寸的新闻列表,同时实现文字的上下滚动效果。这种特效常见于网站的新闻或更新部分,...

    公告上下滚动,jq

    标题中的“公告上下滚动,jq”指的是使用JavaScript库jQuery实现公告信息的上下滚动效果。这种效果常见于网站的顶部或侧边栏,用于显示滚动公告、通知或新闻更新,能够吸引用户注意力,节省页面空间。 在JavaScript...

    jQuery全屏页面滚动效果页面上下滚动效果代码jq插件

    在实现全屏页面滚动效果时,jQuery提供了强大的功能和易用的API,使得开发者可以快速构建出这样的功能。 全屏页面滚动效果的核心在于监听用户的滚动事件,并对页面内容进行相应的定位和动画处理。在jQuery中,可以...

    Android 上下滚动类新闻实现

    为了实现上下滚动的新闻效果,我们首先需要创建一个数据模型类,用于存储每条新闻的数据,如标题、内容和图片URL等。例如: ```java public class NewsItem { private String title; private String content; //...

    四屏上下滚动带标题焦点图代码.zip_Table_四屏上下滚动带标题焦点图代码

    标题中的“四屏上下滚动带标题焦点图代码”是指一种网页设计技术,它通常用于创建一个展示多张图片并带有标题的动态展示区域。这种设计适用于网站的首页或产品介绍页,可以有效地吸引用户注意力,展示重要信息。焦点...

Global site tag (gtag.js) - Google Analytics