51 lines
1.3 KiB
Markdown
51 lines
1.3 KiB
Markdown
# 20191019
|
|
|
|
|
|
|
|
* 轮播图案例
|
|
[linkToHtml](./slider.html)
|
|
* 动画代码
|
|
```js
|
|
function animate(ele,target) {
|
|
console.log(ele,target)
|
|
clearInterval(ele.timer)
|
|
ele.timer = setInterval(function() {
|
|
//当前左边宽度
|
|
var current = ele.offsetLeft;
|
|
//步长
|
|
var step = 10;
|
|
//确认方向
|
|
step = target - current >= 0 ? step : -step;
|
|
//动画完后左边宽度
|
|
current += step;
|
|
if(Math.abs(target - current) > Math.abs(step)) {
|
|
//当左边需要移动的宽度大于移动的步长
|
|
//直接移动
|
|
ele.style.left = current + 'px'
|
|
} else {
|
|
//小于移动的步长
|
|
//清除计时器
|
|
clearInterval(ele.timer)
|
|
//直接设置为终点
|
|
ele.style.left = target + 'px';
|
|
}
|
|
},10)
|
|
}
|
|
```
|
|
|
|
* 轮播图按钮案例
|
|
[linkToHtml](./buttonslider.html)
|
|
|
|
* css定位一般不超过5级
|
|
|
|
* html 特殊字符
|
|
* `<` > 大于号
|
|
* `>` < 小于号
|
|
* `&` & 与号
|
|
* `"` " 引号
|
|
* `®` 已注册
|
|
* `©` 版权
|
|
* `™` 商标
|
|
* ` ` 半方大的空白
|
|
* ` ` 全方大的的空白
|
|
* ` ` 不断行的空 |