js不间断平滑地自动向上滚动
<html>
<head>
<title>scroll up auto smooth</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#scroll_outer{
width: 300px;
height: 90px;
margin: 30px auto;
overflow: hidden;
background-color: #f4f4f4;
}
#scroll_inner{
width: 100%;
}
.scroll_inner ul li{
height: 29px;
line-height: 29px;
border-bottom: 1px solid #d4d4d4;
}
</style>
</head>
<body>
<div id="scroll_outer">
<div class="scroll_inner">
<ul>
<li>this is news list items up 1</li>
<li>this is news list items up 2</li>
<li>this is news list items up 3</li>
<li>this is news list items up 4</li>
<li>this is news list items up 5</li>
<li>this is news list items up 6</li>
</ul>
</div>
</div> <script>
window.onload = function(){
var scrollOuter = document.getElementById("scroll_outer"); //get scroll_outer object
var innerElement = scrollOuter.innerHTML; //get scroll_outer innerHTML
scroll_outer.innerHTML = innerElement + innerElement; //rewrite scroll_outer innerHTML to be deboule elements
var scrollInner = document.getElementsByClassName("scroll_inner")[0]; //get scroll_inner object setInterval(scrollUp,50);
function scrollUp(){
if(scrollInner.offsetHeight == scrollOuter.scrollTop){
scrollOuter.scrollTop = 0;
}
scrollOuter.scrollTop += 1;
}
}
</script>
</body>
</html>
js不间断平滑地自动向上滚动的更多相关文章
- 原生js移动端列表无缝间歇向上滚动
在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...
- jquery插件之文字间歇自动向上滚动
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停 ...
- 列表内容自动向上滚动（原生JS）
效果展示 (鼠标移入,滚动停止:鼠标移出,滚动继续) 实现原理 1. html结构:核心是ul > li,ul外层包裹着div.因为想要内容循环滚动无缝衔接,所以在原有ul后面还要有一个一样内容 ...
- jquery实现文字自动向上滚动,鼠标放上去停止,移开继续滚动代码...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...
- 移动手机端H5无缝间歇平滑向上滚动js代码
在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...
- js标题文字向上滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- jquery无缝间歇向上滚动(间断滚动)
jquery无缝间歇向上滚动 JS部份 $(function(){ var $this = $(".renav"); var scrollTimer; $this.hover(fu ...
- js文字向上滚动代码
js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px; background:#edfafd; padding-top:2px; ...
随机推荐
- codeforces gym 100286 H - Hell on the Markets (贪心算法)
题目链接 题意:n个数分别为a[i],问是否存在一组对应的b[i],b[i]=1 || b[i]=-1,使得ai*bi的n项和为0. 题解: 先证明一个结论吧,对于1≤ai≤i+1,前面ai个数一定可 ...
- LightOJ 1197 Help Hanzo（区间素数筛选）
E - Help Hanzo Time Limit:2000MS Memory Limit:32768KB 64bit IO Format:%lld & %llu Submit ...
- db2中报SQLCODE=-530, SQLSTATE=23503错误
今天在写一个增加操作时,报错信息如下:SQLCODE=-530, SQLSTATE=23503,该sqlcode说明:“对特定的约束名指定了无效的外健值”. 项目中用的框架是SSH,新增的主对象有多个 ...
- 【XLL 文档翻译】【第1部分】 Add-in 管理器 和 XLL 接口函数
xlAddInManagerInfo/xlAddInManagerInfo12 在 Excel 会话中,每一次调用 Add-In 管理器时,系统会调用这两个函数.此函数可以在 Add-In 管理器中提 ...
- 26. Remove Duplicates from Sorted Array
题目: Given a sorted array, remove the duplicates in place such that each element appear only once and ...
- 解决Eclipse里的Maven工程pom.xml文件报：web.xml is missing and <failOnMissingWebXml> is set to true错误
打开eclipse准备进行开发时,发现项目上有个红星号,查看错误后发现报了一个:"web.xml is missing and <failOnMissingWebXml> is ...
- ios创建二维码
#import "LCTwoCodeImage.h" @implementation LCTwoCodeImage +(UIImage *) GotoCreatMyTwoCode ...
- APP测试流程（个人整理）
- iOS 获取当前展示的页面
- (UIViewController *)getCurrentVC { UIViewController *result = nil; UIWindow * window = [[UIApplica ...
- Git+VirtalBaox+Vagrant创建Linux虚拟机
文章内容来自Udacity课程:Linux Command Line Basics--Getting Started with the Shell Your own Linux box To lear ...