admin 管理员组文章数量: 1184232
2024年2月23日发(作者：局部变量包括)
学习情景四 图片（文字）无缝滚动
4.1 任务目标
4.1.1 任务引入
滚动效果，是网页中很常见，用途也很广的一种效果。就是HTML自带的标签也有专门表示滚动的标签
但是，marquee标签有个致命的缺陷－－滚动中会有空白出现。这些空白，会让网页的界面效果大打折扣。
如果能让滚动的时候没有空白，那么整个页面效果就舒服多了！这种没有空白的滚动，我们通常称之“无缝滚动”――就是“没有缝隙（空白）的滚动效果”。
怎么才能让图片滚动的时候没有空白呢？
HTML自带的滚动标签
现在很多网站都喜欢使用无缝滚动的图片或者文字来突出内容，以此来吸引浏览者的注意。特别是一些企业网站的产品展示、人物介绍或者新闻公告部分，更是滚动特效的常用部分。
图4.1.1－1 某网站的产品展示部分――该部分就是用js实现了产品图片的水平滚动。
图4.1.1－2 某网站的客户动态部分――该部分用js实现了客户信息的垂直向上滚动。
4.1.2 任务目标
利用js效果，实现如下样式的新闻动态向上无缝滚动。
图 4.1.2－1 新闻动态无缝滚动效果图
如果没有特殊的要求：
水平滚动一般是向左滚动，垂直滚动一般是向上滚动。
因为这样符合人们的“从左到右，从上到下的阅读习惯”。
小提示
4.2 设计思路
任何网站网页都是从效果图切片后，再通过各种方式布局而成（现在主要使用div＋css）。一个特效做的再好看，它的“前身”还是一张静静的效果图。
（本例效果图见源码中“学习情景四无缝滚动”――“无缝滚动效果图.jpg”,并附有psd源文件以供参考切片）
因此，我们在制作绚丽的JS特效的先前步骤一般是：
1. 根据策划和页面的效果图，完成效果图的切片，做成静态html页面――这里采用时下流行的div＋css布局。
2. 在html静态页面的基础之上，再添加JS代码，完成特效。
也就是说，js特效是在html结构成型之后，再添加上去的。不同的结构，要表现出同样的js效果，可能会需要编写不同的js特效代码。
4.3 任务实施
4.3.1 切片布局
1. 用photoshop打开源码中“学习情景四－无缝滚动”的效果图
2. 切片结构分析
因为该新闻部分是圆角，并且有些图片的修饰在上面。因此，整个新闻部分被分成三个部分。如下图所示
图 4.3.1－1 新闻动态无缝滚动效果图分析
那么我们在切片的时候，分成三块来切片。
其中头部和底部各切一块。
中间比较特殊，因为考虑到切片要尽量的小点，又利于内容的扩展。所以，中间部分的背景不宜切成一整块。最好的方法就是切一块高度为1px的图片，让它垂直平铺作为新闻的背景。（具体的切片，同学们可以参考源码。）
另外，“更多”部分也是一个图片切片完成！
3. 在DW中完成新闻板块的布局
这里采用时下流行的DIV＋CSS布局。
先在DW中创建站点，然后建立相关的css文件和html文件，站点大致结构如下：
，也需要把它切片出来。
图 4.3.1－2 站点参考结构
先把css文件，在DW站点中，拖到html文件里的
标签之间。把css文件跟html文件链接起来。然后编写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;
}
4.
开始新闻动态框架布局
先用一个div，id=”news”，用来装套整个新闻动态。
因为新闻动态被分成了三个部分，所以再使用三个div分别来表示新闻动态的 头部、中间和底部部分。并且分别使用三个id来标识它们。HTML代码如下：
5. 整体样式设置
根据效果图切片，先设定好新闻动态整块的宽高和背景。
#news{
width:399px;
height:251px;
background:url(../images/gd_) repeat-y; /* 背景垂直排列 */
margin-left:auto; /* firefox下居中 */
margin-right:auto;
text-align:left; /* 让新闻内容靠左 */
}
需要说明的是：为了内容的扩展性，新闻中间部分的背景，被设为了整个新闻动态的背景。
6. 新闻头部制作
这里因为有个more的图片，所以头部的图片是个背景，背景之上放的是more图片。这个more是个超链接结构，通过点击它可以打开更多的新闻列表。
修正头部html结构如下：
…其他部分代码省略…
…其他部分代码省略…
设置头部样式
#news_t{
width:399px;
height:64px;
background:url(../images/gd_) no-repeat;
overflow:hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */
}
#news_t a{
float:right;
margin-right:30px;
margin-top:30px;
display:inline;
}
图 4.3.1－3 新闻动态头部效果
7. 新闻底部制作
这部分因为没有内容，所以可以添加 来填充内容。设置好宽高后，可以直接给底部添加背景。
底部样式如下：
/* 底部样式 */
#news_d{
width:399px;
height:16px;
overflow:hidden; /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */
background:url(../images/gd_) no-repeat;
}
图 4.3.1－4 添加了新闻动态底部样式（还未添加中间内容）
8. 中间部分制作
通过计算得知，中间部分的高度为 251px－64px－16px＝171px。
但是，内容上只设计了6行的高度（行高设为24px）。
因此，中间内容高为 6×24px＝144px，距离上面下面，各为 13px 和 14px。
注意: 通过观察效果图发现，中间部分的宽度并没有达到新闻动态的宽度，而是要窄点。
图 4.3.1－5 中间部分分析
添加中间部分样式
/* 中间样式 */
#news_z{
height:144px;
width:335px;
margin-left:35px;
margin-top:13px;
margin-bottom:14px;
overflow:hidden; /* 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
}
添加新闻列表。对于列表，一般使用ul和li来做。
- 新闻滚动内容内容内容演示12010-01-20
- 新闻滚动内容内容内容演示22010-01-20
- 新闻滚动内容内容内容演示32010-01-20
- 新闻滚动内容内容内容演示42010-01-20
- 新闻滚动内容内容内容演示52010-01-20
- 新闻滚动内容内容内容演示62010-01-20
…….
给新闻列表添加样式
#news ul li { height:24px;}
#news ul li a{
width:180px;
float:left;
display:block;
overflow:hidden;
background:url(../images/) 0px 8px no-repeat;
text-indent:15px;
height:24px;
}
#news ul li span{
float:right;
color:#999;
}
这样，一个静态的新闻列表就完成了。
图 4.3.1－6 静止的新闻动态
不过，它只是一般的新闻动态列表，还不会滚动。接下来就添加相关的JS代码。
4.3.2 添加JS代码
1. js滚动结构分析
无缝滚动最大的特色就是能长久的滚动下去，像是一个无限循环一样。
当然，实际上的循环是不可能无限的。只是通过手段，欺骗了浏览者的眼睛――这个嘛，稍后会有详细解释。
图 4.3.2－1 一双骗人的眼睛
为了达到欺骗的目的,这里采用了两个UL列表来做新闻。通过两个新闻内容的滚动来模拟循环滚动。一个在上，一个在下，并且给它们分别用两个id标识，“p1”和“p2”。
修改新闻列表html代码如下：
- 新闻滚动内容内容内容演示12010-01-20
- 新闻滚动内容内容内容演示22010-01-20
- 新闻滚动内容内容内容演示32010-01-20
- 新闻滚动内容内容内容演示42010-01-20
- 新闻滚动内容内容内容演示52010-01-20
- 新闻滚动内容内容内容演示62010-01-20
大家会发现这里后的新闻内容html有两个特点：
1) id为p1的ul在上，p2这个ul在下。
2) p2这个ul里没有任何内容，是空白一片。
原因是：
1) 上下滚动新闻，因此就让两个新闻内容ul上下排列。
2) 如果直接p2也添加上内容的话，会给页面增加下载量，同时也给后台人员增加工作量。因此，p2就先暂时是空白内容，其具体的内容可以在稍后通过js代码添加上去。
那么接下来的疑问就是，两个ul怎么来实现循环滚动的呢？
2. 先让新闻滚动起来
在html里，每个成对的标签，比如这里新闻的中间部分
scrollTop，它是用来表示内容向上滚动的数值。
内容
Top
滚动区域
DIV
我们先让新闻滚动一点。添加如下js，在新闻滚动结构的后面：
…..省略代码…
这里把js代码，写在了html结构的后面，是因为：
Js代码要直接获取html结构div的id。
如果这里js代码，写在了html结构前面。当js代码运行的时候，html结构还没出现，js会获取不到div的id。
小提示
可是，添加了代码后，同学们会发现新闻内容会没有变化。
为什么呢？？？是代码错了么？？
仔细想下，我们的新闻目前只有6条，而6条新闻刚刚好全部出现在新闻中间部分，浏览者正好全部看到它们，所有新闻一目了然。既然内容都在这里了，有必要还需要滚动吗？
滚动的意义就在于让浏览者看到被滚动区域隐藏的内容，因此：
小提示
当内容全部出现在滚动区域之内的时候，内容是不会滚动的。
既然内容全部都出现的时候，不会滚动。那么，我们就来增加几条新闻。把原来的6条新闻增加为10条。
可是新闻内容多了不会撑高中间部分的div么？
当然不会啦。不要忘了我们给中间部分的div（id为 news_z）,添加了一条样式：
overflow:hidden;
它的作用就是，让超出div高度的部分隐藏（hidden）起来。
修改html内容如下：
- 新闻滚动内容内容内容演示12010-01-20
- 新闻滚动内容内容内容演示22010-01-20
- 新闻滚动内容内容内容演示32010-01-20
- 新闻滚动内容内容内容演示42010-01-20
- 新闻滚动内容内容内容演示52010-01-20
- 新闻滚动内容内容内容演示62010-01-20
- 新闻滚动内容内容内容演示72010-01-20
- 新闻滚动内容内容内容演示82010-01-20
- 新闻滚动内容内容内容演示92010-01-20
- 新闻滚动内容内容内容演示102010-01-20
再打开页面看看：
图 4.3.2－1 新闻内容往上滚动了10个像素
3. 让新闻不停的向上滚动
新闻内容滚动了，可是只会滚动一下。如何来让它不停的滚动呢？
这里就要用到js内置的函数 setInterval。同时，我们也增加了一个变量，命名为dis，用来表示滚动的距离。
同时，增加一个函数，让它来让变量dis值不停的变大（内容滚动的越多）。
修正js代码如下：
…..省略代码…
内容是滚动了，不过当内容全部滚动完毕后，又会停止下来。依然达不到循环滚动的
目的。
当内容全部滚动完毕后，正常情况下，滚动会自动停止。
小提示
4. 让内容循环滚动起来
循环滚动的原理其实很简单，就是用2个内容来轮流滚动。“内容1” 滚动完了就让 “内容2” 开始滚动，然后又是“内容1”滚动。
原理示意图如下：
图 4.3.2－3 滚动示意图1――最开始的时候
图 4.3.2－4 滚动示意图2――内容1开始向上滚动
图 4.3.2－4 滚动示意图3――内容1滚到底，内容会停止滚动
图 4.3.2－5 滚动示意图4――这时产生第二个内容区，内容2跟内容1完全一样
图 4.3.2－6 滚动示意图5――滚动区域内容增加了“内容2”，因此会继续滚动
图 4.3.2－7 滚动示意图6――当“内容1”刚好移出区域外的时候…
图 4.3.2－8 滚动示意图7――让“内容1”回到“起始点”，重新滚动。此时，Top为0。
根据这个原理，修改js代码如下：
…..省略代码…
运行下页面。可以看到，我们的新闻内容已经开始了循环滚动。
不过还不够完美。
因为，一般情况下，鼠标放在滚动内容上的时候，滚动会停止的。因此，我们继续添加相关的鼠标放上去和鼠标离开滚动区域的事件代码：
……
新闻内容无缝滚动特效，大功告成～！
作者联系qq：565453278 九天翔龙，现某高校计算机教师
版权声明：本文标题：无缝滚动-js原理分析和css分析 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1708684554a529334.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
更多相关文章
html表格数据垂直居中显示,html如何设置表格单元格内容垂直居中?
成为 Web 开发大师你必须知道的 7 件事情曾经是这样的,懂点编码,并可以偶尔耍点酷,那么你就会被认为是一个Web开发大师.但是现在,情况再也不是这样的了.Web开发已经朝着主流方向发展,开发人员数量显著增加.这意味着,如果你想成为这个领
Becompare技巧[Beyond Compare 4 试用期过的解决办法][十六进制比较内容不交叉一对一对比]
Beyond Compare 4 试用期过的解决办法 本文摘录于：https:blog.csdnqq_30715329articledetails80245111 一般的 Beyond Compare 4，只有 30 天试用
dSPACE仿真流程介绍（dSPACE软件介绍、仿真演示、自动化API接口使用）
dSPACE仿真流程步骤一、dSPACE软件简介二、仿真流程简介三、ModelDesk简介1、创建工程2、生成的文件夹3、仿真模型平台选择4、道路5、场景6、参数设置四、MotionDesk简介1、打开工程2、仿真场景更新3、运行Model
自制浏览器插件：实现网页内容高亮、自动整理收藏夹功能
自制浏览器插件：实现网页内容高亮、自动整理收藏夹功能 以 Chrome 扩展 Manifest V3 为例，构建一个实用型插件：在网页上高亮选中的内容，
linux搜索文件内容中关键字,linux系统搜索文件中关键字的位置
.net程序员转行做手游开发经历(二)上篇主要介绍自己个人的经历,这篇主要讲下学习新语言的过程. 上次说到最终选择的语言是swift,框架用spritekit,上次有网友对为什么选择用这俩呢,为什么不用cocos和un
linux下如何把文件清空,linux 系统下，如何清空文件内容
linux几种快速清空文件内容的方法linux几种快速清空文件内容的方法 几种快速清空文件内容的方法: $ : > filename #其中的 : 是一个占位符, 不产生任何输出. $ > filename $ echo &am
惠普（HP）打印机驱动安装+答题卡尺寸设置： LaserJet MFP M436n（史上最详细操作演示）
1. 打印机驱动安装1.1 打开驱动光盘，双击击 setup 应用程序（驱动也可以直接从网上下载（搜索打印机型号：LaserJet MFP M436n
告别机器人味：如何让ChatGPT写出有灵魂的内容
目录 ChatGPT的一些AI味道小问题 1.提供编辑指南 2.提供样本 3.思维链大纲 4.融入自己的想法 5.去除重复增加多样性 6.删除废话 ChatGPT的一些AI味道小问题 大多数宝子们再使用ChatGPT进行写作时
scrapy 中不同页面的拼接_极简Scrapy爬虫2：爬取多页内容
运行环境：* Python 2.7.12* Scrapy 1.2.2* Mac OS X 10.10.3 Yosemite继续爬取Scrapy 1.2.2文档提供的练习网址：可以暂时不用考虑爬虫被
彻底告别卡顿和尴尬，Scroll-Lock助你畅享Adobe Flash Player体验！
推荐项目：scroll-lock —— 精准控制滚动的神器 在前端开发中，经常会遇到这样的场景：当弹框出现时，希望背景页面停止滚动，保持用户体验的专注度。针对这一需求，我们发现了一个强大的开源工具—— scroll
Adobe Flash Player与Chrome并肩作战：一文解析超实用快捷键组合
Chrome快捷键整理 1、Chrome窗口和标签页快捷键： Ctrl+N 打开新窗口 Ctrl+T 打开新标签页 Ctrl+Shift+N 在隐身模式下打开新窗口 Ctrl+O，然后选择文件
从零开始学StickyNotes：基于Flash中心与Adobe Flash Player的完整指南
StickyNotes 开源项目教程 项目介绍 StickyNotes 是一个桌面便签应用程序，旨在为用户提供一个易于管理和自定义的便签工具。该项目支持语音识别功能，并能够通过 Google Drive 同步便签内容，
升级VS至2019后，快速链接CAD2019的C#技巧分享
目录我是想用Qt连接CAD的，而且主要应用2D部分，之前找的Free CAD挺好的，只是它主要是发展3D部分，综合来看还是得用autocad，最开始我电脑里只有vs2013，因为之前出现过卸载不干净然后重做系统的大坑情况
VS更新攻略：以VS2013至2019, C#为桥梁，连接AutoCAD2019的秘密武器
目录我是想用Qt连接CAD的，而且主要应用2D部分，之前找的Free CAD挺好的，只是它主要是发展3D部分，综合来看还是得用autocad，最开始我电脑里只有vs2013，因为之前出现过卸载不干净然后重做系统的大坑情况
告别丢失的视频资料！一文教会你利用Flash中心内容"
还在为无法下载心爱的视频而烦恼吗？每次看到精彩的在线视频，都想永久保存却苦无良策？别担心，VideoDownloadHelper视频下载助手正是为您量身打造的解决方案！这款强大的Chrome浏览器扩展能够智能解析网页视频，让您一键下载
告别繁琐，剪切助手让你的Flash工作事半功倍
大家好，我是程序员鱼皮。 好消息，好消息，我们的新产品又又又又上线啦！ 这次，我们做的是一款桌面端软件，号称 “颜值天花板” 的超级剪切板工具 《剪切助手》。官网下载：这
HTML与CSS联手：实现右键菜单的奇妙弹出效果
<!--js部分--><script type="textjavascript" language="javascript">$(document).r
掌握Flash中心小技巧，轻松操作右键弹出菜单，畅游SWF世界！
<!--js部分--><script type="textjavascript" language="javascript">$(document).r
Hunyuan OCR：智能解析群内文档，自动索引简化文件管理流程！
QQ群文件管理：HunyuanOCR自动索引群成员上传的扫描文档 在企业协作、项目管理和远程办公日益依赖即时通讯工具的当下，QQ群早已不只是聊天的场所。它承载着合同、发票、会议纪要、技术图纸等大量关键文档的流转任务。但一个现实
立即行动：快速清理 SYSTEM VOLUME INFORMATION，让电脑运行如新！
快速体验打开 输入框内输入如下内容：快速开发一个SYSTEM VOLUME INFORMATION清理工具原型，基本功能包括：1. 简单文件扫描；2. 按大小日期筛选；3. 预览删除内容；4. 一键清理
发表评论