image frame

🐱BeiGua's blogger🐕

渐变轮播图的实现

JavaScript

注意事项

需要提前在img数组中,把除去第一个图片中的opacity调整为0,加上transation:all time;
用前需要定义变量,获取html元素
direction:方向----left或者right
group:图片数组

函数封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function opacityRightChange(direction,group){
				direction.addEventListener('click',function(){
					if(flag>=0&&flag<group.length-1){
						group[flag].style.opacity = '0'
						flag++
						group[flag].style.opacity = '1'
					}else if(flag >=group.length-1){
						group[flag].style.opacity = '0'
						flag = 0
						group[flag].style.opacity = '1'
					}
				})
			}
			function opacityLeftChange(direction,group){
				direction.addEventListener('click',function(){
					if(flag <=imglist.length-1&&flag >0){
						console.log(11)
						group[flag].style.opacity = '0'
						flag--
						group[flag].style.opacity = '1'
					}else if(flag <=0){
						group[flag].style.opacity = '0'
						flag = imglist.length-1
						group[flag].style.opacity = '1'
					}
				})
			}

函数的使用

1
2
   opacityRightChange(right,imglist)
opacityLeftChange(left,imglist)

JavaScript函数封装--上下缓动动画(只支持(滚动动画过渡,不适合左右位移))

JavaScript

函数封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// obj:盒子对象
// target:目标位置
// time:运动时间
// callback:回调函数
function move(obj,target,time,callback){
				// 清除定时器,防止多次点击加快移动速度和创建新的定时器
				clearInterval(obj.timer)
				// 结束
				obj.timer = setInterval(function(){
					// 缓动动画原理
					// (目标位置-现在位置)/10
					var step = (target - window.pageYOffset) / 10;
					step  = step > 0 ?Math.ceil(step) : Math.floor(step)
					// 步行算法结束
					if(window.pageYOffset == target){
						clearInterval(obj.timer)
						// 回调函数,如果有就执行,如果没有就不执行
						if(callback){
							callback()
						}
						// 回调函数结束
					}
					// obj.style.left = window.pageYOffset + step +'px'
					window.scroll(0,window.pageYOffset + step)
				},time)
			}

函数运用

1
move(obj,time,target)

JavaScript函数封装--缓动动画(不支持'回到顶部'的动画的过渡)

JavaScript

函数封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 // obj:盒子对象
 // target:目标位置
 // time:运动时间
 // callback:回调函数
 function move(obj,target,time,callback){
	// 清除定时器,防止多次点击加快移动速度和创建新的定时器
	clearInterval(obj.timer)
	// 结束
	obj.timer = setInterval(function(){
		// 缓动动画原理
		// (目标位置-现在位置)/10
		var step = (target - obj.offsetLeft) / 10;
		step  = step > 0 ?Math.ceil(step) : Math.floor(step)
		// 步行算法结束
		if(obj.offsetLeft == target){
			clearInterval(obj.timer)
			// 回调函数,如果有就执行,如果没有就不执行
			if(callback){
				callback()
			}
			// 回调函数结束
		}
		obj.style.left = obj.offsetLeft + step +'px'
	},time)
}

如何使用函数

1
2
3
4
// 中间的px和ms只是告诉你单位,在调用函数的时候不需要添加上去
// 如果函数名出现冲突,可以按照个人喜好修改
// 例如:function animateMove(){}等等
move(obj,___px,___ms)

es6中不同函数的this指向问题(!)

普通函数

this指向window

1
2
3
4
5
function fn(){
	console.log(1111+this)
}
window.fn()
	// fn(),fn.call()

对象的方法

this指向的是o,也就是函数调用者

1
2
3
4
5
6
   let o = {
	sayHi:function(){
		console.log(1111)
	}
}
    o.sayHi()

构造函数

this指向的实例对象,也就是例子中的ldh,原型对象里面的this指向的是ldh这个实例对象

1
2
3
4
5
6
7
function Star(){
					
	}
Star.prototype.sing = function(){
					
	}
var ldh = new Star()

绑定事件函数

this指向的是函数的调用者

1
btn.onclick = function(){}

定时器函数

this指向的也是window

1
window.setInterval(function(){},1000)

立即执行函数

this指向的是window

1
2
3
4
(function(){
	console.log(11111)
})()
   // 立即执行函数是立即调用

Hexo入门-快速搭建Hexo

框架

1.安装Hexo

这个是局部安装

1
npm install hexo

全局安装hexo

1
npm install -g hexo

2.创建hexo文件夹

1
hexo init documentTitle

3.跳转第二个步骤中的文件夹下

1
cd documentTitle

4.将npm包管理安装到该文件下

1
npm instal

5.运行hexo

1
hexo server

如果出现

1
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

则说明你的hexo框架基本已经运行完成了

  • Copyrights © 2022 BieGua
  • Visitors: | Views:

请我喝杯咖啡吧~

支付宝
微信