新闻列表上下循环滚动效果

最新推荐文章于 2022-04-20 16:11:57 发布
最新推荐文章于 2022-04-20 16:11:57 发布
阅读量2.3k 收藏 2
点赞数
分类专栏： Jquery 文章标签： border class list stylesheet function javascript 
<html>
<head>
<link href="css/siteCss.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" width="220">
    <tbody>
        <tr>
            <td height="29" width="28">
                <img src="images/t04.jpg" width="28" height="29"></td>
            <td class="title" background="images/t05.jpg" width="114">
                公示公告</td>
            <td class="more" valign="center" background="images/t11.jpg" width="73" align="right">
                <a href="/pages/WebSites/Pages/Web/NewsList.aspx?iClass=10">更多>></a></td>
            <td width="5">
                <img src="images/t12.jpg" width="5" height="29"></td>
        </tr>
        <tr>
            <td bgcolor="#e0ecf8" height="230" colspan="4">
			<div style="width: 100%; height: 230px; overflow: hidden" id="ImgDemo" align="center">
                    <div id="ImgDemo1">
                <table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
                    <tbody>
                        <tr>
                            <td class="list">
								<span style="width:156px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;">
                                <a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
                                    · 公立医院应消除顾虑主消除顾虑主消除顾虑主消除顾虑主消除顾虑主</a></span>[10-21]</td>
                        </tr>
                    </tbody>
                </table>
				<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
                    <tbody>
                        <tr>
                            <td class="list">
                                <a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
                                    · 哈哈哈哈哈哈哈哈哈哈哈</a>[10-22]</td>
                        </tr>
                    </tbody>
                </table>
				<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
                    <tbody>
                        <tr>
                            <td class="list">
                                <a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
                                    · 哈哈哈哈哈哈哈哈哈哈</a>[10-23]</td>
                        </tr>
                    </tbody>
                </table>
				<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
                    <tbody>
                        <tr>
                            <td class="list">
                                <a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
                                    · 公立医院应消除顾虑主</a>[10-24]</td>
                        </tr>
                    </tbody>
                </table>
				<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
                    <tbody>
                        <tr>
                            <td class="list">
                                <a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
                                    · 哈哈哈哈哈哈哈哈哈哈</a>[10-25]</td>
                        </tr>
                    </tbody>
                </table>
				<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
                    <tbody>
                        <tr>
                            <td class="list">
                                <a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
                                    · 公立医院应消除顾虑主</a>[10-26]</td>
                        </tr>
                    </tbody>
                </table>
				<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
                    <tbody>
                        <tr>
                            <td class="list">
                                <a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
                                    · 哈哈哈哈哈哈哈哈哈哈</a>[10-27]</td>
                        </tr>
                    </tbody>
                </table>
				<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
                    <tbody>
                        <tr>
                            <td class="list">
                                <a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
                                    · 哈哈哈哈哈哈哈哈哈哈</a>[10-28]</td>
                        </tr>
                    </tbody>
                </table>
				<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
                    <tbody>
                        <tr>
                            <td class="list">
                                <a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
                                    · 公立医院应消除顾虑主</a>[10-29]</td>
                        </tr>
                    </tbody>
                </table>
				<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
                    <tbody>
                        <tr>
                            <td class="list">
                                <a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
                                    · 哈哈哈哈哈哈哈哈哈哈</a>[10-30]</td>
                        </tr>
                    </tbody>
                </table>
				<table border="0" cellspacing="0" cellpadding="0" width="200" align="center">
                    <tbody>
                        <tr>
                            <td class="list">
                                <a href="/websites/Pages/Web/NewsDetails.aspx?id=63ca6e2d-485d-4231-8f31-b9d01f9fb81b">
                                    · 公立医院应消除顾虑主</a>[10-31]</td>
                        </tr>
                    </tbody>
                </table>
				</div>
				<div id="ImgDemo2">
                
				</div>
                </div>
                <script language="JavaScript">
                    var ScrollingSpeed = 60;
                    ImgDemo2.innerHTML = ImgDemo1.innerHTML;
                    function ScrollMarquee() {
                        if (ImgDemo2.offsetTop - ImgDemo.scrollTop <= 0)
                        { ImgDemo.scrollTop -= ImgDemo1.offsetHeight }
                        else
                        { ImgDemo.scrollTop++; }
                    }
                    var ScrollingMar = setInterval(ScrollMarquee, ScrollingSpeed);
                    ImgDemo.onmouseover = function () { clearInterval(ScrollingMar); } //鼠标移上时清除定时器达到滚动停止的目的
                    ImgDemo.onmouseout = function () { ScrollingMar = setInterval(ScrollMarquee, ScrollingSpeed); } //鼠标移开时重设定时器 
                </script>
                <!--上下滚动结束-->
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

一树梨花压海棠
关注
专栏目录
微信小程序 - 新闻动态 / 公告上下滚动列表（上下循环滚动，无限上下自动滚动列表）
王佳斌
05-26 5949
前言 本文实现了 无限上下自动滚动列表 组件，常见于新闻动态列表、公告等场景，可直接调用。 您可以自定义滚动间隔与显示多少个列表， 另外点击每项会触发事件，可用于跳转到详情页。 代码干净整洁，注释详细，具体如下图所示： 示例代码 推荐使用平台提供的一键复制功能，避免发生漏选难以排查。 随便找个页面，按照以下代码进行依次复制。 <!-- display-multiple-items: 显示的滑块数量(显示几个列表)，注意对应CSS也要更改，保持总高度与每项高度成"正比"，详见CSS文件。 -
uni-app - 文字上下循环滚动翻滚，类似中奖名单与公告栏信息公示等等，自定义组件封装，支持 DIY（适用于新闻动态、公告上下滚动列表、上下循环滚动，无限上下自动滚动列表）兼容小程序/H5/App
最新发布
王佳斌
10-14 8943
uniapp 实现文字横向上下循环滚动，此组件用于翻滚多信息公示，最好的教程，怎么使用swiper实现列表文字公告栏上下循环滚动，UniAPP 文字列表无缝向上滚动，新闻动态 / 公告上下滚动列表（上下循环滚动，无限上下自动滚动列表），常见于新闻动态列表、公告等场景，uni-app - 文字上下循环滚动翻滚，类似中奖名单与公告栏信息公示等等，自定义组件封装，支持 DIY（适用于新闻动态、公告上下滚动列表、上下循环滚动，无限上下自动滚动列表）兼容小程序/H5/App，官方教程。
html滑动直播,HTML5实现直播间评论滚动效果的代码
weixin_33626609的博客
05-30 389
直播间评论滚动效果，下划查看历史消息并停止滚动，如有新消息会出现新消息提醒，点击滚动到底部。2.具体代码{{item.name}}：{{item.content}}{{restComment}}条新消息import smoothscroll from 'smoothscroll-polyfill';import { debounce, isScrollBottom } from '../utils...
jquery+css3实现下拉选择列表上下滚动效果
06-12
下拉菜单，高度固定住，js代码会根据鼠标所在的位置上下移动下拉内容，蛮有创意的一个小玩意儿。虽然是CSS3实现的效果，但是在IE 等低版本浏览器下亦可使用
新闻上下轮播
Mo_zifeng的博客
05-08 690
项目中用到了新闻上下轮播，在网上找比较好的方法，记录一下。（转载自：https://blog.csdn.net/weixin_39522730/article/details/84931667） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t...
Jquery实现新闻上下滚动效果
weixin_34071713的博客
07-07 415
为什么80%的码农都做不了架构师？>>> ...
上下滚动列表
weixin_30872157的博客
11-14 330
HTML <div class="box" id="box"> <a href="javascript:;" class="top"></a> <ul></ul> <a href="javascript:;" class="bottom"></a> </div> CSS...
js 列表自动上下滚动, 开始自顶向下,到底后向上滚动 ,周而复始；
面对疾风吧
12-30 2202
js 实现列表自动上下滚动, 开始自顶向下,到底后向上滚动 ,周而复始;
html新闻上下自动滚动代码,Html js轻松实现 向上下左右循环滚动代码
weixin_36193418的博客
05-30 1152
向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)var speed=30;var colee2=document.getElementById("colee2");var colee1=document.getElementById("colee1");var colee=document.getElementById("colee");colee2.innerHTML=colee1.inne...
原生JS实现列表内容自动向上滚动效果
10-16
// 否则，每次增加1像素，模拟滚动效果 } } ``` 总结起来，原生JavaScript实现列表内容自动向上滚动的关键在于巧妙地利用HTML结构、CSS样式以及JavaScript事件和定时器。通过这个实例，我们可以学习到如何控制...
js实现文本上下来回滚动
12-01
话不多说，请看代码： <!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>多行滚动jQuery循环新闻列表代码</title> <style type
无缝循环新闻列表
04-01
NULL 博文链接：https://runwzj.iteye.com/blog/1426358
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
10-19
在移动端应用开发中，有时我们需要实现一些吸引用户注意力的动态效果，比如资讯上下循环滚动，也被称为跑马灯效果。这种效果常见于新闻标题展示，使得有限的屏幕空间可以展示更多的信息。在本文中，我们将探讨如何在...
上下滚动页面（列表、图文都适用）
moyiyanting的博客
07-11 485
1.新建动态面板，取名“内容面板”，高500cm 2.在动态面板中新建一个动态面板，取名为“滚动面板”，高800cm 3.在内容面板新建交互， A. （1）当向上滚动时，移动，拖动面板 （2）移动 经过 两个动态面板的高度差（小-大）（-300） （3）添加边界： 顶部>=-300 顶部<=0 （4）添加动画：线性500毫秒 B. （1）当向下滚动时，移动，拖动面板 （2）移动 经过 两个动态面板的高度差（大-小）（300） （3）添加边界： 顶部>=500（内容面板的高度） 顶部&lt
好用的滚动方法，列表滚动
weixin_39308542的博客
04-20 665
上下滚动 // javascript原生自动滚动 export default function startmarquee(lh, speed, delay, marqueeObj) { // lh---每行列表的高度，speed---滚动的速度，delay---间隔多久滚动一次,marqueeObj---需要实现这个效果的id var p = false; var t; var o = document.getElementById(marqueeObj); o.inner
新闻上下循环滚动html样式
walle的博客
05-21 8935
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; * { margin:
javascript:新闻上下滚动特效
weixin_30652271的博客
06-06 81
1 <html> 2 <head> 3 <title>1</title> 4 <style type='text/css'> 5 #box{ 6 float:left; 7 border:solid 1px green; 8 overflow:hidden; 9 hei...
html向上无缝滚动,Jquery实现无缝向上循环滚动列表的特效
weixin_34576293的博客
06-03 258
效果呈现整个列表间隔设定的时间向上移动一个item的高度html结构：title1title2title3item1item1item1item2item2item2item2item2item2实现思路：获得js-slide-list下第一个li元素的高度，对它的height或marginTop进行一个从有到无的动画变化，代码如下：var doscroll = function(){var $p...
html内容循环向上滚动效果,Jquery实现无缝向上循环滚动列表的特效
weixin_39935092的博客
06-03 378
效果呈现整个列表间隔设定的时间向上移动一个item的高度html结构：title1title2title3item1item1item1item2item2item2item2item2item2实现思路：获得js-slide-list下第一个li元素的高度，对它的height或marginTop进行一个从有到无的动画变化，代码如下：var doscroll = function(){var $p...
JQuery实现图片轮播与新闻列表滚动效果详解
在本文中，我们将深入探讨如何利用JQuery实现页面上的图片切换和新闻列表滚动效果。首先，我们从HTML结构入手，展示了HTML文档的基本框架，包括`<html>`, `<head>`, `<meta>`, 和 `<body>`标签。`<head>`部分包含了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值