图片连续滚动

最新推荐文章于 2021-06-08 12:53:40 发布
最新推荐文章于 2021-06-08 12:53:40 发布
阅读量605 收藏
点赞数
文章标签： scroll border table function div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunsnow_swift/article/details/1756486
版权

<body>
<div align="center" bgcolor="#ffffff">
    <div id="scroll_div" style="overflow: hidden; width: 760px; height: 70px ;margin-top:0px; margin-bottom:0px; background-color:ffffff;" align="center" >
   <table width="760" border="0" cellpadding="0" cellspacing="0  bgcolor="#ffffff">
  <tr>
   <td width="760" id="scroll_begin">
    <table width="136"" border="0" cellspacing="0" cellpadding="0">
      <tr>
     <td width="135">
      <table width="76" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle">&nbsp;&nbsp;</td>
                                          <TD width=124><p>&nbsp;</p>
                                          <p><A href="link 1" target=_blank>pic 1 </A></p>
                                          <p>&nbsp;</p></TD>
                                        </tr>
                                        <tr>
                                        </tr>
                      </table>      
     </td>
      <td width="135">
         <table width="76" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle">&nbsp;&nbsp;</td>
                                          <TD width=124><A href="link 2" target=_blank>pic 2 </A></TD>
                                        </tr>
                                        <tr>
                                        </tr>
                      </table>
    </td>
      <td width="135">
      <table width="76" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle" >&nbsp;&nbsp;</td>
                                          <TD width=124><A href="limk 3" target=_blank>pic 3 </A></TD>
                            </tr>
                            <tr>
                            </tr>
                      </table>
    </td>
      <td width="135">
     <table width="76" border="0" cellspacing="0" cellpadding="0">
                            <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle" >&nbsp;&nbsp;</td>
                                          <TD width=124><A href="link 4" target=_blank>pic 4 </A></TD>
                             </tr>
                             <tr>
                             </tr>
                      </table>
    </td>
      <td width="135">
     <table width="76" border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle" >&nbsp;&nbsp;</td>
                                          <TD width=124><A href="link 5" target=_blank>pic 5 </A></TD>
                               </tr>
                               <tr>
                               </tr>
                      </table>
    </td>
      <td width="135">
          <table width="76" border="0" cellspacing="0" cellpadding="0">
                               <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle">&nbsp;&nbsp;</td>
                                          <TD width=124><A href="link 6" target=_blank>pic 6 </A></TD>
                               </tr>
                               <tr>
                               </tr>
                      </table>
    </td>
                  <td width="135">
      <table width="76" border="0" cellspacing="0" cellpadding="0">
                               <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle">&nbsp;&nbsp;</td>
                                          <TD width=124><A href="link 7" target=_blank>pic 7 </A></TD>
                               </tr>
                               <tr>
                               </tr>
                        </table>
     </td>
     <td width="135">
      <table width="76" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle">&nbsp;&nbsp;</td>
                                          <TD width=124><A href="link 8" target=_blank>pic 8 </A></TD>
                                </tr>
                                <tr>
                                </tr>
                        </table>
     </td>
     <td width="135">
      <table width="76" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle">&nbsp;&nbsp;</td>
                                          <TD width=124><A href="link 9" target=_blank>pic 9 </A></TD>
                                </tr>
                                <tr>
                                </tr>
                      </table>
     </td>
     <td width="135">
      <table width="76" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                          <td width="5" rowspan="2" align="center" valign="middle">&nbsp;&nbsp;</td>
                                          <TD width=124><A href="link 10" target=_blank>pic 10 </A></TD>
                                </tr>
                                <tr>
                                </tr>
                        </table>
     </td>
    </tr>
    </table>
     </td>
     <td width="10" id="scroll_end">
     </td>
   </tr>
     </table>
    </div>
</div>

<SCRIPT>
 var speed=1 //数值越小，速度越快，默认30毫秒
 var scroll_end = document.getElementById("scroll_end");
 var scroll_div = document.getElementById("scroll_div");
 scroll_end.innerHTML=scroll_begin.innerHTML
 function Marquee(){
 if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
 scroll_div.scrollLeft-=scroll_begin.offsetWidth
 else{
 scroll_div.scrollLeft++
 }
 }
 var MyMar=setInterval(Marquee,speed)
 scroll_div.οnmοuseοver=function() {clearInterval(MyMar)}
 scroll_div.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)}
 </SCRIPT>
</body> 

 

sunsnow_swift
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
图片无缝滚动的原理和实例
一笑的博客
10-12 7729
无缝滚动的结构：一共两个盒子，第一个大盒子下套第二个大盒子，第二个大盒子下有4张图片，第一个大盒子宽度固定为600px，第二个大盒子宽度是400%; 原理：第一个盒子相对浮动，第二个盒子绝对浮动，让第二个盒子的left值一直变化。当left值小于等于4张图片的宽度的时候，让left值瞬间归0，用户看不到，以为是无缝滚动。 例子：<!DOCTYPE html> <html> <head lang=
图片滚动显示
weixin_45743799的博客
11-17 1363
用H5实现图片滚动显示像跑马灯一样的效果。 程序详解： 图片滚动的开始和停止 鼠标的放上和移走事件 无限循环 每次滚动速度的快慢 效果演示（图片自右向左滚动） 代码演示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> &lt...
js图片滚动
12-31
js图片滚动
图片滚动
hanyuwebant的博客
05-24 519
图片的无缝滚动 一、HTML<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="gundong.css" /><!--引入css:link:css;--> <script src=
图片滚动例子
Kusers的博客
01-18 533
滚动测试 #window{ width: 100%; height: 300px; background: #333; overflow: hidden; } #rool{ height: 300px; padding: 0px; margin: 0px; } #rool li{ list-style: none; float: left;
图片左右滚动特效，很简单，你绝对看的懂
04-19
这是一个左右图片滚动的特效，代码很短，但是功能却完成实现了，你绝对可以看的懂。
图片连续循环滚动代码（向上）
做最好的自己
03-19 8715
方法一、href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/"> var speed=30 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetTo
div+css布局的图片连续滚动js实现代码
10-29
总结起来，这个实例是利用 `div` 和 `css` 创建一个图片连续滚动的布局，通过 `JavaScript` 实现动态滚动效果。开发者可以根据需求调整 CSS 样式和 JavaScript 代码，实现自定义的滚动速度、方向和暂停功能。同时，...
JavaScript实现图片连续滚动的案例
01-17
本案例将详细介绍如何使用JavaScript实现图片连续滚动，特别地，我们将关注“MarqueeScrollLeft”这个实现方法，它代表了向左滚动的效果。 首先，我们需要理解基本的HTML结构，用于放置要滚动的图片。通常，我们会...
js jquery做的图片连续滚动代码
10-30
在JavaScript与jQuery中，实现图片连续滚动是一种常见的网页动态效果，常用于轮播图或广告展示。此代码段中，开发者遇到了点击图片后返回时出现的问题，这通常与图片滚动的逻辑和状态管理有关。接下来，我们将详细...
html中图片连续滚动代码,[转载]网页设计中的图片连续滚动效果——代码
weixin_32687311的博客
06-08 2382
style="overflow:hidden;width:500px;">border="0">id="butong_net_left1" valign="top"align="center">border="0">src="src="插入需要滚动的图片">src="插入需要滚动的图片">src="插入需要滚动的图片">src="插入需要滚动的图片"&gt...
基于机器学习心脏病预测python源码+csv格式数据集（下载即用）
09-02
基于机器学习心脏病预测python源码+csv格式数据集（下载即用）在这个项目中，我们探讨的是如何运用机器学习技术来预测心脏病，具体是通过Python编程语言以及scikit-learn这个强大的机器学习库。这个压缩包包含了必要的源代码和数据集，可以帮助初学者或者研究者理解并实践预测模型的构建过程。 我们要了解数据集。在这个案例中，数据集是以CSV（Comma Separated Values）格式提供的，这是一种常见的数据存储格式，易于读写且兼容性好。CSV文件通常用于存储表格数据，比如数据库导出或数据分析任务。在本项目中，数据集可能包含了患者的各种生理指标，如年龄、性别、血压、胆固醇水平等，这些都是预测心脏病风险的重要因素。 接下来，我们将聚焦于Python编程和scikit-learn库。Python是数据科学和机器学习领域广泛使用的语言，其简洁易读的语法使得代码编写更加直观。scikit-learn是Python中最受欢迎的机器学习库之一，它提供了丰富的算法库，包括分类、回归、聚类和降维等，对于初学者来说非常友好。 在源代码中，我们首先会进行数据预处理步骤，包括加载数据集
大数据处理框架：Spark：Spark基础架构与原理.docx
09-02
大数据处理框架：Spark：Spark基础架构与原理.docx
LPE16000/LPE16000B/LPE16002/LPE16004/LEP16002B-M36 Win2016驱动
09-02
Emulex LPE16000/LPE16000B/LPE16002/LPE16004/LEP16002B-M36 HBA卡适用于Windows Server 2012 64bit/Windows Server 2012R2 64bit/Windows Server 2016 64bit/Windows Server 2019 64bit 得HBA卡驱动
数据湖：Iceberg：Iceberg数据湖的运维与监控.docx
09-02
数据湖：Iceberg：Iceberg数据湖的运维与监控.docx
Av1an-1.10.5.post2-py3-none-any.whl.zip
09-02
Av1an-1.10.5.post2-py3-none-any.whl.zip
Av1an-1.13.post5-py3-none-any.whl.zip
最新发布
09-02
Av1an-1.13.post5-py3-none-any.whl.zip
庆阳市环保局应急指挥融合平台解决方案Word(78页).doc
09-02
庆阳市环保局应急指挥融合平台解决方案Word(78页)
JavaScript实现图片无缝滚动效果
在滚动效果中，我们可以通过改变容器的scrollLeft值，使得图片向左移动，模拟出连续滚动的效果。 3. **offsetWidth属性**：offsetWidth返回一个元素的总宽度，包括边框和内边距。在计算滚动距离时，需要知道图片或...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值