<!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引擎的设置
代码 利用多尺度小波分解侦测时间序列中奇异点位置代码 利用多尺度小波分解侦测时间序列中奇异点位置代码 利用多尺度小波分解侦测时间序列中奇异点位置代码 利用多尺度小波分解侦测时间序列中奇异点位置代码 利用多...
代码 利用多尺度小波分解侦测时间序列中奇异点 位置代码 利用多尺度小波分解侦测时间序列中奇异点 位置代码 利用多尺度小波分解侦测时间序列中奇异点 位置代码 利用多尺度小波分解侦测时间序列中奇异点 位置代码 ...