在html中如何让图片跟着滚动条而动

在html中如何让图片跟着滚动条而动,第1张

1、新建一个文件夹,用来存放网页文件和图片,快捷键ctrl+shift+n。

2、进入新建文件夹里面,右键新建文本文档。

3、进入新建的文本文档,复制下方代码,点击快捷键ctrl+s保存后退出。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>百度知道</title>

</head>

<body>

<!--

position:fixed是设置为固定在页面的某个位置,不会随滚动条滚动而移动。

top: 50px图片距离页面顶部50像素。

right:10px图片距离页面右边10像素。

display:block设置图片为块状元素,这样图片不会单独占据行-->

<img style="position:fixedtop: 50pxright:10pxdisplay:block" src="1.png" alt="">

<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>

<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>

<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>

<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>

<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>

<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>

<p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p><p>百度知道</p>

</body>

</html>

4、重命名新建文本文档为index.html,原先的.txt的后缀同时去掉后保存,提示确实要更改后按“是”即可。

5、添加背景图片源文件,并命名为1.png,这些图片为你需要放置的图片。

6、点击index.html,右键浏览器打开预览效果。

7、浏览器打开后即可得到如下效果

<DIV id=demo  style="OVERFLOW: hidden WIDTH: 600px HEIGHT: 190px top:485px left:252pxposition: absolute">

   <table border="0" cellspacing="0" cellpadding="0">

      <tr>

         <td valign="top"  id=demo1>

            <!-- 要循环滚动的图片 -->

            <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" >

               <tr>

                  <td width="200" align="center" style="height: 151px">

                      <a href="WebDeSign.aspx">

                     <img src="images/indexpic1.gif" width="194" height="147" border="0" /></a>

                  </td>

                  <td width="200" align="center" style="height: 151px">

                      <a href="SoftWare.aspx">

                     <img src="images/indexpic2.gif" width="194" height="147" border="0" /></a>

                  </td>

                  <td align="center" style="height: 151px width: 200px">

                      <a href="VhostIndex.aspx">

                     <img src="images/indexpic3.gif" width="194" height="147" border="0" /></a>

                  </td>

               </tr>

            </table>

         </td>

         <TD id=demo2 width=1></TD>

      </tr>

   </table>

</DIV> 

<SCRIPT>

   var speed=30//速度数值越大速度越慢

   var demo2 = document.getElementById("demo2")

   var demo = document.getElementById("demo")

   var demo1 = document.getElementById("demo1")

   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>

自己站的效果


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/8297296.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-15
下一篇 2023-04-15

发表评论

登录后才能评论

评论列表(0条)

保存