网页中的图片滚动效果是怎么实现的啊？

Posted 2023-05-05

tags:

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

http://www.guoguang-cn.com/就是这个网站里面的那个滚动图片效果，怎么才能实现啊？求代码！

设置层高，比如position:absoulute; z-index:999; top:100px; right:0px;

示例用法：

<html>

<p>

</body>

</html>

图片中的P标签里有图片，我这里设置P区块为宽高各100，用position:fixed定位，距离顶部100像素，右边0像素漂浮着，z-index:999就是层高，可以理解为层高越高就可以漂浮在网页上面。

效果如下：

不管如何滚动网页滚动条上下翻左右翻都一直在屏幕距离顶部100像素，右边0像素漂浮着。

参考技术A 1.网页中实现透明flash!
加入：<param name="wmode" value="transparent">
这个参数加到Flash插件<object></object>中就可以了。

2.滚动文字效果,用<MARQUEE></MARQUEE>标签,

3.阐述你在网站中用到的至少三个方面的网页制作技术!
html语言: css样式: js代码:
(1 ) HTML（Hyper Text Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
(2) CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。
(3)js是javascript的缩写,Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。
参考技术B 我从它直接 copy 出来的:
<div id=demo style="overflow:hidden;height:130px;width:720px;">
<table align=left cellpadding=0 cellspacing=0 border=0>
<tr>
<td valign=top id=demo1>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><table width="100%" align="center" cellpadding="0" cellspacing="0" class="table-xia">
<tr>
<td align="center" valign="top">
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td >
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td align="center" valign="top"><table width="152" border="0" cellpadding="0" cellspacing="3">
<tr>
<td width="152" height="100" align="center"><a href='Product_List.asp?ID=1335' class='y' target='_top'><img src='admin/Uploads/2010-11-7-102832.jpg' width=180 height=100 border='0' alt='?品名?：HPK升?版5回路点?查看?情'></a></td>
</tr>
<tr>
<TD align=center style="background:#1A1819">
<a href='Product_List.asp?ID=1335' target='_top'>HPK升?版5回路</a>
</td>
</tr>
</table>
</td>

<td align="center" valign="top"><table width="152" border="0" cellpadding="0" cellspacing="3">
<tr>
<td width="152" height="100" align="center"><a href='Product_List.asp?ID=1336' class='y' target='_top'><img src='admin/Uploads/2010-11-7-10349.jpg' width=180 height=100 border='0' alt='?品名?：HPK升?版7回路点?查看?情'></a></td>
</tr>
<tr>
<TD align=center style="background:#1A1819">
<a href='Product_List.asp?ID=1336' target='_top'>HPK升?版7回路</a>
</td>
</tr>
</table>
</td>

<td align="center" valign="top"><table width="152" border="0" cellpadding="0" cellspacing="3">
<tr>
<td width="152" height="100" align="center"><a href='Product_List.asp?ID=1337' class='y' target='_top'><img src='admin/Uploads/2010-11-7-104025.jpg' width=180 height=100 border='0' alt='?品名?：HPK升?版10路优?特点点?查看?情'></a></td>
</tr>
<tr>
<TD align=center style="background:#1A1819">
<a href='Product_List.asp?ID=1337' target='_top'>HPK升?版10路优?特</a>
</td>
</tr>
</table>
</td>

</tr>
</table>
</td>
</tr>
</table>
</td>
</tr></table></td>
</tr>
</table>
</td>
<td id=demo2 valign=top></td>
</tr>
</table>
</div>
<script>

var speed=20

demo2.innerHTML=demo1.innerHTML

function Marquee()

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else

demo.scrollLeft++

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() clearInterval(MyMar)

demo.onmouseout=function() MyMar=setInterval(Marquee,speed)

</script> 参考技术C 这个是常见的JS代码来的，你搜一下“JS代码”就能找出一堆来的了

如何在css中把一组静态图片改成动态滚动的图片

在css中修改图片样式，改成滚动图片，怎么改？
增加一个什么属性，还是修改属性？

参考技术A 连续的滚动可以使用css3实现（animat,0%,50%,100%），设置不同时间的图片位置即可。但只是在“滚动”，通常不是大家所称之为的“滚动”（严格说是滑动）。
因此说，你的问题有一定的歧义的。

css3还有一种方法可以实现滚动。就是使用过度效果（transition），他也可以实现滚动的效果。而且，个人感觉比较符合你的意思。

其具体的做法是，给超链接滑过状态一个图片属性，如：
li a img margin-top:0px;
li a:hover img margin-top:-20px;
li a img -webkit-transition: margin-top 0.5s;/*注意这里的hack，照顾多个浏览器*/
这样，鼠标滑上图片，图片就会动画向上滑动20像素，鼠标离开，又滑下来。

再扯下严格意义的【动态滚动的图片】，一般的解释是一组图片可以在某个区域内动画滑动。注意是一组。css通常不具有处理多组图片（也有css模拟动画帧的效果的）的效果。动态滚动图片常见的有2种，一种是可控制的滚动列表，一种是自动无限循环滚动。通常用来作为滚动新闻、组图或相册（风采）使用。追问

用dreamwever建一个css，这样也可以实现么？我用的是dreamwever8

本回答被提问者采纳参考技术B css滚动不起的，还需要一个叫javascript的东西。
百度：js循环滚动追问

主管就让我在css中改，诶摸不着头脑啊。。。

追答

喊你们主管去死，没js这个滚动不起来的，改css有何用？

追问

额，我们主管自己亲自去改了。。。

追答

你是啥部门的，我很好奇这个，如果是技术部门之类的，那你们那主管还真是个人才

追问

技术部。。。

追答