js怎么实现一段文字的显示有个明显的过渡效果

Posted 2023-04-19

有一个数组里面存放了一些数据，我写一个定时器，让着写数组里的数据每次显示一个。怎么让中间切换显示的过程有个过渡效果，而不是一下子就出来了。给个思路 谢谢

参考技术A 网页元素一个一个删除，然后一个一个载入新网页的元素,这样子网页在过度过程中会出现变形和抖动。
比较好的办法是把老网页和新网页的元素分别放置到一个层里，开始是现实老网页层，新网页层display设为none，不显示。
过度时使用新网页层盖住老网页层，过度效果就是新网页层盖住老网页层的过程效果。效果可以百度一下。当新网页层完全盖住老网页层时，把老网页层（这是页个元素）删除就可以了。 参考技术B jquery有很多简单好用过度展示方法，slideDown(), slideUp,fadeIn(),括号内可以加这个过程所需的时间，$('select').fadeIn(500), 500毫秒展示这个选中的元素追问

我的文字是不断变化的，那样不行吧

追答

怎么变化？

本回答被提问者和网友采纳 参考技术C 用淡入淡出啊fadeIn() fadeOut()追问

我的文字是不断变化的，那样不行吧

一行文字跑马灯怎样用Jquery或js做？

使用方法：

使用该跑马灯特效之前要先引入jQuery和marquee.js文件。

<script src="jquery-1.11.2.min.js"></script> <script src="marquee.js"></script>

HTML结构：

跑马灯中的文字使用无序列表来制作，外面使用一个<div>作为包裹容器。

123456789101112    <div class="container">  <div class="marquee-sibling"> Breaking News </div>  <div class="marquee">    <ul class="marquee-content-items">      <li>Item 1</li>      <li>Item 2</li>      <li>Item 3</li>      <li>Item 4</li>      <li>Item 5</li>    </ul>  </div></div>    

CSS样式：

下面是该跑马灯特效的一些基本样式。

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354    .container   width: 100%;  background: #4FC2E5;  float: left;  display: inline-block;  overflow: hidden;  box-sizing: border-box;  height: 45px;  position: relative;  cursor: pointer;  .marquee-sibling   padding: 0;  background: #3BB0D6;  width: 20%;  height: 45px;  line-height: 42px;  font-size: 12px;  font-weight: normal;  color: #ffffff;  text-align: center;  float: left;  left: 0;  z-index: 2000;  .marquee,*[class^="marquee"]   display: inline-block;  white-space: nowrap;  position: absolute;  .marquee  margin-left: 25%;   .marquee-content-items   display: inline-block;  padding: 5px;  margin: 0;  height: 45px;  position: relative;  .marquee-content-items li   display: inline-block;  line-height: 35px;  color: #fff;  .marquee-content-items li:after   content: "|";  margin: 0 1em;    

初始化插件：

123    $(function ()  createMarquee(););    

在页面加载完毕之后，可以通过下面的方法来初始化该跑马灯插件。

配置参数：

下面是该跑马灯特效的可用配置参数。

12345678910111213141516171819202122232425262728    $(function ()    createMarquee(          // controls the speed at which the marquee moves    duration:30000,       // right margin between consecutive marquees    padding:20,       // class of the actual div or span that will be used to create the marquee -     // multiple marquee items may be created using this item's content.     // This item will be removed from the dom    marquee_class:'.example-marquee',       // the container div in which the marquee content will animate.     container_class: '.example-container',       // a sibling item to the marqueed item  that affects -     // the end point position and available space inside the container.     sibling_class: '.example-sibling',       // Boolean to indicate whether pause on hover should is required.     hover: false    );  );    

参考技术A <div align="center" id="demo" style="overflow:hidden;height:200px;width:600px;border:1px solid #000;">
<div id="demo1">
标准之路——DIV+CSS教程,网而布局,web2.0,常用代码,水晶图标,幻灯图片
</div>
<div id="demo2"></div>
</div>
<script language="javascript" type="text/javascript">
<!--
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
var speed=10; //滚动速度值，值越大速度越慢
var nnn=200/demo1.offsetHeight;
for(i=0;i<nnn;i++)demo1.innerHTML+="<br />"+ demo1.innerHTML
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>