Whittney He

清风自来,浅笑安然

  • 主页
所有文章 友链 关于我

Whittney He

清风自来,浅笑安然

  • 主页

滚动文字

2017-12-15

前言

在很多网站都看到过滚动文字的效果,比如在天下3 中就使用了大量的滚动文字,一般用来显示数据,而且节约空间。其实,滚动文字的实现比较简单,就是控制元素的scrollLeft值或者scrollTop值。

一、横向滚动文字

html结构如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="box">
<div class="content-box">
<div class="content-original">
<ul>
<li>
<a href='#' >1.这里的鲜花都是最新鲜的,质量也是最好的!</a>
</li>
<li>
<a href='#'>2.公告:9月15日起增开夜间21点-24点交易场次</a>
</li>
</ul>
</div>
<div class="content-copy"></div>
</div>
</div>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
*{
padding:0;
margin: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.box{
width: 400px;
height: 40px;
overflow: hidden;
margin: 100px;
}
.content-box{
width: 8000%;
}
.content-box div{
float: left;
}
.content-box ul li{
float: left;
line-height: 40px;
}

jQuery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 var box = $(".box");
var contentOriginal = $(".content-original");
$(".content-copy").html(contentOriginal.html());
function scrollLeft() {
if(box[0].scrollLeft >= contentOriginal[0].offsetWidth){
box[0].scrollLeft = 0;
}else{
box[0].scrollLeft++;
}
}
var timer =setInterval(scrollLeft,40);
box.on("mouseover",function () {
clearInterval(timer);
}).on("mouseout",function () {
timer = setInterval(scrollLeft,40);
})

实现原理:

​ 1.通过改变box元素scrollLeft值(即左边卷曲进去的距离)来让元素滚动起来;

​ 2.将content-original的内容完全赋值给content-copy元素;

​ 3.当box的scrollLeft值大于content-original的实际宽度时,说明content-original已经滚动过了,后面显示的是content-copy元素的内容,这是让box的scrollLeft值为0,回到初始状态;

​ 4.否则,让box的scrollLeft值逐步加1(让里面的内容匀速滚动)。

大概原理如图所示:

yuanli

注意:存在一个问题,当显示区域的宽度大于demo1的宽度太多时,会出现一段空白后,突然显示之后的内容

二、竖向滚动文字

竖向和横向实现原理相同,只是css有些不同而已!

完整代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.2.3.min.js"></script>
<style>
*{
padding:0;
margin:0;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.box{
width: 400px;
height: 40px;
line-height: 40px;
overflow: hidden;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="box">
<div class="content-box">
<div class="content-original">
<ul>
<li>
<a href='#' >1.这里的鲜花都是最新鲜的,质量也是最好的!</a>
</li>
<li>
<a href='#'>2.公告:9月15日起增开夜间21点-24点交易场次</a>
</li>
</ul>
</div>
<div class="content-copy"></div>
</div>
</div>
<script>
var box = $(".box");
var contentOriginal = $(".content-original");
$(".content-copy").html(contentOriginal.html());
function scollTop() {
if(box[0].scrollTop >= contentOriginal[0].offsetHeight){
box[0].scrollTop = 0;
}else{
box[0].scrollTop++;
}
}
var timer = setInterval(scollTop,30);
box.on("mouseover",function () {
clearInterval(timer);
})
box.on("mouseout",function () {
timer = setInterval(scollTop,30);
})
</script>
</body>
</html>
赏

谢谢你请我吃糖果

  • HTML+CSS+Jquery

扫一扫,分享到微信

微信分享二维码
文字换行问题
无缝轮播图/文字
© 2022 Whittney He
Hexo Theme Yilia by Litten
  • 所有文章
  • 友链
  • 关于我

tag:

  • Adobe photoshop CC 2017
  • JS
  • 小程序
  • Typora
  • MYSQL
  • bootstrap
  • css
  • HTML+CSS+JS
  • jQuery
  • viewport
  • Vue.js
  • CSS3
  • Vue
  • CSS
  • h5
  • JS+jQuery
  • Clipboard.js
  • HTML+CSS+Jquery
  • 工具
  • 浏览器
  • css3
  • video
  • koa
  • ajax
  • cropper.js
  • 安全
  • vue.js
  • vue
  • js
  • javascript
  • echarts

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录(注意不是yilia根目录)执行以下命令:
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置:

      jsonContent:
        meta: false
        pages: false
        posts:
          title: true
          date: true
          path: true
          text: false
          raw: false
          content: false
          slug: false
          updated: false
          comments: false
          link: false
          permalink: false
          excerpt: false
          categories: false
          tags: true
    

  • 友情链接1
  • 友情链接2
  • 友情链接3
  • 友情链接4
  • 友情链接5
  • 友情链接6
Whittney
我就是我,不一眼的烟火!*_*