定时器实现文字的无缝滚动

缺乏、安全感 2022-06-02 02:36 237阅读 0赞

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>test</title>  
<style type="text/css">  
\*\{  
margin: 0;  
padding: 0;  
\}  
\#demo\{  
width: 200px;  
height: 25px;  
border: 1px solid red;  
margin-top: 200px;  
margin-left: 550px;  
overflow: hidden;  
\}  
ul\{  
list-style: none;  
width: 100%;  
height: 25px;  
line-height: 25px;  
text-align: center;  
margin-top: 0;  
cursor: pointer;  
\}  
</style>  
</head>  
<body>  
<div id="demo">  
<ul>  
<li>11111111111</li>  
<li>22222222222</li>  
<li>33333333333</li>  
<li>44444444444</li>  
<li>55555555555</li>  
<li>66666666666</li>  
</ul>  
</div>  
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  
<script type="text/javascript">  
//思路:通过更改ul的margin-top来实现让ul进行滚动的效果  
    var key=true;  
    var num=0;//距离  
    move();  
    function move()\{  
if(key==true)\{  
           num -= 4;  
       \}  
       if(num<=-125)\{  
           num = 0;  
       \}  
       $("ul").css("margin-top",num + "px");  
       setTimeout(move,100);//0.1秒之后再次调用这个函数  
    \}  
    $("ul").mouseenter(function()\{  
console.log("进入");  
key=false;  
    \});  
    $("ul").mouseleave(function()\{  
console.log("离开");  
key=true;  
    \});  
  
  
//方法二:  
//var speed=0;  
//function move()\{  
//    speed-=4;  
//    if(-speed>=125)\{  
//speed=0;  
//    \}  
//       $("ul").css("margin-top",speed + "px");  
//\}  
//setInterval(move,100);  
</script>  
</body>  
</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue文字间歇无缝向上逐个滚动

<div class="marquee-wrap"> <ul class="marquee-list" :class="{'animate-up':

刺骨的言语ヽ痛彻心扉/ 2022年12月24日 01:57/ 0 赞/ 393 阅读

相关 css3 文字横向无缝滚动

<div class="notice-container"> <div class="header-notice-marquee" id="notice-

悠悠/ 2022年10月25日 01:24/ 0 赞/ 344 阅读

相关 vue文字无缝滚动插件vue-seamless-scroll

订阅专栏（1）安装执行命令 npm install vue-seamless-scroll --save （2）在main.js文件里面引入使用： impo

￡神魔★判官ぃ/ 2022年09月07日 14:56/ 0 赞/ 612 阅读

相关 Javascript基础——利用定时器实现的图片无缝滚动(offsetLeft)

1、无缝滚动原理：（1）让div动起来，让ul一直向左/向右移动；（2）即利用定时器让物体从左到右或从右到左进行滚动。采用offsetLeft——如oU

柔光的暖阳◎/ 2022年07月15日 06:30/ 0 赞/ 190 阅读

相关 JavaScript-定时器的使用之无缝滚动

JavaScript\-定时器的使用之无缝滚动知识点： offsetLeft：获取左边距。用定时器让物体连续移动。代码如下： ![这里写图片描述][S

﹏ヽ暗。殇╰゛Y/ 2022年06月11日 07:46/ 0 赞/ 237 阅读

相关 10行原生JS实现文字无缝滚动

废话不多说，直接上代码 <section class="pro_quota_tip"> <div class="tip_box"> <

向右看齐/ 2022年06月09日 13:11/ 0 赞/ 202 阅读

相关定时器实现文字的无缝滚动

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> <styl

缺乏、安全感/ 2022年06月02日 02:36/ 0 赞/ 238 阅读

相关 js实现无缝向上滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

矫情吗；*/ 2022年05月13日 08:36/ 0 赞/ 246 阅读

相关 Vue无缝滚动

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQx

我就是我/ 2021年09月03日 04:01/ 0 赞/ 464 阅读

相关 js实现图片无缝滚动

js实现图片无缝滚动实现原理：图片滚动原理同图片轮播原理，同样也适用于文字滚动等一系列滚动，通过复制最后一张图片或最后一堆文字插入第一行，或复制第一张图片或一堆文字插...

红太狼/ 2020年06月03日 13:47/ 0 赞/ 765 阅读