<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易marquee效果</title>
<style type="text/css">
#marquee2{
width:400px;
/**超出元素部分隐藏*/
overflow:hidden;
background:#EFEFEF;
/**定位放在中间主要是为不放到屏幕边缘*/
position: absolute;
left:200px;
top:150px;
}
#marquee2 ul{
list-style: none;
position: relative;
left: auto;
top:auto;
}
#marquee2 ul li{
float:left;
padding:0 10px;
line-height:25px;
}
</style>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script type="application/javascript">
$(document).ready(function () {
var marqueeWith = $('#marquee2').width();
var left = $('#marquee2 ul').width();
console.log(left);
var animateTime = 5000;
//移动到#marquee2宽度结尾的时间
var resetTimeout = 10;
//让ul元素在animateTime内向移动marqueeWith像素
$('#marquee2 ul').animate({'left': '-'+(marqueeWith)+'px'},animateTime);
setInterval(function(){
console.log('a')
//使ul元素在10毫秒内移到父元素div的宽度外
$('#marquee2 ul').animate({'left': marqueeWith +'px'},resetTimeout);
setTimeout(function(){
$('#marquee2 ul').animate({'left': '-'+(marqueeWith)+'px'},animateTime);
},resetTimeout);
},(animateTime+resetTimeout));
})
</script>
</head>
<body>
<div id="marquee2" >
<ul>
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
<li><img src="http://ku.shouce.ren/libs/kxbdMarquee/img/02s.jpg" /></li>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
例如，要设置一个从右向左滚动，持续5秒的Marquee，可以这样写： ```javascript $('.marquee').marquee({ duration: 5000, direction: 'left' }); ``` 五、事件与方法 jQuery Marquee还提供了几个有用的事件和...
在本文中，我们将深入探讨`marquee.js`插件，这是一个强大的JavaScript工具，用于实现各种jQuery滚动效果。`marquee.js`是专门为那些希望在网站上添加动态、吸引人的滚动效果的开发者设计的。它兼容了jQuery库，为...
jQuery Marquee插件是基于JavaScript库jQuery的一款插件，它提供了丰富的定制选项，如滚动速度、方向、暂停、启动等，使得创建动态效果变得更加灵活。下面我们将深入探讨这款插件的核心功能和使用方法。 1. **安装...
本文将深入探讨jQuery Marquee.js的特性、使用方法以及如何实现多种滚动效果。 首先，我们来看看jQuery Marquee的核心特性。这个插件的主要目标是提供一个简单易用的API，使开发者能够轻松地在网页上创建自定义滚动...
**jQuery 模仿 Marquee 实现间歇式无缝滚动** 在网页设计中，有时我们需要创建一个类似电视新闻滚动条的效果，让文字或图片能够不间断地滚动显示。在HTML5时代，我们可以利用JavaScript库如jQuery来实现这样的效果...
jQuery 是一个广泛使用的 JavaScript 库，它简化了DOM操作、事件处理和动画效果，因此用jQuery来实现公告的上下无缝滚动是理想的选择。在本教程中，我们将深入探讨如何使用jQuery实现这个功能。 首先，我们需要在...
其中，跑马灯效果是一种常见的滚动显示文本的方式，它可以使信息在有限的空间内持续滚动展示，而jQuery.Marquee插件就是实现这一效果的优秀工具。 ## jQuery库简介 jQuery是一款高效、简洁的JavaScript库，它简化...
通过以上步骤，我们可以使用 jQuery 创建一个类似于传统 Marquee 的无缝滚动效果，而且这种方法更加灵活，可以轻松地与其他 jQuery 功能结合，或者进行更复杂的动画操作。实践过程中，你可以根据需求调整滚动速度、...
水平滚动字幕jquery插件，marquee效果。使用：$('.txt-scroll').txtscroll({'speed': 50});
Marquee.js插件提供了许多属性选项，您可以配置定制外观和效果。 { yScroll: "top" // 初始滚动方向 (还可以是"top" 或 "bottom") showSpeed: 850 // 初始下拉速度 scrollSpeed: 12 // 滚动速度 , pauseSpeed: 5000...
js div实现左右滚动 无缝接 ，比 marquee强
jQuery.Marquee是一款强大的前端插件，它为开发者提供了便捷的方式来实现文本、图像等元素的平滑滚动效果，类似于传统的电视字幕。这款插件由Aamirafridi开发，并在...
- 示例：`<marquee direction="left">向左滚动的文字</marquee>` - **`height`** 和 **`width`**: 分别设置滚动区域的高度和宽度。 - 示例：`<marquee height="10%" width="200">指定高度为10%，宽度为200px的...
"jQuery文字向左无缝隙滚动"是一种利用jQuery库实现的滚动效果，使得文本能够在页面上连续、平滑地从右向左移动，给人以无缝滚动的视觉体验。本篇文章将深入探讨如何使用jQuery来实现这一功能，以及其在不同浏览器中...
jQuery Marquee是一款基于jQuery的插件，用于实现走马灯效果，这种效果通常在网站上用来展示滚动文本或图片，可以水平或者垂直滚动，增加视觉吸引力。走马灯效果是网页设计中常见的动态元素，尤其在新闻网站、广告...
推荐一个JQuery的无缝文字滚动效果，同时也可以滚动图片，也叫做跑马灯效果。 此jquery插件，依托jquery库，能实现各种滚动效果，且让HTML代码符合W3C标准。 使用方法如下： 1、加载javascript。 [removed][removed...
1. **HTML `<marquee>` 元素**：这是一个非标准但广泛支持的HTML标签，用于创建一个可滚动的内容区域，通常向左或向右滚动。默认情况下，它适用于文本，但可以通过CSS和JavaScript扩展到图片或其他元素。 2. **无缝...
无缝滚动通常需要设置一个定时器，定时地将内容从容器的末端移动到开头，或者从开头移动到末端，这样就产生了循环滚动的效果。可以通过设置循环动画，利用jQuery的"animate"函数来实现这一点。具体地，使用".animate...
5. **自定义滚动效果**：`jquery.marquee.js`提供了丰富的选项来自定义滚动行为，如设置速度、延迟、是否允许反向滚动等，可以根据实际需求进行配置。 **注意事项** - **浏览器兼容性**：虽然jQuery库本身有很好的...