jquery跑马灯效果

要实现简单的跑马灯效果其实运用html中marquee/marquee标签就可以达到了

创新互联建站是一家集网站建设,南陵企业网站建设,南陵品牌网站建设,网站定制,南陵网站建设报价,网络营销,网络优化,南陵网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

基本属性如下：

1.滚动方向direction（包括4个值：up、 down、 left和 right）

2.滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）

3.滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位）

4.滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒）

5.滚动循环loop（默认值是-1，滚动会不断的循环下去）

6.滚动范围width、height

7.滚动背景颜色bgcolor

8.空白空间hspace、vspace

如果想要更多的动画效果，更多选择jquery.marquee.js这款插件——ul里的啥都能滚并自带悬停效果

1.html 中写入ul id="marquee"li/li/ul

2.js中调入$("#marquee").marquee();即可

3.css比较简单，一般自己写，大致如下：

ul.marquee{display:block;line-height:1;position:relative;overflow:hidden;width:400px;height:22px;}

ul.marquee li{ position:absolute;top:-999em;left:0; display:block; white-space:nowrap ;padding:3px5px;text-indent:0.8em;}

4.相关参数如下：

{

yScroll:"top";  // 初始滚动方向 (还可以是"top" 或 "bottom")

showSpeed:850;  // 初始下拉速度

scrollSpeed:12;  // 滚动速度

pauseSpeed:5000;  // 滚动完到下一条的间隔时间

pauseOnHover:true;  // 鼠标滑向文字时是否停止滚动

loop:-1;  // 设置循环滚动次数 （-1为无限循环）

fxEasingShow:"swing";  // 缓冲效果

fxEasingScroll:"linear";  // 缓冲效果

cssShowing:"marquee-showing";  //定义class event handlers

init:null;  // 初始调用函数

beforeshow:null;  // 滚动前回调函数

show:null;  // 当新的滚动内容显示时回调函数

aftershow:null;  // 滚动完了回调函数

}

求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；可根据自己的需求来修改

最后效果就是

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

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做？

使用方法：

使用该跑马灯特效之前要先引入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跑马灯,跑马灯实现
分享URL：http://csdahua.cn/article/dsdgdig.html