<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>流动侦测</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
</head>
<body style="margin: 10px;">
<div style="height: 2000px;"></div>
<div class="am-panel am-panel-primary" id="my-scrollspy">
<div class="am-panel-hd">ScrollSpy via JS
</div>
<div class="am-panel-bd">
生命是一团欲望，欲望不满足便痛苦，满足便无聊。人生就在痛苦和无聊之间摇摆。——叔本华
</div>
</div>
<div style="height: 500px;"></div>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
<script>
$(function() {
$('#my-scrollspy').scrollspy({
animation: 'slide-left',
delay: 500
})
});
</script>
<script>
$(function() {
$('#my-scrollspy').on('inview.scrollspy.amui', function() {
console.log('进入视口');
$('.am-panel-bd').append('阅谁问君诵，水落清香浮。');//追加内容
}).on('outview.scrollspy.amui', function() {
console.log('离开视口');
});
});
</script>
</body>
</html>
效果图：
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>流动侦测</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png" href="assets/i/favicon.png">
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
<meta name="msapplication-TileColor" content="#0e90d2">
<link rel="stylesheet" href="assets/css/amazeui.min.css">
</head>
<body style="margin: 10px;">
<div id="doc-scrollspy-wrapper" data-am-observe>
<p>在下面插入一些元素试试：</p>
</div>
<p><button class="am-btn am-btn-primary" id="doc-scrollspy-insert">插入</button></p>
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="assets/js/jquery.min.js"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="assets/ie8/jquery.min.js"></script>
<script src="assets/ie8/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="assets/js/amazeui.min.js"></script>
<script>
$(function() {
var i = 1;
var $wrapper = $('#doc-scrollspy-wrapper');
var appendPanel = function(index) {
var panel = '<div class="am-panel am-panel-primary" ' +
'data-am-scrollspy="{animation: \'scale-up\'}">' +
'<div class="am-panel-bd">我是第' + index + '个插入的元素。</div></div>';
$wrapper.append(panel);
};
$('#doc-scrollspy-insert').on('click', function() {
appendPanel(i);
i++;
});
});
</script>
</body>
</html>
效果图：
相关推荐
NULL 博文链接：https://onestopweb.iteye.com/blog/2277589
NULL 博文链接：https://onestopweb.iteye.com/blog/2276952
可设置侦测范围，侦测启动时间可自由设定，每个监控摄像头可以独立设置移动侦测。 4、系统日志，系统对于人为操作和环境变化（移动侦测）等除了作相应的操作外，还会详细记录，方便检查。 5、每个监控窗口具有右键...
异常侦测流程，首先会先撷取正常状态下的环境影像，建立标准对照影像。当环境有异常时，所撷取之影像产生变化，与标准对照产生差异，比对后应可侦测异常状态及位置，当差异部分大于一定的范围或一定比例像素的阀值，...
使用该工具只需要输入总线频率(MCU手册会提供)和预设波特率即可计算出BRP、BS1、BS2，并且可自动侦测设置后出错率和成功率。对于MCU开发CAN通信有很大的帮助，降低CAN通信的出错率，提高通信质量。
海康威视监控移动侦测之报警设置
IC卡全加密侦测卡使用说明！
android 中侦测USB mount，代码
本资源详细的阐述了移动侦测技术的设计与实现。移动侦测技术实现的步骤：将前景图和背景图灰度化->图像相减->相减后图像二值化操作->根据二值化后的图像设置阀值，以达到设置移动侦测灵敏度的要求。
C++开发，移动侦测的算法代码，一个老外的算法改写而来，很好用
非常好用的一款侦测壳软件，快快下。。非常好用的一款侦测壳软件，快快下。。非常好用的一款侦测壳软件，快快下。。非常好用的一款侦测壳软件，快快下。。
C# 视频移动侦测实现，可以使用USB摄像头获取视频，一共有5算法可供选择，源码是国外朋友原创的。
这是一个英文软件，安装后可以自动检测你电脑上的摄像头，开启并进行设置后，可以做到对摄像头进行移动侦测，当镜头里的图像有变化时（比如有人进入到了摄像范围内），摄像头就会自动拍照或录像。是个非常有趣并且...
Detect it Easy是一个多功能的PE-DIY工具，主要用于壳侦测。功能正日益完善，是不可多得的破解利器！支持文件直接拖放，可添加到右键菜单，非常方便！Die和peid一样可以加载插件。 更新日志 [+] Private exe ...
该 Demo 是利用 Webcam 作为图形接口，结合 jp.maaash 作为人脸侦测的 AS3 程序，利用 ActionScript 你可以继续开发出有趣的人机互动软件，譬如人脸锁，使用人数计算器，人脸控制显示器，又或者是可以通过人脸侦测...
基于matlab移动侦测方面-move detect
ONVIF视频遮挡和移动侦测参数获取与配置 详述Module引擎和Rule引擎的设置
代码 利用多尺度小波分解侦测时间序列中奇异点位置代码 利用多尺度小波分解侦测时间序列中奇异点位置代码 利用多尺度小波分解侦测时间序列中奇异点位置代码 利用多尺度小波分解侦测时间序列中奇异点位置代码 利用多...
代码 利用多尺度小波分解侦测时间序列中奇异点 位置代码 利用多尺度小波分解侦测时间序列中奇异点 位置代码 利用多尺度小波分解侦测时间序列中奇异点 位置代码 利用多尺度小波分解侦测时间序列中奇异点 位置代码 ...