Daci
2 years ago
@ -0,0 +1,24 @@ |
|||||
|
.DS_Store |
||||
|
node_modules |
||||
|
/dist |
||||
|
|
||||
|
/tests/e2e/videos/ |
||||
|
/tests/e2e/screenshots/ |
||||
|
|
||||
|
# local env files |
||||
|
.env.local |
||||
|
.env.*.local |
||||
|
|
||||
|
# Log files |
||||
|
npm-debug.log* |
||||
|
yarn-debug.log* |
||||
|
yarn-error.log* |
||||
|
|
||||
|
# Editor directories and files |
||||
|
.idea |
||||
|
.vscode |
||||
|
*.suo |
||||
|
*.ntvs* |
||||
|
*.njsproj |
||||
|
*.sln |
||||
|
*.sw? |
||||
|
After Width: | Height: | Size: 586 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 225 B |
|
After Width: | Height: | Size: 323 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,192 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="zh-CN"> |
||||
|
|
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<title>jQuery无缝滚动</title> |
||||
|
<style> |
||||
|
* { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
.container { |
||||
|
width: 400px; |
||||
|
margin: 50px auto; |
||||
|
} |
||||
|
|
||||
|
.header { |
||||
|
text-align: center; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
border-left: 5px solid blue; |
||||
|
line-height: 35px; |
||||
|
padding-left: 5px; |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
|
||||
|
.scroll { |
||||
|
width: 400px; |
||||
|
height: 260px; |
||||
|
border: 1px solid #ccc; |
||||
|
line-height: 26px; |
||||
|
font-size: 12px; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.flex-between { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.flex-between-center { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.bg-primary { |
||||
|
background-color: #0099CC; |
||||
|
} |
||||
|
|
||||
|
.padding-5 { |
||||
|
padding: 5px; |
||||
|
} |
||||
|
|
||||
|
.margin-t-20 { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
.inline { |
||||
|
display: inline-block; |
||||
|
width: 10px; |
||||
|
height: 10px; |
||||
|
border-radius: 50%; |
||||
|
background-color: #339933; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.underline { |
||||
|
display: inline-block; |
||||
|
width: 10px; |
||||
|
height: 10px; |
||||
|
border-radius: 50%; |
||||
|
background-color: #FF0033; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
|
||||
|
.select { |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<div class="container"> |
||||
|
<h1 class="header">jQuery无缝滚动</h1> |
||||
|
<h4 class="title">车辆巡查</h4> |
||||
|
<div class="scroll"> |
||||
|
<ul> |
||||
|
<li> |
||||
|
<div class="margin-b-5 padding-5"> |
||||
|
<div class="flex-between-center"> |
||||
|
<div> |
||||
|
<div class="bg-primary padding-5 margin-b-5">闽D29101</div> |
||||
|
<div>在线状态</div> |
||||
|
</div> |
||||
|
<div>保洁车</div> |
||||
|
</div> |
||||
|
<div class="flex-between"> |
||||
|
<div><span class="inline"></span>在线</div> |
||||
|
<div>上次在线 2018-09-23 10:32:32</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
<li> |
||||
|
<div class="margin-b-5 padding-5"> |
||||
|
<div class="flex-between-center"> |
||||
|
<div> |
||||
|
<div class="bg-primary padding-5 margin-b-5">闽D29102</div> |
||||
|
<div>在线状态</div> |
||||
|
</div> |
||||
|
<div>保洁车</div> |
||||
|
</div> |
||||
|
<div class="flex-between"> |
||||
|
<div><span class="underline"></span>离线</div> |
||||
|
<div>上次在线 2018-09-23 10:32:32</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
<li> |
||||
|
<div class="margin-b-5 padding-5"> |
||||
|
<div class="flex-between-center"> |
||||
|
<div> |
||||
|
<div class="bg-primary padding-5 margin-b-5">闽D29103</div> |
||||
|
<div>在线状态</div> |
||||
|
</div> |
||||
|
<div>保洁车</div> |
||||
|
</div> |
||||
|
<div class="flex-between"> |
||||
|
<div><span class="underline"></span>离线</div> |
||||
|
<div>上次在线 2018-09-23 10:32:32</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
<li> |
||||
|
<div class="margin-b-5 padding-5"> |
||||
|
<div class="flex-between-center"> |
||||
|
<div> |
||||
|
<div class="bg-primary padding-5 margin-b-5">闽D29104</div> |
||||
|
<div>在线状态</div> |
||||
|
</div> |
||||
|
<div>保洁车</div> |
||||
|
</div> |
||||
|
<div class="flex-between"> |
||||
|
<div><span class="inline"></span>在线</div> |
||||
|
<div>上次在线 2018-09-23 10:32:32</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
<li> |
||||
|
<div class="margin-b-5 padding-5"> |
||||
|
<div class="flex-between-center"> |
||||
|
<div> |
||||
|
<div class="bg-primary padding-5 margin-b-5">闽D29105</div> |
||||
|
<div>在线状态</div> |
||||
|
</div> |
||||
|
<div>保洁车</div> |
||||
|
</div> |
||||
|
<div class="flex-between"> |
||||
|
<div><span class="underline"></span>离线</div> |
||||
|
<div>上次在线 2018-09-23 10:32:32</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
<div class="margin-t-20"> |
||||
|
<div class="select"><a href="./index.html">li元素固定格式展示</a></div> |
||||
|
<div class="select"><a href="./index2.html">li元素无固定格式展示</a></div> |
||||
|
<div class="select"><a href="./index3.html">横向滚动展示</a></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> |
||||
|
<script src="js/scroll.js"></script> |
||||
|
<script type="text/javascript"> |
||||
|
$(function () { |
||||
|
$('.scroll').scroll({ |
||||
|
speed: 80, //数值越大，速度越快 |
||||
|
}); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
</body> |
||||
|
|
||||
|
|
||||
|
</html> |
||||
@ -0,0 +1,67 @@ |
|||||
|
// JavaScript Document
|
||||
|
(function ($) { |
||||
|
$.fn.scroll = function (options) { |
||||
|
//默认配置
|
||||
|
var defaults = { |
||||
|
speed: 30, //滚动速度为0-100之间
|
||||
|
direction: 'vertical' //方向：vertical向上滚动,horizantal向左滚动
|
||||
|
}; |
||||
|
|
||||
|
var opts = $.extend({}, defaults, options), intId = []; |
||||
|
|
||||
|
function marquee(obj, step, direction) { |
||||
|
if (direction == 'horizantal') { |
||||
|
obj.find("ul").animate({ |
||||
|
marginLeft: '-=1' |
||||
|
}, 0, function () { |
||||
|
var s = Math.abs(parseInt($(this).css("margin-left"))); |
||||
|
if (s >= step) { |
||||
|
$(this).find("li").slice(0, 1).appendTo($(this)); |
||||
|
$(this).css("margin-left", 0); |
||||
|
} |
||||
|
}); |
||||
|
} else if (direction == 'vertical') { |
||||
|
obj.find("ul").animate({ |
||||
|
marginTop: '-=1' |
||||
|
}, 0, function () { |
||||
|
var s = Math.abs(parseInt($(this).css("margin-top"))); |
||||
|
if (s >= step) { |
||||
|
$(this).find("li").slice(0, 1).appendTo($(this)); |
||||
|
$(this).css("margin-top", 0); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
this.each(function (i) { |
||||
|
var speed = 0 < 100 - opts["speed"] && 100 - opts["speed"] <= 100 ? 100 - opts["speed"] : 30; |
||||
|
var direction = opts["direction"] == 'vertical' || opts["direction"] == 'horizantal' ? opts["direction"] : 'vertical'; |
||||
|
var _this = $(this); |
||||
|
intId[i] = setInterval(function () { |
||||
|
var sh; |
||||
|
if (direction == 'horizantal') { |
||||
|
sh = _this.find("ul").find("li:first").outerWidth(true); |
||||
|
} else { |
||||
|
sh = _this.find("ul").find("li:first").outerHeight(true); |
||||
|
} |
||||
|
marquee(_this, sh, direction); |
||||
|
}, speed); |
||||
|
|
||||
|
_this.hover(function () { |
||||
|
clearInterval(intId[i]); |
||||
|
}, function () { |
||||
|
intId[i] = setInterval(function () { |
||||
|
var sh; |
||||
|
if (direction == 'horizantal') { |
||||
|
sh = _this.find("ul").find("li:first").outerWidth(true); |
||||
|
} else { |
||||
|
sh = _this.find("ul").find("li:first").outerHeight(true); |
||||
|
} |
||||
|
marquee(_this, sh, direction); |
||||
|
}, speed); |
||||
|
}); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
} |
||||
|
})(jQuery); |
||||