- 【导航效果】网页下滚100像素后在
id="fixed"
中添加一个class="shrink"
,移回时移除。class="shrink"
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$('#fixed').addClass('shrink');
} else {
$('#fixed').removeClass('shrink');
}
});
- 【导航效果】当网页下滚100像素后
class="Nav"
(假设它的height="50px"
)变为绝对定位,同时它下面的class="NavLayout"
属性中增加margin-top:50px
占据class="Nav"
变为绝对定位后留下的空间。
$(window).scroll(function(event){
if($(window).scrollTop()>=100){
$(".Nav").css({"position":"fixed","left":"0","top":"0","zIndex":"9999"});$(".NavLayout").css({"margin-top":"50px"})
}else{$(".Nav").css({"position":"relative"});$(".NavLayout").css({"margin-top":"0"})}
});
- 【视频兼容性插件】video.js,兼容大部分电脑和手机。
先引入两个必要的文件(也可以在https://github.com/videojs/Video.js/releases下载),源码的体积很大,建议用min版。
<link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>
HTML部分,提供了三种视频格式,视频默认为300px,如需修改,在video.min.js中搜索300px改成需要的数值就行了,或直接改为100%。
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
poster="缩略图"
data-setup="{}">
<source src="http://视频地址格式1.mp4" type='video/mp4' />
<source src="http://视频地址格式2.webm" type='video/webm' />
<source src="http://视频地址格式3.ogv" type='video/ogg' />
<track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
<track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>
- 【网页效果】wow.js(官网:https://wowjs.uk/ ),一个简单好用的懒加载插件。
引用文件wow.min.js(剩下的两个css可以不引用,根据需求自己写几个动画)
<link rel="stylesheet" href="https://wowjs.uk/css/style.css">
<link rel="stylesheet" href="https://wowjs.uk/css/libs/animate.css">
<script src="https://wowjs.uk/dist/wow.min.js"></script>
<div class="wow">
代码段
</div>
<script>
new WOW().init();
</script>