html 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta name="robots" content="index,follow">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="ie-stand">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<title>marquee</title>
<style>
.marquee{
width: 200px;
height: 165px;
overflow: hidden;
position: relative;
}
.box1{
display: flex;
flex-direction: column;
position: absolute;
top: 0;
}
.box1 .box-item1{
width: 200px;
height: 50px;
line-height: 50px;
font-size: 24px;
color: #fff;
font-weight: bold;
text-align: center;
}
.marquee2{
width: 300px;
height: 60px;
position: relative;
overflow: hidden;
}
.box{
display: flex;
position: absolute;
left: 0;
}
.box-item{
width: 50px;
height: 60px;
margin: 0 10px;
line-height: 60px;
font-size: 30px;
color: #fff;
font-weight: bold;
text-align: center;
}
.box-item:nth-child(8n+1){
background: #4A89DC;
}
.box-item:nth-child(8n+2){
background: #3BAFDA;
}
.box-item:nth-child(8n+3){
background: #37BC9B;
}
.box-item:nth-child(8n+4){
background: #F6BB42;
}
.box-item:nth-child(8n+5){
background: #AAB2BD;
}
.box-item:nth-child(8n+6){
background: #F6BB42;
}
.box-item:nth-child(8n+7){
background: #E9573F;
}
.box-item:nth-child(8n+8){
background: #967ADC;
}
</style>
</head>
<body>
<div class="marquee">
<div class="box1">
<div class="box-item1 box-item">A</div>
<div class="box-item1 box-item">B</div>
<div class="box-item1 box-item">C</div>
<div class="box-item1 box-item">D</div>
<div class="box-item1 box-item">E</div>
<div class="box-item1 box-item">F</div>
<div class="box-item1 box-item">G</div>
<div class="box-item1 box-item">H</div>
</div>
</div>
<div class="marquee2">
<div class="box">
<div class="box-item">A</div>
<div class="box-item">B</div>
<div class="box-item">C</div>
<div class="box-item">D</div>
<div class="box-item">E</div>
<div class="box-item">F</div>
<div class="box-item">G</div>
<div class="box-item">H</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
/**
* Created by shanaon 2017/9/1.
* 跑马灯无缝滚动
*/
//闭包限定命名空间
(function ($) {
$.fn.marquee = function (options) {
//默认配置
var defaults = {
scroll: 'up',
speed: 40,
drag: true
};
var opts = $.extend({}, defaults, options), intId = [];
var _this = this;
var timer = null;
var sDiv = _this.children();
var _move = false;//移动标记
var _x, _y;//鼠标离控件左上角的相对位置
var _sx, _sy; //滚动元素的初始位置
if (opts.scroll == 'left' || opts.scroll == 'right') {
var c = sDiv.children();
var h = c.outerWidth(true) * c.length;
var ph = _this.width();
} else {
var h = sDiv.outerHeight(true);
var ph = _this.height();
}
if (h > ph) {
var sHtml = sDiv.html() + sDiv.html();
sDiv.html(sHtml);
var sh = sDiv.outerHeight(true);
var cw = sDiv.children();
var step = -1;
if (opts.scroll == 'down' || opts.scroll == 'right') {
step = 1;
}
if (opts.scroll == 'left' || opts.scroll == 'right') {
sh = cw.outerWidth(true) * cw.length;
}
move();
function move() {
if (opts.scroll == 'up' || opts.scroll == 'down') {
timer = setInterval(function () {
sDiv.css('top', sDiv[0].offsetTop + step + 'px');
if (sDiv[0].offsetTop <= -sh / 2) {
sDiv.css('top', '0');
} else if (sDiv[0].offsetTop >= 0) {
sDiv.css('top', -sh / 2 + 'px');
}
}, opts.speed);
} else {
timer = setInterval(function () {
sDiv.css('left', sDiv[0].offsetLeft + step + 'px');
if (sDiv[0].offsetLeft <= -sh / 2) {
sDiv.css('left', '0');
} else if (sDiv[0].offsetLeft >= 0) {
sDiv.css('left', -sh / 2 + 'px');
}
}, opts.speed);
}
}
_this.mouseover(function () {
clearInterval(timer);
});
_this.mouseout(function () {
move();
});
//是否可拖动
if(opts.drag){
_this.css('cursor', 'move');
_this.mousedown(function (e) {
_move = true;
_x = e.pageX;
_y = e.pageY;
_sx = sDiv[0].offsetLeft;
_sy = sDiv[0].offsetTop;
});
_this.mousemove(function (e) {
if (_move) {
var x = e.pageX - _x;//移动时根据鼠标位置计算控件左上角的绝对位置
var y = e.pageY - _y;
if (opts.scroll == 'down' || opts.scroll == 'up') {
if((_sy + y) < 0 && (_sy + y) > -sh / 2){
$(sDiv).css('top', (_sy + y));
}
}
if (opts.scroll == 'left' || opts.scroll == 'right') {
if((_sx + x) < 0 && (_sx + x) > -sh / 2) {
$(sDiv).css('left', (_sx + x));
}
}
}
});
$(document).mouseup(function () {
_move = false;
});
}
}
}
})(jQuery);
var options = {
scroll: 'up',
speed: 140, //滚动速度,值越大速度越慢
};
$('.marquee').marquee(options);
var options2 = {
scroll: 'left',
speed: 140, //滚动速度,值越大速度越慢
};
$('.marquee2').marquee(options2);
</script>
</body>
</html>
【2017-08-11: 内容长度不超过滚动容器时，不进行滚动。】 【2017-08-11: outerHeight(true) 获取高度包括content+padding+border+margin】 【2017-08-11: 修复offset()。】 【2017-09-01: 添加滚动拖动功能。】
