循环滚动得效果

最新推荐文章于 2024-03-28 22:39:07 发布
最新推荐文章于 2024-03-28 22:39:07 发布
阅读量647 收藏
点赞数
文章标签： delay class function border xhtml div

经常看到一组图片或内容在一定时间内循环滚动得效果，下面是代码，可以自己运行看看，在这里面主要有三个参数；startmarquee(lh,speed,delay) lh是class为ir得div得行高也是高度，当lh为一个行高时，每次滚动向前滚动一项，lh为2个行高时，向前滚动2项，以此类推，与此同时<DIV style="OVERFLOW: hidden; LINE-HEIGHT: 66px; HEIGHT: 66px; border:solid 1px #f00">得高度要跟着相应改变，speed是滚动得速度，delay是滚动完一次后停顿得时间。

<!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=gb2312" />
<title></title>
<style type="text/css">
.ir{
height:22px;
line-height:22px;
font-size:14px;
}
</style>
</head>


<body>
<DIV style="OVERFLOW: hidden; LINE-HEIGHT: 66px; HEIGHT: 66px; border:solid 1px #f00">

<DIV id=marqueebox style="MARGIN-TOP: -22px">

<DIV class=ir><A href="http://tieba.baidu.com/f?kz=336592214&amp;bl=tbkd_03"
target=_blank>美妙歌声来自吧友的倾情翻唱</A></DIV>

<DIV class=ir><A href="http://tieba.baidu.com/f?kz=344258201&amp;bl=tbkd_04"
target=_blank>周杰伦演唱会抢票</A></DIV>

<DIV class=ir><A href="http://tieba.baidu.com/f?kz=343094288&amp;bl=tbkd_05"
target=_blank>[吧友活动]贴吧专访</A></DIV>

<DIV class=ir><A href="http://tieba.baidu.com/f?kz=336592214&amp;bl=tbkd_03"
target=_blank>gfgf</A></DIV>

<DIV class=ir><A href="http://tieba.baidu.com/f?kz=344258201&amp;bl=tbkd_04"
target=_blank>gfgfgfgfg</A></DIV>

<DIV class=ir><A href="http://tieba.baidu.com/f?kz=343094288&amp;bl=tbkd_05"
target=_blank>fgfdgdfgfdgfg</A></DIV>

</DIV>

</DIV>
<SCRIPT>
function startmarquee(lh,speed,delay) {
var p=false;
var t;
var o=document.getElementById("marqueebox");
o.innerHTML+=o.innerHTML;
o.style.marginTop=0;
o.οnmοuseοver=function(){p=true;}
o.οnmοuseοut=function(){p=false;}

function start(){
t=setInterval(scrolling,speed);
if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
}

function scrolling(){
if(parseInt(o.style.marginTop)%lh!=0)
{
o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
}
else{
clearInterval(t);
setTimeout(start,delay);
}
}
setTimeout(start,delay);
}
startmarquee(66,20,3500);
</SCRIPT>
</body>
</html>

 

trackback:http://hi.baidu.com/kongqi1027/blog/item/66ebe32b1f36eafee7cd404e.html

Sisony
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
循环滚动字符串的几种方法
有道难题
04-17 1681
题目例有字符串“abcdefg”，令其向右循环滚动3个字符，则会得到“efgabcd”现给定字符串和滚动字符数，设计一个算法方法一：转变为子问题例如刚才的题目，我们用(a,b)表示a个字符中滚动b次abcdefg  可以用(7,3)表示，令左边3个字符和右边3个字符交换位置，得到efg(dabc) 其中前3个字符位置已经正确，题目变为(4,3)，同理得到efg(cab)d 题目变为(3,2)，同理得到efg(ba)cd 题目变为(2,1)，同理得到efgabcd，即所求实现代码void RightShift
Unity实现3D循环滚动效果
08-26
Unity 实现 3D 循环滚动效果 Unity 中实现 3D 循环滚动效果是一个常见的需求，对于游戏、应用程序和其他交互式应用程序非常重要。本文将详细介绍如何使用 Unity 实现 3D 循环滚动效果，包括相关知识点和实现代码。...
很简洁的循环滚动效果
WRITELN
03-18 1099
ul id="contain">li>alist 1i>li>blist 2i>li>clist 3i>li>dlist 4i>ul>SCRIPT LANGUAGE="JavaScript">function xx()...{var container=document.getElementById("contain");container.appendChild(container.firs
图片循环滚动效果
zsf53543831的博客
02-21 658
* { margin:0;padding:0} .containerBox { position: relative;overflow: hidden; width: 900px; height:60px;margin:50px auto;border: 1px solid red;} .containerBox ul { position:absolute;ov
用3个label实现scrollView的循环滚动效果
lf20105103039的专栏
03-17 823
#import "ViewController.h"@interface ViewController ()<UIScrollViewDelegate>@property (nonatomic,strong)UIScrollView * scrollView; @property (nonatomic,strong)UIPageControl * pageControl;@property (non
原生js实现无缝循环滚动效果
最新发布
初辰的博客
03-28 655
原生js实现如下图无缝循环滚动效果。
JavaScript代码实现图片循环滚动效果
10-22
在介绍如何利用JavaScript实现图片循环滚动效果之前，我们首先要知道，这种效果可以使Web页面更具有动态性，提升用户体验，同时能够有效利用页面空间，在有限的屏幕上展示更多的图片内容。那么具体来说，实现图片...
无间断图片循环滚动效果特效代码
03-20
标题 "无间断图片循环滚动效果特效代码" 涉及到的是网页设计中的动态效果技术，特别是关于图片展示的一种常见交互方式。这种效果通常用于网站的轮播图或者产品展示区域，它允许图片在用户面前自动连续播放，提供一种...
自动循环滚动效果
04-03
自动循环滚动效果源码，源码PagedScrollView，自动循环滚动scrollView，也支持手动滚动。特点如下：1、类似UITableView的dataSource和delegate的设计模式，使用block来配置数据源和代理事件，代码功能集中，耦合度低...
JS实现的文字间歇循环滚动效果完整示例
10-18
标题“JS实现的文字间歇循环滚动效果完整示例”表明文章重点在于使用JavaScript（JS）来实现一个文字在页面上自动进行间歇性、循环滚动的动态效果。描述中提到的关键技术包括JavaScript的时间函数、定时触发机制和...
优化无限循环滚动的ScrollView
05-07
简单几句代码就可以集成无限滚动的ScrollView。 通过新的方式去实现无限滚动功能，模式采用类似UITableView的机制，在代理中给你的滚动view赋值，只要是UIView都可以，不需要一定是UIImageView。 摒弃了普通思路在didScroll这个代理里面去翻页，优化了翻页的算法，手动滑动过程中自动滑动和手动滑动不相互影响。
js实现文字内容无缝滚动动画效果
06-20
js实现文字内容无缝循环滚动动画效果，效果显示 http://t.harjes.cn/wfgd/ 使用方法简单，希望对有需要的人有帮助
纯css实现文字循环滚动效果-转载
qq_40184218的博客
02-14 2090
纯css实现文字循环滚动效果-转载 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <me
不间断连续图片滚动效果的制作方法
phphot
05-25 1880
http://blog.csdn.net/phphot">var speed=30demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(demo2.offsetTop-demo.scrollTopdemo.scrollTop-=demo1.offsetHeightelse{demo.scrollTop++}}var MyMar=setInterv
如何使用CSS实现一个无限循环滚动的图片轮播效果？
官方推荐
08-24 8636
如何使用CSS实现一个无限循环滚动的图片轮播效果？
Vue3使用Swiper实现列表内容循环滚动效果
持续学习中
08-29 7841
我们要实现的效果就是在Vue3中使用swiper实现列表内容向上循环滚动效果，而且是每次滚动一条内容。其实这个效果是我在写大屏内容滚动页面时用到的。我这里使用的swiper版本是8.1.1。安装命令为：npm i swiper。......
实现一个 自动无限循环滚动的 列表
qq_30585525的博客
08-29 6645
function UiGameSettings:TempInit()     self._ItemData = {"1","2","3","4","5","6","7","8","9","10"}     local lenData = #self._ItemData     local maxRealInd
CSS实现上下循环滚动效果
QSWの
11-01 9742
参考此博客
javascript实现图片循环滚动效果
05-27
可以使用以下代码实现图片循环滚动效果： HTML代码： ```html <div class="slider"> <div class="slider-container"> <img src="img1.jpg"> <img src="img2.jpg"> <img src="img3.jpg"> <img src="img4.jpg"> </div> </div> ``` CSS代码： ```css .slider { overflow: hidden; } .slider-container { display: flex; width: 400%; animation: slide 10s infinite linear; } @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } .slider-container img { width: 25%; } ``` JavaScript代码： ```javascript var slider = document.querySelector('.slider'); var container = document.querySelector('.slider-container'); var imgs = container.querySelectorAll('img'); var imgWidth = imgs[0].width; var containerWidth = imgWidth * imgs.length; container.style.width = containerWidth + 'px'; slider.addEventListener('mouseenter', function() { container.style.animationPlayState = 'paused'; }); slider.addEventListener('mouseleave', function() { container.style.animationPlayState = 'running'; }); ``` 这段代码使用了flex布局和CSS动画来实现图片循环滚动效果。JavaScript代码用来处理图片容器的宽度和鼠标悬停事件。当鼠标悬停在图片上时，动画会暂停，当鼠标移开时，动画会继续播放。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值