JS和HTML5如何实现无缝滚动?

最新推荐文章于 2024-07-06 00:08:38 发布

咻的一下飞过去

最新推荐文章于 2024-07-06 00:08:38 发布

阅读量425

点赞数 3

分类专栏：ＪＳ无缝滚动ＨＴＭＬ文章标签： html js javascript html5 css

本文链接：https://blog.csdn.net/White_i/article/details/108883139

版权

本文介绍了HTML5中的marquee标签实现滚动效果及其存在的问题，以及如何通过JavaScript实现无缝滚动，通过调整scrollTop值并隐藏超出部分来达到平滑无空白的滚动效果。文章末尾鼓励读者点赞支持。

摘要由CSDN通过智能技术生成

1. 这个是html自带的滚动标签marqee。

默认向左滚动。<marquee>向左滚动</marquee>,但是，marquee标签有个致命的缺陷－－＞滚动中会有空白出现。这些空白，会让网页的界面效果大打折扣。

2. 无缝滚动

标签对象offsetHeight : 获得标签的高度;
– 标签对象scrollTop : 用来表示内容向上移动的数值,也就是说,当某个标签使用了 scrollTop该标签就会向上移动,而移动的数值为:赋给scrollTop的值
– overflow:hidden: 隐藏超出div的部分
– 组合使用overflow:hidden样式和scrollTop的js方法,就能做出"滚动"的效果了
– 当script标签代码写在了body标签下面的时候,只加载不直接执行.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS无缝滚动效果</title>
<style type="text/css">
body {
    
	font-size: 12px;
	line-height: 24px;
	text-algin: center; /* 页面内容居中 */
}

* {
    
	margin: 0px;
	padding: 0px;
	/*  去掉所有标签的marign和padding的值  */
}

ul {
    
	list-style: none;
	/*  去掉ul标签默认的点样式  */
}

a img {
    
	border: none;
	/*  超链接下，图片的边框  */
}

a {
    
	color: #333;
	text-decoration: none;
	/* 超链接样式 */
}

a:hover {
    
	color: #ff0000;
}

#news {
    
	width: 399px;
	height: 251px;
	background: url(../images/gd_mid.gif) repeat-y; /*  背景垂直排列 */
	margin-left: auto;
	/* firefox下居中 */
	margin-right: auto;
	text-align: left;
	/* 让新闻内容靠左 */
	border: solid red 2px;
}

#newst {
    
	width: 399px;
	height: 64px;
	background-color: gray;
	overflow: hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */
}

#newst a {
    
	float: right;

最低0.47元/天解锁文章

咻的一下飞过去

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
JS和HTML5如何实现无缝滚动?

1. 这个是html自带的滚动标签marqee。默认向左滚动。向左滚动,但是，marquee标签有个致命的缺陷－－＞滚动中会有空白出现。这些空白，会让网页的界面效果大打折扣。2. 无缝滚动标签对象.offsetHeight : 获得标签的高度;– 标签对象.scrollTop : 用来表示内容向上移动的数值,也就是说,当某个标签使用了 scrollTop该标签就会向上移动,而移动的数值为:赋给scrollTop的值– overflow:hidden: 隐藏超出div的部分– 组合使用overfl
复制链接

扫一扫