jquery无间隙滚动、无缝滚动

最新推荐文章于 2021-06-30 16:32:42 发布
最新推荐文章于 2021-06-30 16:32:42 发布
阅读量1.8k 收藏 2
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webnoties/article/details/17219695
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS图片向上滚动</title>
    <style type="text/css">
    img{
    border: none;
    }
    </style>
    <!-- 这句话不能少，记得把jquery.js文件放在当前页面的同一目录中 -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
</head>
<body>
<div id="demo" style="overflow:hidden;height:300px;">
  <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
    <tr id="demo1">
      <td valign="top" bgcolor="ffffff">
      <!-- 特别注意，下面的图片总高度必须大于上面定义的demo的宽度，如上面demo的高度为300px,则下面所有图片的高的和值必须大于300,否则会出现些问题！ -->
          <table border="0" cellspacing="0" cellpadding="0">
          <tr align="center">
            <td><a href="#" target="_blank"><img src="01.jpg" width="150" height="100"></a></td>            
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="02.jpg" width="150" height="100"></a></td>
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="03.jpg" width="150" height="100"></a></td>
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="04.jpg" width="150" height="100"></a></td>
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="05.jpg" width="150" height="100"></a></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr id="demo2">
    </tr>
  </table>
</div>
<script type="text/javascript"> 
var speed=30;
var demo = $("#demo");
var demo1 = $("#demo1");
var demo2 = $("#demo2");
demo2.html(demo1.html());
function Marquee(){ 
    if(demo.scrollTop()>=demo1.height())
        demo.scrollTop(0); 
    else{
        demo.scrollTop(demo.scrollTop()+1);
    }
} 
var MyMar=setInterval(Marquee,speed) 
demo.mouseover(function() {
    clearInterval(MyMar);
} )
demo.mouseout(function() {
    MyMar=setInterval(Marquee,speed);
} )

function fun1(){
    alert(demo.scrollTop());
}
function fun2(){
    alert(demo1.height());
}
</script>
<input type="button"  value="显示demo.scrollTop()" οnclick="fun1();"/>
<input type="button"  value="显示demo1.height())" οnclick="fun2();"/>
</body>
</html>
lumengabc
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery无缝滚动跑马灯效果
11-17
jQuery无缝滚动跑马灯效果 jQuery无缝滚动跑马灯效果 jQuery无缝滚动跑马灯效果 jQuery无缝滚动跑马灯效果 jQuery无缝滚动跑马灯效果
liMarquee – jQuery无缝滚动插件
05-17
liMarquee 是一款基于 jQuery 的无缝滚动插件，类似于 HTML 的 Marquee 标签，但比 Marquee 更强大。它可以应用于任何 Web 元素，同时它可以设置不同的滚动方向（左右上下）、滚动速度、鼠标悬停暂停、鼠标拖动、加载 xml 文件等。
Jquery实现无缝隙上下左右滚动，超简便代码
08-02
Jquery实现无缝隙上下左右滚动，超简便代码 值得一看的代码
jQuery 无缝滚动
weixin_30306905的博客
06-08 94
这个效果, 我在用js直接实现的时候, 有兼容问题, 我于是想到jQuery实现. 其实在此之前, 我也没在意过, 既然遇到了, 就把它记录一下. 这是我对无缝滚动的理解, 下面先上图 我来解释一下这个滚动中的图形: 　　蓝色和绿色部分表示我们的内容, 绿色的是内容1, 蓝色的是内容2 　　最外边可以看到有红色的边框(不是很明显), 这个红色的边框设置了overflow:hidden...
使用Jquery实现简单的无缝滚动(可动态)
03-12
在VS2010的环境下哦，别看错了！使用jquery实现简单的无缝滚动
自己编写jQuery插件 之 无缝滚动
weixin_30883311的博客
08-02 233
一. 效果图 二. Html骨架结构 <div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> ...
jquery文字向左无缝隙滚动
12-08
jquery 文字向左无缝隙滚动 跑马灯 自己写的 支持所有浏览器(已测试)
jQuery kxbdMarquee 无缝滚动
05-31
1. **无缝滚动**：kxbdMarquee 的核心功能是实现元素的无间隙、平滑滚动，使用户感觉内容是无限循环的，没有明显的起点和终点。 2. **自定义设置**：用户可以设置滚动速度、方向（上下滚动或左右滚动）、暂停、恢复...
无间隙循环滚动鼠标浮动停止滚动
11-13
无间隙循环滚动意味着用户可以一直滚动页面，即使内容已经到达尽头，页面也会自动返回到开头，形成一个无缝的循环。这通常是通过JavaScript或者其他前端技术实现的，通过监听滚动事件并配合适当的算法来控制页面的...
jquery无缝向上滚动实现代码
12-08
标题中的"jquery无缝向上滚动实现代码"是指使用jQuery库来创建一种效果，使得网页上的列表内容能够自动地、平滑地、无间隙地向上滚动。这种效果常用于新闻滚动条或者菜单栏，使得用户能够在有限的空间内查看更多的...
jQuery 模仿 Marquee 间歇式 无缝滚动 不间断滚动
08-01
jQuery 模仿 Marquee 间歇式 无缝滚动 不间断滚动
JQ 文字无缝滚动效果
05-01
NULL 博文链接：https://onestopweb.iteye.com/blog/2407543
JS不间断向左滚动无缝隙
03-21
JS不间断向左滚动javascript无缝隙
无间隙滚动js
09-18
文字无间隙一直滚动,文字向上滚动,文字向右滚动
图片上下无间隙滚动
04-21
标题中的“图片上下无间隙滚动”是指一种网页设计技术，用于实现图片在页面上连续、无缝地滚动展示。这种效果通常应用于图片展示区域，如轮播图或展示墙，能够给用户带来流畅的视觉体验。在给定的描述中提到了一个...
多种常用滚动效果jquery插件.zip
07-11
这个压缩包的核心组件是kxbdSuperMarquee插件，它具备丰富的功能，如图片与文字的无缝滚动、图片翻滚以及banner制作等。 首先，我们来深入了解一下jQuery。jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML...
无缝滚动jq
qq_32328207的博客
11-21 219
fhBox.append(lf);//克隆一个 function scrollUp(){ i++; if(i==num+1){ fhBox.css({marginTop:0}); i=1; } fhBox.animate({ marginTop:-34*i },2000,function(){ }); }
jQuery无缝滚动
m0_57675124的博客
06-30 730
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } li{ list-style: none; } .box{ width: 1020px; height: 112px; ov.
JQ实现无缝滚动
qq_36369717的博客
12-01 1922
用JQ做一个无缝滚动效果，图片自动轮播，左右按钮点击可切换图片，下面一排带索引的按钮可点击，点击到哪个就切换到对应的第几张图片，布局有些简陋，主要是实现效果，起初有bug，快速点击按钮时会有卡顿然后出现空白，解决办法在animate()后加stop()，可实现无缝滚动效果。 布局以及样式如下：一个大div(相对定位)，里面放ul(装图片，最后一张图片跟第一张图片一样)，左右两个按钮，以及下面的p
jquery 实现表格无缝循环滚动
最新发布
05-18
可以使用 jQuery 的 animate() 方法来实现表格的无缝循环滚动。具体实现步骤如下： 1. 复制表格内容，将其粘贴到表格的末尾，实现表格内容的无限循环。 2. 使用 CSS 将表格包裹在一个固定高度、隐藏溢出部分的容器中。 3. 使用 jQuery 计算表格的高度和每次滚动的距离，并使用 animate() 方法实现表格的滚动。 下面是一份示例代码： HTML 代码： ```html <div class="table-container"> <table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <td>Row 1 Column 1</td> <td>Row 1 Column 2</td> <td>Row 1 Column 3</td> </tr> <tr> <td>Row 2 Column 1</td> <td>Row 2 Column 2</td> <td>Row 2 Column 3</td> </tr> <!-- 复制表格内容 --> <tr> <td>Row 1 Column 1</td> <td>Row 1 Column 2</td> <td>Row 1 Column 3</td> </tr> <tr> <td>Row 2 Column 1</td> <td>Row 2 Column 2</td> <td>Row 2 Column 3</td> </tr> </tbody> </table> </div> ``` CSS 代码： ```css .table-container { height: 200px; /* 容器固定高度 */ overflow: hidden; /* 隐藏溢出部分 */ } table { width: 100%; border-collapse: collapse; } th, td { border: 1px solid #ccc; padding: 8px; } ``` JavaScript 代码： ```javascript $(function() { var tableHeight = $('table').height(); // 获取表格高度 var scrollDistance = $('table tr').eq(1).height(); // 获取每次滚动的距离 var scrollSpeed = 2000; // 滚动速度 setInterval(function() { $('.table-container').animate({scrollTop: '+=' + scrollDistance + 'px'}, scrollSpeed, 'swing', function() { if ($('.table-container').scrollTop() >= tableHeight) { $('.table-container').scrollTop(0); // 滚动到顶部 } }); }, scrollSpeed); }); ``` 这份代码中，我们使用了 setInterval() 方法和 animate() 方法实现了表格的无限循环滚动。其中，setInterval() 方法用于定时执行 animate() 方法，而 animate() 方法则用于实现每次滚动的动画效果。在 animate() 方法中，我们使用 scrollTop 属性来控制滚动的距离，并在滚动到表格底部时将滚动条重置到表格顶部，实现表格内容的无限循环滚动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值