如何在HTML中实现图片的滚动效果

Posted 2023-05-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何在HTML中实现图片的滚动效果相关的知识，希望对你有一定的参考价值。

<MARQUEE onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"><IMG src="第一张图片地址" ><IMG src="第二张图片地址"></MARQUEE>
注释：
1) scrollAmount。它表示速度，值越大速度越快。
2) 加入onmouseover=stop() onmouseout=start()代码，鼠标指向循环文字图片时他们会停止滚动，鼠标离开时继续滚动。
给滚动图片加超链接
用<a href=>和</a>把<img>包围，并且img必须设border=0，否则图片会出现边框。例子如下：
<MARQUEE scrollAmount=3 loop=infinite deplay="0"><a href="链接网址"><img src="图片网址" border=0></a></MARQUEE>
图片从右到左滚动
<MARQUEE width=宽 height=高 onmouseover=stop() onmouseout=start() scrollAmount=速度 loop=infinite deplay="0"><img src="图片地址 "><img src="图片地址 ">···</MARQUEE>
图片从下到上滚动
<marquee behavior="scroll" direction=up width="宽" height="高" scrollamount="5" onmouseout="this.start()"><img src="图片网址 "><img src="图片网址 ">···</marquee>
带有超链接的图片实现滚动效果
<marquee behavior="scroll" direction=up width="120" height="60" scrollamount="1" scrolldelay="60" onmouseover="this.stop()" onmouseout="this.start()"><a target="cont" href="连接地址"><img src="http://图片地址" idth="88" height="33" border="0"></a><a target="cont" href="连接地址"><img src="图片地址" width="88" height="33" border="0"></a></marquee> 参考技术A

素材的准备。为了更好的表现网站的风格和特色，具备一些更富表现力和吸引力的图片是必不可少的。同理，小编也准备了一些与网页主题密切相关的图片，用于做为实现图片滚动效果的素材。

打开Dreamweaver8，新建一网页文件，并保存为名为“index.html"文件。

切换至代码编辑界面，输入如下代码：

新建一CSS样式表文件，并将该文件保存到与“index.html”相同的目录下，文件名称为“MyStyle.css"。

在新建的样式表文件"MyStyle.css”文件中输入如下代码：

* padding:0; margin:0; /*设置所有对像的内边距为0*/
body text-align:center; /*设置页面居中对齐*/
#photo-list
/* 6张图片的宽度（包含宽度、padding、border、图片间的留白）
计算：6*(100+2*2+1*2+9) - 9
之所以减去9是第6张图片的右边留白 */
width:681px;

/* 图片的宽度（包含高度、padding、border）
计算：100+2*2+1*2 */
height:106px;
margin:50px auto;
overflow:hidden; /*溢出部份将被隐藏*/

border:1px dashed #ccc;

#photo-list ul list-style:none;
#photo-list li float:left; padding-right:9px;

#photo-list img border:1px solid #ddd; background:#fff; padding:2px;

在网页文件"index.html"中添加对该样式表的引用：

新建一个JS文件，并将该文件另存为“MoveEffect.js"。

在”MoveEffect.js“文件中输入如下所示代码：

var id = function(el) return document.getElementById(el); ,
c = id('photo-list');
if(c)

var ul = id('scroll'),
lis = ul.getElementsByTagName('li'),
itemCount = lis.length,
width = lis[0].offsetWidth, //获得每个img容器的宽度
marquee = function()
c.scrollLeft += 2;
if(c.scrollLeft % width <= 1) //当 c.scrollLeft 和 width 相等时，把第一个img追加到最后面

ul.appendChild(ul.getElementsByTagName('li')[0]);
c.scrollLeft = 0;
;
,
speed = 50; //数值越大越慢
ul.style.width = width*itemCount + 'px'; //加载完后设置容器长度

var timer = setInterval(marquee, speed);
c.onmouseover = function()
clearInterval(timer);
;
c.onmouseout = function()
timer = setInterval(marquee, speed);
;
;

然后在主页文件"index.html”中添加对该“MoveEffect.js”文件的引用。

打开“index.html”网页文件，最终效果如果所示：

如何在 UITable 中实现 Instagram 评论的效果？

【中文标题】如何在 UITable 中实现 Instagram 评论的效果？【英文标题】：how can i accomplish the effect of instagram comments in a UITable? 【发布时间】：2013-12-05 23:57:06 【问题描述】：

当我们在 cmets 中滚动时，我想完成 instagram 的效果，它像这样隐藏键盘：

我知道它不适合滚动，因为如果您滚动并“不要触摸”文本框，它不会隐藏键盘，但是如果您在滚动时“触摸”文本框，它会隐藏键盘。

另一个问题是我如何在特定位置显示/隐藏键盘，我的意思是，以实现此效果。

更新

我找到了一个解决方案 HERE 也适合想要完成此任务的人：D

【问题讨论】：

【参考方案1】：

将表格视图的keyboardDismissMode 设置为UIScrollViewKeyboardDismissModeInteractive。现在，当您在键盘上平移手指时，滚动表格视图时，键盘将跟随您的手指并以交互方式关闭。这一切都由系统为您完成。

【讨论】：

它有效！但是我怎样才能在评论框移动时使用键盘坐标来移动评论框？（就像 instagram 一样）您不能自己移动键盘。任何与键盘相关的东西都是私有 API。我想在键盘移动时移动评论框，我找到了这个答案link 但这个通知不是实时的，所以只有在键盘出现和隐藏时才有效，所以文本视图不会随键盘移动:( 啊，我现在明白你的意思了。您应该将注释框添加为输入附件。然后它将连接到键盘。阅读inputAccessoryView。但是当键盘“消失”时这个 View as InputAccessoryView 会消失对吗？

以上是关于如何在HTML中实现图片的滚动效果的主要内容，如果未能解决你的问题，请参考以下文章

在unity中实现分页滚动的效果和吸附功能（UGUI）

如何在 UITable 中实现 Instagram 评论的效果？

如何在导航栏菜单中实现平滑的向下滑动效果

android应用模仿android桌面效果，就是拖动页面时背景图片随之滚动，但是滚动的幅度比页面拖动的幅度小。

在滚动列表中实现视频的播放(ListView & RecyclerView)

vue中实现文字滚动-跑马灯效果-marquee原生标签