`
yangmeng_3331
  • 浏览: 91788 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

垂直滚动特效

阅读更多
<div id="dome">
	<div id="dome1">
    </div>
    <div id="dome2"></div>
</div>
<script type="text/javascript">
    var speed=10;  //设置向上滚动速度
	var dome=document.getElementById("dome");
   var dome1=document.getElementById("dome1");
   var dome2=document.getElementById("dome2");
	     function moveTop(){
   dome2.innerHTML=dome1.innerHTML //复制dome1为dome2
   if(dome2.offsetTop-dome.scrollTop<=0)   //当滚动至dome1与dome2交界时
   dome.scrollTop-=dome1.offsetHeight      //dome跳到最顶端
   else{
   dome.scrollTop++
   }
   }
    var MyMar=setInterval(moveTop,speed) //设置定时器
   dome.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
   dome.onmouseout=function() {MyMar=setInterval(moveTop,speed)}//鼠标移开时重设定时器,继续滚动
      </script>


scrollTop:
    有些情况下,“元素中内容”的高度会超过“元素本身”的高度,这时候我们有时就会用到scrollTop初始状态下,“内层元素的上边界”和“外层元素的上边界”重合,没有任何内容超过“外层元素的上边界”,此时scrollTop属性的值为0。当向下拖动滚动条时,超过“外层元素的上边界”的内容会逐渐增多,scrollTop值就等于这些超出的部分。
offsetTop:
    当前对象到其上级层顶部的距离,不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.
offsetHeight:
    当前元素的高度.
分享到:
评论

相关推荐

    Android TextView实现垂直滚动效果的方法

    本篇文章将详细讲解如何在Android中实现TextView的垂直滚动效果。 首先,要开启TextView的滚动功能,我们需要在XML布局文件中设置`android:scrollbars`属性。将其值设为`"vertical"`,即可启用垂直滚动条。例如: ...

    仿苹果官网页面垂直滚动效果OnePageScroll

    【标题】"仿苹果官网页面垂直滚动效果OnePageScroll"是一种网页设计技术,它模仿了苹果官方网站的单页滚动体验。这种效果使得整个网站内容在单一的页面上以垂直滚动的方式呈现,每滚动到一定位置,页面内容会平滑...

    安卓,Android TextView的垂直滚动效果和上下滚动效果,原生动画实现

    本文将深入探讨如何使用原生的Android动画技术来实现TextView的垂直滚动效果以及上下滚动效果。 一、基本概念 1. 垂直滚动:当TextView中的文本内容超出可视区域时,可以通过垂直滚动来展示未显示的部分。通常有两...

    Android 自定义View(五)实现跑马灯垂直滚动效果

    本篇文章将深入探讨如何实现一个跑马灯垂直滚动效果,这在许多应用中,如新闻标题展示或广告轮播等场景,都是一个常见的功能。 跑马灯效果,也称为滚动文字或循环播放,通常用来显示一串超出屏幕范围的文字或图片,...

    jQuery单页全屏垂直滚动特效代码.zip

    非常实用的jQuery单页全屏垂直滚动特效代码,如今非常流行的特效代码,常用于产品功能介绍 或者项目简介,此款jQuery插件滚动还是比较流畅,有些插件需要页面滚动到位才能切换页面, 此特效还是比较流畅的。插件...

    android TextView水平滚动和垂直滚动效果

    本篇文章将深入探讨如何实现TextView的水平滚动和垂直滚动效果,并通过实际案例进行说明。 首先,我们要了解TextView的基本属性。`android:singleLine`(已被弃用,但仍然可用)或`android:maxLines`属性可以限制...

    jquery响应式全屏页面垂直滚动效果支持手机端全屏页面滚动

    "jquery响应式全屏页面垂直滚动效果支持手机端全屏页面滚动"这一主题,正是关注如何利用jQuery库来实现这种效果,使得网页在不同设备上,尤其是手机端,能提供流畅、美观且适应全屏的垂直滚动体验。 jQuery是一个...

    jQuery单页全屏垂直滚动特效代码

    非常实用的jQuery单页全屏垂直滚动特效代码,如今非常流行的特效代码,常用于产品功能介绍 或者项目简介,此款jQuery插件滚动还是比较流畅,有些插件需要页面滚动到位才能切换页面, 此特效还是比较流畅的。插件...

    jQuery实现垂直滚动菜单效果.zip

    "jQuery实现垂直滚动菜单效果"是一个示例项目,它利用jQuery的事件处理和动画效果来创建一种独特的菜单导航体验,当鼠标上下移动时,菜单项会垂直滚动切换,增加了视觉吸引力和互动性。 首先,我们需要理解jQuery的...

    jQuery实现鼠标上下移动菜单垂直滚动效果.zip

    jQuery实现鼠标上下移动菜单垂直滚动效果是网页上的jquery菜单,鼠标放上上下滚动的导航菜单,鼠标放在任意一个菜单项上,该菜单项背景变色,高亮显示,竖向排列,没有怎么美化。

    android实现文字垂直滚动

    在Android开发中,有时我们需要实现文字的垂直滚动效果,特别是在显示大量文本且屏幕空间有限的情况下。这个"android实现文字垂直滚动"的demo就是一个很好的实践案例,它利用了ScrollView和TextView两个核心组件来...

    自定义TextSwitcher实现文本自动垂直滚动

    然而,标准的TextSwitcher仅支持水平滚动,如果想要实现文本的垂直滚动效果,我们就需要对其进行自定义。这篇文章将详细介绍如何自定义TextSwitcher以实现文本的垂直滚动功能。 首先,我们要理解TextSwitcher的工作...

    带按钮垂直滚动js代码

    图片垂直滚动 js代码 带按钮垂直滚动 效果不错很好用 兼容所有浏览器。

    Android仿淘宝头条垂直滚动,垂直走马灯,公告

    在Android应用开发中,"Android仿淘宝头条垂直滚动,垂直走马灯,公告"这个主题涉及到的是一个常见的UI效果,通常用于展示动态更新的信息或者广告。这种效果可以在新闻头条、公告栏或者活动推广等场景中看到,用户...

    jQuery超炫平滑过渡垂直滚动视觉差特效

    jquery.parallax-scroll是一款效果超炫的平滑垂直滚动视觉差jQuery特效。该视觉差特效使用requestAnimationFrame和CSS3 3D transitions在页面垂直滚动时制作非常平滑的过渡动画效果。

    jQuery和CSS3超炫3D整屏垂直滚动页面特效

    在这个3D垂直滚动特效中,CSS3起到了至关重要的作用。首先,它可以设置3D转换,通过`transform`属性来改变元素的三维空间位置,实现3D翻转和平移的效果。其次,`transition`属性用于定义元素从一种样式过渡到另一种...

    Android垂直滚动TextView跑马灯Demo

    本示例"Android垂直滚动TextView跑马灯Demo"就是一种常见的UI特效,它主要用于显示大量的文本内容,尤其适用于展示滚动公告、新闻标题或者广告等内容。跑马灯效果在Android中通常是通过自定义View或者对现有控件进行...

    android多种方式实现垂直滚动和水平滚动跑马灯效果

    本项目提供了一种灵活的方法来实现垂直滚动和水平滚动的跑马灯效果,适用于各种应用场景,如通知、广告展示等。下面将详细阐述实现这些效果的关键知识点。 一、自定义View 在Android中,为了实现自定义的跑马灯效果...

Global site tag (gtag.js) - Google Analytics