您的位置:

js案例之跑马灯代码,js跑马灯的实现

js案例之跑马灯代码,js跑马灯的实现

更新:

本文目录一览:

一行文字跑马灯怎样用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"      liItem 1/li      liItem 2/li      liItem 3/li      liItem 4/li      liItem 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    });  });  

jquery 跑马灯 怎么 实现 循环

打开 Dreamweaver

新建 HTML 文档;

修改标题为"跑马灯"

保存为 index.html 文件。

jquery跑马灯 图片不间断滚动效果

首先,编写跑马灯部分的静态 HTML 代码,把图片排列起来

在 body 和 /body 标签中添加以下代码:

div

 ul

liimg src="img/1.jpg" //li

liimg src="img/2.jpg" //li

liimg src="img/3.jpg" //li

liimg src="img/4.jpg" //li

liimg src="img/5.jpg" //li

liimg src="img/6.jpg" //li

liimg src="img/7.jpg" //li

 /ul

/div

jquery跑马灯 图片不间断滚动效果

给上一步的 HTML 代码中的 div 标签增加 class 属性,如下:

 div class="con"

编写跑马灯部分的 CSS 样式代码,代码放在 head 和 /head 标签中,如下:

style type="text/css"

 ul{list-style:none; padding:0; margin:0;}

 .con{ width:1105px; height:225px; overflow:hidden; border:2px solid #666; margin:10px auto 0 auto; padding:5px 0 0 5px;}

 .con ul li{ float:left; margin:0 5px 10px 0;}

 .con ul li img{ display:block; width:209px; height:209px; padding:2px; border:1px solid #ccc;}

/style

jquery跑马灯 图片不间断滚动效果

引入 JQuery 库

 script type="text/javascript" src="jquery-1.11.0.min.js"/script

引入 Marquee 插件

 script type="text/javascript" src="marquee2.js"/script

代码放在 /body 标签前,如图:

jquery跑马灯 图片不间断滚动效果

给 div 增加 marquee 类

 div class="con marquee"

保存文件,在浏览器中打开,就可以看到图片开始滚动了。

jquery跑马灯 图片不间断滚动效果

图片默认的滚动方向是“向上滚动”

如果要修改图片滚动的方向,可以给 div 指定 direction 属性,属性值可以取:

 up 上

 down 下

 left 左

 right 右

jquery跑马灯 图片不间断滚动效果

完整的例子放在百度网盘中,需要的请发邮件到 xdhy_dn@foxmail.com

主题写 “百度经验”。自动回复下载地址

求Jquery或js一行文字跑马灯代码

这个完全是我本人自己真实项目当中的代码

其实不用js 用css3就能完成

代码如下

标签:{

background: -webkit-gradient(linear,left top,right top,color-stop(0, #3CAF5A),color-stop(0.3, #3CAF5A),color-stop(0.5, white),color-stop(0.7, #3CAF5A),color-stop(1, #3CAF5A));

background-clip: text; //文字背景区域

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

text-fill-color: transparent;

-webkit-animation: slidetounlock 2s linear infinite; //动画执行的参数 第一是 动画执行的名字   第二是所需时间  第三是执行动画的快慢infinite是均速 第四个参数是循环

animation: slidetounlock 2s linear infinite;

}  

为了兼容建议把写全 百分比是指动画执行到多少以后执行里面的动画

@keyframes slidetounlock{

0% {

background-position: -2rem 0;

}

80% {

background-position: 1rem 0;

}

100% {

background-position: 2rem 0;

}

}

@-webkit-keyframes slidetounlock{

0% {

background-position: -2rem 0;

}

80% {

background-position: 1rem 0;

}

100% {

background-position: 2rem 0;

}

}

@-moz-keyframes slidetounlock{

0% {

background-position: -1.1rem 0;

}

80% {

background-position: 1rem 0;

}

100% {

background-position: 1.1rem 0;

}

}

@-ms-keyframes slidetounlock{

0% {

background-position: -1.1rem 0;

}

80% {

background-position: 1rem 0;

}

100% {

background-position: 1.1rem 0;

}

}

@-o-keyframes slidetounlock{

0% {

background-position: -1.1rem 0;

}

80% {

background-position: 1rem 0;

}

100% {

background-position: 1.1rem 0;

}

}

之后你只需要设置文字所在容器的宽度就行,用px可以代替rem;可根据自己的需求来修改

最后效果就是

白色会一直从左到右 有点像早期苹果滑动解锁的那种动画,这个可以根据实际需求来修改

js怎么实现标题跑马灯功能?

这边百度了一个代码,供参考

!DOCTYPE html

html

head

meta charset="UTF-8"

titlejs跑马灯效果/title

/head

body

div id="txt" style="color: white;background-color: red;text-align: center;font-size: 50px;"欢迎您的来访!/div

script type="text/javascript"

setInterval(function ()//通过定时器重复动作

{

var oTxt = document.getElementById('txt'); //获取标签

var txt = oTxt.innerText; //获取标签文本内容

var first_i = txt[0]; //字符串索引取值

var last_i = txt.slice(1,txt.length);//字符串切片

var new_txt = last_i + first_i;//字符串拼接

oTxt.innerText = new_txt; //拼接后的字符串放到标签文本内容

},300)

/script

/body

/html

急需一个连续不间断的跑马灯的代码

我这有个精简版的连续不间断的跑马灯的代码js的:html

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

/head

body

div id=roll1 style="OVERFLOW:hidden; WIDTH:450px;"

table

tr

td id=rollleft1

table

tr

td1111111111111111/td

td2222222222222222/td

td3333333333333333/td

td4444444444444444/td

/tr

/table

/td

td id=rollright1 /td

/tr

/table

/div

table

tr

td

SCRIPT language=JavaScript type=text/JavaScript

var speed1=22

rollright1.innerHTML=rollleft1.innerHTML

function Marquee1(){

if(rollright1.offsetWidth-roll1.scrollLeft=0)

roll1.scrollLeft-=rollleft1.offsetWidth

else{

roll1.scrollLeft++

}

}

var MyMar1=setInterval(Marquee1,speed1)

roll1.onmouseover=function() {clearInterval(MyMar1)}

roll1.onmouseout=function() {MyMar1=setInterval(Marquee1,speed1)}

/SCRIPT

/td

/tr

/table

/body

/html

JS跑马灯代码如何实现

jquery的,参考一下吧,希望对你有帮助 ,如果有不明白的,可以追问

js案例之跑马灯代码,js跑马灯的实现

本文目录一览: 1、一行文字跑马灯怎样用Jquery或js做? 2、jquery 跑马灯 怎么 实现 循环 3、求Jquery或js一行文字跑马灯代码 4、js怎么实现标题跑马灯功能? 5、急需一个连

2023-12-08
js标题跑马灯,跑马灯js代码

2022-11-23
js跑马灯代码,花式跑马灯代码解析

2022-11-25
JavaScript跑马灯的实现

2023-05-16
js走马灯怎么写,js跑马灯效果展示

2022-11-28
跑马灯效果

2023-05-19
iOS跑马灯实现

2023-05-20
c语言版跑马灯,c语言版跑马灯led闪烁

2022-11-23
如何制作带动效的跑马灯文字

2023-05-12
TextView跑马灯效果详解

2023-05-17
深入解析走马灯图片

2023-05-20
Vue走马灯实现轮播图

2023-05-17
Vue走马灯详解

2023-05-20
Swiper4——全能的轮播插件

2023-05-17
js幻灯片轮番代码案例,js幻灯片轮播原理

本文目录一览: 1、网页轮显幻灯片是怎么做的 2、在javascript中图片的轮番播放怎么做 3、求js轮番图片代码 网页轮显幻灯片是怎么做的 用JS(JavaScript)+CSS或Applet做

2023-12-08
js气泡文字标签云代码,js气泡提示

本文目录一览: 1、如何在页面加载后调用js的代码自动复制一段文字 2、js中什么是事件气泡,如何阻止事件气泡 3、求Jquery或js一行文字跑马灯代码 如何在页面加载后调用js的代码自动复制一段文

2023-12-08
改变状态栏文字的js代码(改变状态栏文字的js代码怎么用)

本文目录一览: 1、JS怎么改变里面的的文字? 2、js源代码 如何定时更换页面文字 3、求JS实现状态栏文字走马灯效果 4、js更改状态栏的显示内容 5、请教,怎么用jquery或js给button

2023-12-08
js左右滚动幻灯片代码(幻灯片多图滚动)

本文目录一览: 1、js实现图片左右滚动 2、如何制作JS+DIV左右滚动的切换图 3、哪位好心人能否给我写个简单js的幻灯片代码,三个文件(HTML,CSS,JS)我是初学者,一张图片 4、JS如何

2023-12-08
js红绿灯css代码(用js写红绿灯)

本文目录一览: 1、JS加HTML加CSS怎么制作红绿灯倒计时? 2、JS中制作红绿灯的代码? 3、360安全浏览器3.5和360安全浏览器3.9的区别,哪个更好 JS加HTML加CSS怎么制作红绿灯

2023-12-08
js图片幻灯片模式切换代码(图片切换代码html5)

本文目录一览: 1、Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3) 2、js幻灯片左右切换是怎么做出来的 3、如何设置用JS实现的幻灯片自动切换效果的宽高? 4、JavaScript

2023-12-08