`
litianyi520
  • 浏览: 43179 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

图片无缝滚动代码

阅读更多

<html>
<head>
<style type="text/css">
.contents {
 font-family: "宋体", Arial;
 font-size: 12px;
 color: #333333;
 line-height: 18px;
 text-decoration: none;
}
a.contents:link {
 font-family: "宋体", Arial;
 color: #333333;
 font-size: 12px;
 line-height: 18px;
 text-decoration: none;
}
a.contents:hover {
 font-family: "宋体",Arial;
 color: #333333;
 font-size: 12px;
 line-height: 18px;
 text-decoration: underline;
}
.tbl {table-layout:fixed}
.td {overflow:hidden;}
</style>
</head>
<div align="center" id="demo" style="overflow:hidden;height:200px;width:180px;border-width:0px 0px 0px 0px;border-style:dotted dotted dotted dotted;">
<div align=center id="demo1">
<table width="90%"  class="tbl"  border="0" cellspacing="0" cellpadding="0" align="center">
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=253" class="contents">北京博采人科技开发有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=140" class="contents">北京华昌实业科技有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=238" class="contents">北京华星数码科技有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=883" class="contents">北京联盛汇源科贸有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=885" class="contents">北京盛祥世纪发展有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=147" class="contents">北京世纪佳迪办公设备销售中心</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=239" class="contents">北京世纪亚鹏科技有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=909" class="contents">北京索安视讯科技有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=872" class="contents">北京维创铭网络科技有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=379" class="contents">北京喜悦创业科技有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=440" class="contents">北京新义数码科贸有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=866" class="contents">北京禹宏工程咨询中心</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=887" class="contents">广州合意数码科技公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=809" class="contents">美誉在线国际文化传媒(北京)有限公司</a></div></td>
    </tr>
    <tr>
      <td valign="top" width="4%"><img src="/images/19.gif" width="7" height="7"></td>
      <td width="96%" class="td" nowrap><div><a target="_blank" href="/detail/huangyeDetail.jsp?cid=1054" class="contents">深圳京华数码广州经营部</a></div></td>
    </tr>
</table>
</div>
    <div align="center" id="demo2"></div>
</div>
</html>

<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=50;    //滚动速度值,值越大速度越慢
demo2.innerHTML = demo1.innerHTML    //克隆demo2为demo1
function Marquee(){
    if(demo2.offsetTop-demo.scrollTop<=0)    //当滚动至demo1与demo2交界时
        demo.scrollTop-=demo1.offsetHeight    //demo跳到最顶端
    else{
        demo.scrollTop++
    }
}
var MyMar = setInterval(Marquee,speed);        //设置定时器
demo.onmouseover = function(){clearInterval(MyMar)}    //鼠标经过时清除定时器达到滚动停止的目的
demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}    //鼠标移开时重设定时器
-->
</script>

分享到:
评论

相关推荐

    jquery图片无缝滚动代码左右上下无缝滚动图片

    **jQuery图片无缝滚动代码实现详解** 在网页设计中,图片滚动是一种常见的动态效果,它可以吸引用户的注意力并增强网站的视觉吸引力。"jQuery图片无缝滚动代码左右上下无缝滚动图片"是利用jQuery库实现的一种图片...

    图片无缝滚动插件上下左右图片无缝滚动代码.zip

    这个压缩包文件"图片无缝滚动插件上下左右图片无缝滚动代码.zip"显然包含了一套实现这种效果的JavaScript代码。以下是关于这个插件及其相关技术的知识点详解: 1. **JavaScript基础**:无缝滚动效果主要依赖...

    图片滚动代码,图片无缝滚动代码,图片自动滚动且可控制滚动方向

    标题中的“图片滚动代码,图片无缝滚动代码,图片自动滚动且可控制滚动方向”涉及到的是网页设计中的一个常见功能——图片滚动效果。这种效果通常用于展示多张图片,以滚动的方式呈现,使得用户无需手动翻页就能浏览到...

    jquery图片无缝滚动插件上下左右图片无缝滚动代码

    标题中的“上下左右图片无缝滚动代码”表明我们要讨论的是一个可以支持四个方向滚动的插件。实现这种效果通常包括以下步骤: 1. **选择器与元素集合**:使用jQuery的选择器选取需要滚动的图片容器,例如`$("#image...

    query图片无缝滚动插件上下左右图片无缝滚动代码.zip

    标题中的"query图片无缝滚动插件上下左右图片无缝滚动代码"指的是使用jQuery库实现的一种图片无缝滚动效果的插件。这种效果通常应用于网站的轮播图或者产品展示区域,能够提供用户平滑、连续的浏览体验,使得多张...

    js产品图片无缝滚动代码向左和向上图片无缝滚动代码

    在电商网站或产品展示页面中,图片无缝滚动是一种常见的视觉设计手法,它能够吸引用户的注意力,提升用户体验。本文将深入讲解如何使用JS实现产品图片的向左和向上无缝滚动效果。 首先,我们需要理解无缝滚动的基本...

    js图片无缝滚动代码

    根据给定的文件信息,我们可以深入探讨“js图片无缝滚动代码”的实现原理和技术要点。这段代码展示了一种利用JavaScript实现图片在网页上无缝滚动的方法,适用于创建动态且视觉上连贯的图片滚动效果。 ### 无缝滚动...

    jQuery简易的图片无缝滚动代码.zip

    **jQuery简易图片无缝滚动代码详解** 在Web开发中,图片无缝滚动是一种常见的视觉效果,它可以使网站的展示更加生动和吸引人。这个“jQuery简易的图片无缝滚动代码”就是一个实现这种效果的简单示例,主要涉及到...

    jquery上下左右图片无缝滚动代码.zip

    本资源"jquery上下左右图片无缝滚动代码.zip"提供了一种实现图片上下左右无缝滚动效果的方法,这对于网页设计尤其是产品展示或广告轮播组件来说非常实用。这种效果可以为网站增添动态感,提升用户体验。 首先,我们...

    兼容IE与火狐的js图片无缝滚动代码.zip

    标题中的“兼容IE与火狐的js图片无缝滚动代码”是指一种JavaScript编程技术,用于创建在不同浏览器(尤其是Internet Explorer和Firefox)上都能正常工作的图片滚动效果。这种效果通常是通过让图片在用户看不到的地方...

    jquery按钮控制图片无缝滚动代码

    【jQuery 按钮控制图片无缝滚动代码详解】 在网页设计中,图片滚动效果是一种常见的动态展示手段,能够吸引用户注意力并提升用户体验。本篇文章将深入讲解如何利用jQuery实现按钮控制的图片无缝滚动效果,帮助你...

    网页图片无缝循环滚动html代码

    ### 一、网页图片无缝循环滚动的基本原理 网页图片的无缝循环滚动主要通过HTML结构布局与JavaScript控制相结合来实现。其核心思想是创建两个并行的元素,其中一个作为实际显示区域(如`demo1`),另一个作为复制...

    无缝滚动制作js文字无缝滚动和js图片无缝滚动

    在实际应用中,可以直接复制提供的js无缝滚动代码到项目中,并根据需求调整数组内容、滚动速度以及动画效果。确保将代码中的`getElementById`与实际HTML元素ID匹配,以确保代码能够正确地操作目标元素。 总结来说,...

    用CSS3实现无限循环的无缝滚动的实例代码

    在现代网页设计中,无限循环的无缝滚动是一种常见的动画效果,尤其是在列表或者新闻滚动模块中。使用CSS3实现这一效果,不仅可以提升用户体验,而且可以减少JavaScript的使用,简化前端代码。CSS3中提供的一些关键...

    无缝图片滚动效果

    1. **DOM操作**:使用JavaScript来动态修改HTML结构,添加、删除或移动图片元素,以实现无缝滚动。 2. **CSS样式**:通过CSS控制图片的布局,如设置宽度、高度、位置等,确保滚动的平滑性。 3. **动画函数**:利用...

    js无缝滚动代码制作js图片无缝滚动向上无缝滚动

    以上代码是一个基础的图片向上无缝滚动的实现,实际应用中可能需要考虑更多的细节,比如兼容性、动画平滑性以及用户交互等。在进行此类效果的开发时,可以结合CSS3的`transition`和`transform`属性,以及现代浏览器...

    html中图片无缝滚动

    在图片无缝滚动中,CSS可以用来设置图片的定位(positioning)、过渡(transitions)和动画(animations)。例如,我们可以通过绝对定位使图片叠加在一起,然后利用CSS3的`animation`属性创建一个平滑的滚动效果。...

    图片左右无缝滚动JS代码

    【标题】图片左右无缝滚动JS代码 在网页设计中,图片滚动效果是一种常见的动态展示方式,可以吸引用户的注意力并提供视觉上的吸引力。"图片左右无缝滚动JS代码"是指使用JavaScript编程语言实现的一种特效,它允许...

Global site tag (gtag.js) - Google Analytics