1.动画函数
function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var step = (target - obj.offsetLeft) / 10;
if (obj.offsetLeft >= target) {
clearInterval(obj.timer)
}
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
var span = document.querySelector('span');
var btn = document.querySelector('button');
// 调用函数
btn.addEventListener('click', function () {
animate(span, 500);
})
2.触屏事件
3.轮播图
4.插件框架的使用
fastclick插件的使用
视频插件zy.media.js的使用
swiper插件的使用:
1.下载相关的文件(放在目录下,结构类名不能修改)
js/swiper.min.js
css/swiper.min.css
2.将需要的效果的源代码打开,复制css,js复制到自己想index.css和index.js
修改问题:css自己写个新的css覆盖掉之前原本的css
js可以查找API文档进行相应参数的修改
bootstrap框架的使用
1.引入bootstrap样式文件
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
2.引入自己首页的样式文件
<link rel="stylesheet" href="css/index.css">
3.引入jquery js文件
<script src="bootstrap/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
4.复制html代码
5.本地存储