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

Posted 2023-04-04

使用方法：

使用该跑马灯特效之前要先引入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>

怎样使用js或jquery复制li里的文字？

<li><span>需要复制的内容1</span> <a>复制</a></li><li> <span>需要复制的内容2</span> <a>复制</a></li>
<li><span>需要复制的内容3</span> <a>复制</a></li>

怎样实现当点击右边的复制时，成功复制<span>里面的文字并弹出提示框 “复制成功”呢？

参考技术A js方法不支持火狐，推荐使用flash实现 参考技术B 请参阅帮助文档。