javascript - js常见的新闻连续滚动-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - js常见的新闻连续滚动

我想大声告诉你 2017-05-19 10:40:12

[JavaScript讨论组]

880

为什么这里滚动不连续呢

  
  
    
      
    新闻滚动
    

    
    
    

   
      

       

        标题标题标题标题标题标题1
        标题标题标题标题标题标题2
        标题标题标题标题标题标题3
        标题标题标题标题标题标题4
        标题标题标题标题标题标题5
        标题标题标题标题标题标题6
        标题标题标题标题标题标题7
        标题标题标题标题标题标题8
        标题标题标题标题标题标题9

我想大声告诉你

全部回复(3)

世界只因有你2017-05-19 10:42:12 3楼

为了看着更加直观。。我加几个css属性

 #marquee {
    overflow: auto;/*为了直观的查看滚动量*/
    border: 2px solid;   
  }
  #marqueecont{
    border: 1px solid  #f55;
  }

然后说下不能连续滚动的原因：

因为你的offsetTop用错了

offsetTop是值当前元素距离offsetParent指定的元素的上侧相对距离。。你这里就是指marqueecont这个元素，但是如果offsetParent没指定,那么marqueecont.offsetTop就是marqueecont和最外层body的上侧相对距离

所以此时marqueecont.offsetTop为100(如果按我加了边框就是102)，因为你最上面的顶了个100高的p...

实际你需要完整滚动完一个marqueecont的高度是189...滚动100你就归0了，自然不连续了。。

修改要直接看正常效果就是：

if(marqueecont.offsetHeight<=marquee.scrollTop)

最后你HTML结构最上面的p太多余。。if改为上面那样后可以最上面的100高的p删除

赞 +0

添加回复

PHP中文网2017-05-19 10:42:12 2楼

代码太长, 能把现象录制一个gif图吗?

赞 +0

添加回复

大家讲道理2017-05-19 10:42:12 1楼

建议去看看这个 http://www.cnblogs.com/seven_...
这几个高度是有点不好理解，只是因为太相似[泪]

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>