git远程仓库管理

今天总结一下git远程仓库管理：

1.创建远程仓库

首先去码云上注册一个账号，依次执行创建组织->创建项目

2.配置SSH密钥

一 、
设置Git的user name和email：

1
2
$ git config --global user.name "您的github名字"
$ git config --global user.email "您的邮箱"

二、生成SSH密钥过程：
1.查看是否已经有了ssh密钥：cd ~/.ssh
如果没有密钥则不会有此文件夹，有则备份删除
2.生成密钥：

1
$ ssh-keygen -t rsa -C “haiyan.xu.vip@gmail.com”

按3个回车，密码为空。

执行cat ~/.ssh/, 回车之后会看到id_rsa(私钥),id_rsa.pub(公钥),我这里选择公钥,
执行cat ~/.ssh/id_rsa.pub,会得到公钥,复制下来,然后回到码云上的项目仓库里添加个人公钥

在本地新建一个项目文件，进入到文件根目录，执行git clone +您的ssh地址，会生成一个README.md,
这个文件可以写说明文档

项目初始化

1
git init

关联远程仓库

1
git remote add arigin 您的项目ssh地址

拉取远程master代码

1
git pull origin master

查看当前状态

1
git status

将文件推送到暂存区

1
git add .

把当前的改动做一次提交

1
git commit -am "注释"

把本地的文件推送到远程仓库

1
git push

一般开发不在master分支上面，master只读，所以我们新建一个分支

1
git checkout -b  分支名字     //新建并切换到这个分支上

配置.gitignore文件，配置之后，将不会被git追踪到

1
2
3
.DS_Store 
/node_modules/ 
npm_debug.log

事件代理总结

1.最原始的方法：在button元素里面添加onclick事件,代码如下：

1
2
3
<button onclick=function(){}></button>
   这种方法虽然使用简单，但是有一个缺点就是：页面显示和事件处理混在一起，不符合网页开发设计的理念。

2.事件监听（addEventListener)

1
2
3
 获取button元素，绑定事件监听 .addEventListener('click',fn,[true/false]);
注：最后一个参数表示是否使用事件捕获，默认为false

3.jQuery的四种办法

3.1 直接绑定.click()事件，代码如下：
1
2
3
$("button") .click( function() {
       $("p").slideToggle();
     })
3.2 使用.bind()方法
1
2
3
4
         $('button').bind('click',  [data],  function(){});
       注：此方法可为button元素绑定一个或多个事件处理程序，以及当事件发生时运行的函数。
`
3.3 事件代理的3种方法
1
2
3
4
5
6
7
8
9
10
11
12
当一个元素的多个子元素发生click事件或者有新生成的子元素发生click事件时，可以用事件代理方法，目前用的比较多的有.live(), .delegate()和.on()方法   
       3.31  .live()为当前或未来的匹配元素添加一个或多个事件处理器        
                    $("button").live('click',  [data],  function(){})
    .live()为button元素附加一个事件处理函数，即使这个元素是以后再添加进来的
    注：.live()是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。
        3.32    .delegate(ChildSelector',  event,  [data], fn ) 
                  注：与.live()相比较，.delegate()
        3.33    .on('click',  selector,  [data],  fn)
                        .on()方法是最新1.9版本，整合了之前几种方式的新的事件绑定方法

webpack

安装webpack

了解更详细的信息请参考webpack官网
安装的前期是你已经安装了node.js和npm,启用终端通过命令,进入到你的项目目录，执行

1
2
npm init //生成package.json文件
npm webpack install --save-dev

测试有没有成功：
新建个hello.js文件,里面随便写个函数，然后通过执行

1
webpack hello.js hello-webpack.js // hello-webpack.js是打包后的文件

如果界面显示hash值和打包所用时间，就成功了。

webpack配置

经过本人使用，最重要的属于webpack配置了，我们可以手动建立一个webpack.config.js,也可以使用脚手架的方式。
步骤一.新建webpack.config.js
步骤二.进入该文件

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
28
29
30
31
32
33
34
35
36
37
38
39
module.exports={
	entry: "./main.js",   //项目入口文件，假设是main.js
	output: {
		path:__dirname,		//输出文件路径
		filename: "bundle.js" //输出文件名称，也或者可以使用占位符(name,hash,trunkhash)，filename:"[name]-[ hash].js"
		publicPath: "/js/"
	}，
	moudle:{
		loaders:[
			{
				test:/\.css$/,
				loader:"style!css!importloaders=1!postcss",
				exclude:/node_modules/,
				include:__dirname
			},
			{
				test:/\.js$/,
				loader:"babel",
				query:{
					presets:["es2015"]
				},
				exclude:/node_modules/,//排除范围
				inculde:   //处理范围
			},
			{
				test:/\.less/,
				loader:"style!css!postcss!less-loader"
			}
		]
	},
	plugins:{
		new htmlWebpackPlugin({
			filename:"index.html",
			template:"index.html",
			inject:"body"
		})
	}

安装babel及相关依赖

项目目录运行如下：

1
2
3
4
npm install –save-dev babel-loader babel-core
npm install –save-dev babel-preset-latest
npm install style-loader css-loader –save-dev
npm install webpack-dev-server –save-dev

处理sass,less文件

1
2
npm i less-loader –save-dev
npm i postcss-loader –save-dev

处理html文件

1
npm i html-loader –save-dev

热加载

在package.json文件的scripts里面加入以下代码,可以看到你项目的进程，代码颜色，模块，打包理由

1
2
“webpack”:"webpack --config webpack-config.js --progress --display-moudle --colors --diplay-reason" 
"dev": "webpack-dev-server --devtool eval --progress --colors --content-base build"

跨域方法

jsonp实现跨域

在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。
比如，有个a.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，假设这个json数据地址是http://example.com/data.php,那么a.html中的代码就可以这样：

1
2
3
4
5
6
7
<script type="text/javascript">
	function mydata (jsondata) {
		//处理获得的数据
	}
</script>
<script type="text/javascript" src="http://example.com/data.php?callback=mydata"></script>

在data.php中

1
2
3
4
5
<?php 
	$callback=$_GET['callback'];
	$data="我们所需的数据"；
	echo $callback.'('.json_encode($data).')';
 ?>

document.domain

浏览器都有一个同源策略，其限制之一就是第一种方法中我们说的不能通过ajax的方法去请求不同源中的文档。 它的第二个限制是浏览器中不同域的框架之间是不能进行js的交互操作的。有一点需要说明，不同的框架之间（父子或同辈），是能够获取到彼此的window对象的，但蛋疼的是你却不能使用获取到的window对象的属性和方法(html5中的postMessage方法是一个例外，还有些浏览器比如ie6也可以使用top、parent等少数几个属性)，总之，你可以当做是只能获取到一个几乎无用的window对象。比如，有一个页面，它的地址是http://www.example.com/a.html ， 在这个页面里面有一个iframe，它的src是http://example.com/b.html, 很显然，这个页面与它里面的iframe框架是不同域的，所以我们是无法通过在页面中书写js代码来获取iframe中的东西的：

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
function onload(){
	var iframe=document.getElementById("iframem");
	var win=iframe.contentWindow;//获取到iframe的window对象，但是window的属性和方法不能用
}
</script>
<iframe src="http://www.example.com/a.html" id="iframem" onload="onload()"></iframe>

这个时候，document.domain就可以派上用场了，我们只要把http://www.example.com/a.html 和 http://example.com/b.html这两个页面的document.domain都设成相同的域名就可以了。但要注意的是，document.domain的设置是有限制的，我们只能把document.domain设置成自身或更高一级的父域，且主域必须相同。例如：a.b.example.com 中某个文档的document.domain 可以设成a.b.example.com、b.example.com 、example.com中的任意一个，但是不可以设成 c.a.b.example.com,因为这是当前域的子域，也不可以设成baidu.com,因为主域已经不相同了。

在页面 http://www.example.com/a.html 中设置document.domain:

1
2
3
4
5
6
7
<iframe src="http://www.example.com/a.html" id="iframem" onload="onload()"></iframe>
<script type="text/javascript">
document.main='example.com';//设置成主域
function test(){
	alert(document.getElementById("iframem").contentWindow);
}
</script>

在页面 http://example.com/b.html 中也设置document.domain，而且这也是必须的，虽然这个文档的domain就是example.com,但是还是必须显示的设置document.domain的值：

1
2
3
<script type="text/javascript">
document.domain="example.com";
</script>

这样我们就可以通过js访问到iframe中的各种属性和对象了。

不过如果你想在http://www.example.com/a.html 页面中通过ajax直接请求http://example.com/b.html 页面，即使你设置了相同的document.domain也还是不行的，所以修改document.domain的方法只适用于不同子域的框架间的交互。如果你想通过ajax的方法去与不同子域的页面交互，除了使用jsonp的方法外，还可以用一个隐藏的iframe来做一个代理。原理就是让这个iframe载入一个与你想要通过ajax获取数据的目标页面处在相同的域的页面，所以这个iframe中的页面是可以正常使用ajax去获取你要的数据的，然后就是通过我们刚刚讲得修改document.domain的方法，让我们能通过js完全控制这个iframe，这样我们就可以让iframe去发送ajax请求，然后收到的数据我们也可以获得了。

简单的查询

今天闲来无事做了个这个效果,虽然样式有点丑。。。。。

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		#warp{
			width:215px;
			height:200px;
			border:1px solid #666;
			position: relative;
			margin-top:10px;
			overflow: auto;
		}
		ul{
			list-style: none;
		}
		li{
			width:50px;
			height:30px;
			float:left;
			margin:5px 2px 5px 11px;
			background-color: #cfc;
			text-align: center;
			line-height: 30px;
		}
		#tishi{
			width:100%;
			height:0;
			overflow: hidden;
		}
		.yes1{
			background-color: red;
		}
		.yes2{
			background-color: yellow;
		}
		.yes3{
			background-color: purple;
		}
		.yes4{
			background-color: gold;
		}
		.yes5{
			background-color:green;
		}
	</style>
</head>
<body>
	<input type="text" placeholder="请输入要查询的内容">
	<button>查询</button>
	<div id="warp">
		<div id="tishi">输入的内容有误，请确认</div>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
			<li>11</li>
			<li>12</li>
			<li>13</li>
			<li>14</li>
			<li>15</li>
			<li>16</li>
			<li>17</li>
			<li>18</li>
			<li>19</li>
			<li>20</li>
			<li>21</li>
			<li>22</li>
			<li>23</li>
			<li>24</li>
			<li>25</li>
			<li>26</li>
			<li>27</li>
			<li>28</li>
			<li>29</li>
			<li>30</li>
		</ul>
	</div>
	<script>
		var btn=document.querySelector("button");
		var li=document.querySelectorAll("li");
		var warp=document.querySelector("#warp");
		var tishi=document.querySelector("#tishi");
		btn.onclick=function(){
			init();
			var txt=document.querySelector("input").value;
			var i=0;
			btn.timer=setInterval(function(){
				if(i==li.length){
					clearInterval(btn.timer);
					tishi.style.height="100%";
					warp.scrollTop=0;
				}
				if(li[i].innerHTML!=txt){
					li[i].className="no";
					warp.scrollTop=li[i].offsetTop*0.7;
				}
				else{
					libg(li[i]);
					clearInterval(btn.timer);
				}
				i++;
			},100);
		}
		function libg(warp){
			var bg=["yes1","yes2","yes3","yes4","yes5"];
			var i=0;
			warp.timer=setInterval(function(){
				if(i==bg.length-1){
					clearInterval(warp.timer);
				}
				warp.className=bg[i];
				i++;
			},150)
		}
		function init(){
			for(var i=0;i<li.length;i++){
				li[i].className="";
			}
			tishi.style.height=0;
		}
	</script>
</body>
</html>

流动效果

这个效果关键是逻辑,

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>流动</title>
	<style>
		div{
			width:50px;
			height:50px;
			position: absolute;
			border-radius: 50%;
			top:0px;
			left:0px;
		}
	</style>
</head>
<body>
	<div style="background:red"></div>
	<div style="background:yellow"></div>
	<div style="background:purple"></div>
	<div style="background:green"></div>
	<div style="background:red"></div>
	<div style="background:gold"></div>
	<div style="background:red"></div>
	<div style="background:yellow"></div>
	<div style="background:purple"></div>
	<div style="background:green"></div>
	<div style="background:red"></div>
	<div style="background:gold"></div>
	<div style="background:red"></div>
	<div style="background:yellow"></div>
	<div style="background:purple"></div>
	<div style="background:green"></div>
	<div style="background:red"></div>
	<div style="background:gold"></div>
	<div style="background:red"></div>
	<div style="background:yellow"></div>
	<div style="background:purple"></div>
	<div style="background:green"></div>
	<div style="background:red"></div>
	<div style="background:gold"></div>
</body>
<script>
	window.onload=function(){
		document.onmousemove=function(event){
			var oEvent=event||window.event;
			var div=document.querySelectorAll("div");
			for(var i=div.length-1;i>0;i--){
				div[i].style.left=div[i-1].offsetLeft+"px";
				div[i].style.top=div[i-1].offsetTop+"px";
			};
			div[0].style.left=oEvent.clientX+"px";
			div[0].style.top=oEvent.clientY+"px";
		}
		var timer=setInterval(function(){
			var div=document.querySelectorAll("div");
			for(var i=div.length-1;i>0;i--){
				div[i].style.left=div[i-1].offsetLeft+"px";
				div[i].style.top=div[i-1].offsetTop+"px";
			}
		},40)
	}
</script>
</html>

碰壁反弹

这个效果实现一个反弹的效果,在很多场合都可以使用哦

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>碰壁反弹</title>
		<style>
			#wrap{
				width:1200px;
				height:800px;
				border:8px green solid;
				position: relative;
			}
			#inner{
				width:200px;
				height:200px;
				background:black;
				border:10px yellow solid;
				position: absolute;
				top:0;
				left:0;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="inner"></div>
		</div>
	</body>
	<script>
		var oWrap=document.getElementById('wrap');
		var oInner=document.getElementById('inner');
		var speed=10;//定义速度
		// 最大横向移动距离；
		var Max_Width=oWrap.clientWidth-oInner.offsetWidth;
		//  最大纵向移动距离；
		var Max_Height=oWrap.clientHeight-oInner.offsetHeight;
		// 开关功能
		var x=y=true;
		// 测试 0；
		console.log(oInner.offsetLeft);
			// 加定时器，每50s循环一次；
			var timer=null;
			timer=setInterval(function(){
				// 存变量
				var ll=oInner.offsetLeft;
				var tt=oInner.offsetTop;
				if(x){
					ll+=speed;
					if(ll>Max_Width){
						x=false;
					}
				}
				else{
					ll-=speed;
					if(ll<0){
						x=true;
					}
				}
				if(y){
					tt+=speed;
					if(tt>Max_Height){
						y=false;
					}
				}
				else{
					tt-=speed;
					if(tt<0){
						y=true;
					}
				}
				// 让left和top随着offsetLeft和offsetTop运动；
				oInner.style.left=ll+"px";
				oInner.style.top=tt+"px";
			},50)
	</script>
</html>

你也可以尝试着用canvas做哦

移动端拖拽事件

主要适用于移动端哦

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!doctype html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>移动端拖拽</title>
		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
		<style>
			#box{
				width:200px;
				height:200px;
				background-color: red;
				position:absolute;
			}
		</style>
	<body>
		<div id="box"></div>
	</body>
	<script>
		var oBox = document.getElementById("box");
		var x,y;
		// 绑定touchstart事件
		oBox.addEventListener("touchstart",function(ev){
			x=ev.touches[0].clientX-oBox.offsetLeft;
			y=ev.touches[0].clientY-oBox.offsetTop;
			console.log(x);
			 //阻止页面的滑动默认事件
			document.addEventListener("touchmove",defaultEvent,false);
		},false)
		//绑定move事件
		oBox.addEventListener("touchmove",function(ev){
			var x1 = ev.touches[0].clientX-x;
			var y1 = ev.touches[0].clientY-y;
			oBox.style.left = x1 + "px";
  			oBox.style.top = y1 + "px";
		},false);
		oBox.addEventListener("touchend",function(){
			document.removeEventListener("touchmove",defaultEvent,false);
		},false);
		//阻止默认事件
		function defaultEvent(ev) {
			ev.preventDefault();
		}
	</script>
</html>

放大镜

这个效果的实现是有点难度的,我们慢慢攻克吧
首先来点样式布局吧,这里就不多加赘述了

css部分

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
         body{
	background: #333;
	margin:0;
	padding:0;
}
.box{
	position: absolute;
	top:100px;
	left:200px;
	width:460px;
	height:360px;
}
.main{
	position: absolute;
	width: 200px;
	height: 200px;
	border:1px solid #fff;
	z-index: 2;
	cursor: move;
}
.minDiv{
	width:8px;
	height:8px;
	background: #fff;
	font-size: 0;
	position: absolute;
}
.minDiv.left-up{
	top:-4px;
	left: -4px;
	cursor:nw-resize;
}
.minDiv.left{
	top:50%;
	margin-top:-4px;
	left: -4px;
	cursor:w-resize;
}
.minDiv.left-down{
	bottom:-4px;
	left: -4px;
	cursor:sw-resize;
}
.minDiv.top{
	top:-4px;
	left: 50%;
	margin-left:-4px;
	cursor:n-resize;
}
.minDiv.right-up{
	top:-4px;
	right: -4px;
	cursor:ne-resize;
}
.minDiv.right{
	top:50%;
	margin-top:-4px;
	right: -4px;
	cursor:e-resize;
}
.minDiv.right-down{
	bottom:-4px;
	right: -4px;
	cursor:se-resize;
}
.minDiv.bottom{
	bottom:-4px;
	left: 50%;
	margin-left:-4px;
	cursor:s-resize;
}
img{
	position: absolute;
	z-index: 1
}
.img1{
	opacity: 0.5
}
.img2{
	clip:rect(0px,20px,100px,100px);
}
#preview{
	position: absolute;
	overflow: hidden;
	top:100px;
	left:680px;
	width:460px;
	height:360px;
}
#preview #img3{
	position: absolute;
	top:0;
	left:0;
}

接下来是主体部分了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
       <div id="box" class="box">
		<img class="img1" src="js/1.jpg"/>
		<img id="img2" class="img2" src="js/1.jpg"/>
		<div class="main" id="main">
			<div id="left-up" class="minDiv left-up"></div>
			<div id="left" class="minDiv left"></div>
			<div id="left-down" class="minDiv left-down"></div>
			<div id="up" class="minDiv top"></div>
			<div id="right-up" class="minDiv right-up"></div>
			<div id="right" class="minDiv right"></div>
			<div id="right-down" class="minDiv right-down"></div>
			<div id="down" class="minDiv bottom"></div>
		</div>
	</div>
	<div id="preview">
		<img id="img3" class="img3" src="js/1.jpg"/>
	</div>
</body>
<script src="js/main.js"></script>

最后就是我们渴望的js啦

先获取一下元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//防止图片被选中
document.onselectstart=new Function('event.returnValue=false;');
var boxDiv = document.getElementById('box');//外层容器
var mainDiv = document.getElementById('main');//选择层
var leftUpDiv = document.getElementById('left-up');//坐上角触点
var leftDiv = document.getElementById('left');//左中间触点
var leftDownDiv = document.getElementById('left-down');//左下角触点
var upDiv = document.getElementById('up');//上中间触点
var downDiv = document.getElementById('down');//下中间触点
var rightUpDiv = document.getElementById('right-up');//右上角触点
var rightDiv = document.getElementById('right');//右中间触点
var rightDownDiv = document.getElementById('right-down');//右下角触点
var img3=document.getElementById('img3');
var ifBool = false;//判断鼠标是否按下
var contact = "";//当前拖动的触点

左边拖动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//防止图片被选中
document.onselectstart=new Function('event.returnValue=false;');
var boxDiv = document.getElementById('box');//外层容器
var mainDiv = document.getElementById('main');//选择层
var leftUpDiv = document.getElementById('left-up');//坐上角触点
var leftDiv = document.getElementById('left');//左中间触点
var leftDownDiv = document.getElementById('left-down');//左下角触点
var upDiv = document.getElementById('up');//上中间触点
var downDiv = document.getElementById('down');//下中间触点
var rightUpDiv = document.getElementById('right-up');//右上角触点
var rightDiv = document.getElementById('right');//右中间触点
var rightDownDiv = document.getElementById('right-down');//右下角触点
var img3=document.getElementById('img3');
var ifBool = false;//判断鼠标是否按下
var contact = "";//当前拖动的触点

右边拖动

1
2
3
4
5
6
7
8
9
10
11
12
13
//右边拖动
function rightMove(e){
	var x = e.clientX;//鼠标横坐标
	if(x > getPosition(boxDiv).left + boxDiv.offsetWidth){
		x = getPosition(boxDiv).left + boxDiv.offsetWidth;
	}
	var width = mainDiv.clientWidth;//选择层宽度
	var mainX = getPosition(leftUpDiv).left + 4;//左上角横坐标
	var addWidth = x - width - mainX;//拖动后应该增加的宽度
	//设置拖动后的宽高和位置
	mainDiv.style.width = (width + addWidth) + "px";
}

上边拖动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//上边拖动
function upMove(e){
	var y = e.clientY;//鼠标纵坐标
	if(y < getPosition(boxDiv).top){
		y = getPosition(boxDiv).top;
	}
	var height = mainDiv.clientHeight;//选择层的高度
	console.log(height);
	var mainY = getPosition(leftUpDiv).top + 4;//左上角纵坐标
	var addHeight = mainY - y;//拖动后应该增加的高度
	//设置拖动后的宽高和位置
	mainDiv.style.height = (height + addHeight) + "px";
	mainDiv.style.top = mainDiv.offsetTop - mainY + y + "px"; //纵坐标减去增加的高度
}

下边拖动

1
2
3
4
5
6
7
8
9
10
11
12
//下边拖动
function downMove(e){
	var y = e.clientY;//鼠标纵坐标
	if(y > getPosition(boxDiv).top + boxDiv.offsetHeight){
		y = getPosition(boxDiv).top + boxDiv.offsetHeight;
	}
	var height = mainDiv.clientHeight;//选择层的高度
	var mainY = getPosition(leftUpDiv).top + 4;//左上角纵坐标
	var addHeight = y - mainY - height;//拖动后应该增加的高度
	mainDiv.style.height = (height + addHeight) + "px";
}

设置选择区域可见

1
2
3
4
5
6
7
8
9
10
//设置选择区域可见
function setChoice(){
	var top = mainDiv.offsetTop;
	var right = mainDiv.offsetLeft + mainDiv.offsetWidth;
	var bottom = mainDiv.offsetTop + mainDiv.offsetHeight;
	var left = mainDiv.offsetLeft;
	document.getElementById("img2").style.clip = "rect("+top+"px,"+right+"px,"+bottom+"px,"+left+"px)";
	preview({"top":top,"right":right,"bottom":bottom,"left":left});
}

获取元素的绝对位置

1
2
3
4
5
6
7
8
9
10
11
12
13
//获取元素的绝对位置
function getPosition(node){
	var left = node.offsetLeft;
	var top = node.offsetTop;
	current = node.offsetParent; // 取得元素的offsetParent
	　// 一直循环直到根元素
　　while (current != null) {
	　　left += current.offsetLeft;
	　　top += current.offsetTop;
	　　current = current.offsetParent;
　　}
	return {"left":left,"top":top};
}

预览一下

1
2
3
4
5
6
7
//预览
function preview(view){
	img3.style.top = -view.top + "px";
	img3.style.left = -view.left + "px";
	img3.style.clip = "rect("+view.top+"px,"+view.right+"px,"+view.bottom+"px,"+view.left+"px)";
}

鼠标按下事件

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
//鼠标按下-左上角
leftUpDiv.onmousedown = function(e){
	var ev=e||window.event;
	ev.cancelBubble=true;
	ifBool = true;
	contact = "leftUp";
};
//鼠标按下-左中间
leftDiv.onmousedown = function(e){
	var ev=e||window.event;
	ev.cancelBubble=true;
	ifBool = true;
	contact = "left";
};
//鼠标按下-左下角
leftDownDiv.onmousedown = function(e){
	var ev=e||window.event;
	ev.cancelBubble=true;
	ifBool = true;
	contact = "leftDown";
};
//鼠标按下-上边
upDiv.onmousedown = function(e){
	var ev=e||window.event;
	ev.cancelBubble=true;
	ifBool = true;
	contact = "up";
};
//鼠标按下-下边
downDiv.onmousedown = function(e){
	var ev=e||window.event;
	ev.cancelBubble=true;
	ifBool = true;
	contact = "down";
};
//鼠标按下-右上角
rightUpDiv.onmousedown = function(e){
	var ev=e||window.event;
	ev.cancelBubble=true;
	ifBool = true;
	contact = "rightUp";
};
//鼠标按下-右中间
rightDiv.onmousedown = function(e){
	var ev=e||window.event;
	ev.cancelBubble=true;
	ifBool = true;
	contact = "right";
};
//鼠标按下-右下角
rightDownDiv.onmousedown = function(e){
	var ev=e||window.event;
	ev.cancelBubble=true;
	ifBool = true;
	contact = "rightDown";
};

拖动

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
//拖动
window.onmousemove = function(e){
	var ev=e||window.event;
	ev.cancelBubble=true;
	if(ifBool){
		switch(contact){
			case "leftUp":leftMove(e);upMove(e);break;
			case "left":leftMove(e);break;
			case "leftDown":leftMove(e);downMove(e);break;
			case "up":upMove(e);break;
			case "down":downMove(e);break;
			case "rightUp":rightMove(e);upMove(e);break;
			case "right":rightMove(e);break;
			case "rightDown":rightMove(e);downMove(e);break;
			default:alert("操作错误！");
		}
	var width = mainDiv.offsetWidth;
	var height = mainDiv.offsetHeight;
	setChoice();
	}
};
//鼠标松开
window.onmouseup = function(){
	ifBool = false;
	contact = "";
};
//鼠标点击控制mainDiv的移动
mainDiv.onmousedown=function(e){
	var ev=e||window.event;
	boxDiv.onmousemove=function(e){
		var ev=e||window.event;
		var disx=ev.clientX;
		var disy=ev.clientY;
		var moveX=disx-boxDiv.offsetLeft-mainDiv.offsetWidth/2;
		// console.log(moveX);
		var moveY=disy-boxDiv.offsetTop-mainDiv.offsetHeight/2;
		// console.log(moveY);
		var maxWidth=boxDiv.clientWidth-mainDiv.offsetWidth;
		var maxHeight=boxDiv.clientHeight-mainDiv.offsetHeight;
		if(moveX<0){
			moveX=0;
		}else if(moveX>maxWidth){
			moveX=maxWidth;
		}
		if(moveY<0){
			moveY=0;
		}else if(moveY>maxHeight){
			moveY=maxHeight;
		}
		mainDiv.style.left=moveX+"px";
		mainDiv.style.top=moveY+"px";
		img3.style.left=-moveX+"px";
		img3.style.top=-moveY+"px";
		//右边展示区域的范围
		preview({"top":mainDiv.offsetTop,"left":mainDiv.offsetLeft,"bottom":mainDiv.offsetTop+mainDiv.offsetHeight,"right":mainDiv.offsetLeft+mainDiv.offsetWidth});
		//可见区域的范围
		setChoice();
	}
	mainDiv.onmouseup=function(){
		boxDiv.onmousemove="";
	}
}
setChoice();//初始化选择区域可见

看到此博客的伙伴们,记得点赞哦!

3D轮播

这个效果,主要采用3d效果展示,技术点主要还是旋转的角度问题,我相信聪明的小伙伴们,肯定猜得到的

话不多说,犀利一点
直接上代码

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!doctype html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>3d轮播图</title>
	<style type="text/css">
		body {
			margin: 0;
			background-color: black;
		}
		.view {
			perspective: 3600px;
			transform-origin:left;
		}
		img {
			width: 500px;
		}
		.space3D {
			transform-style: preserve-3d;
			width: 500px;
			position: relative;
			margin: 200px auto;
		}
		.space3D div{
			position: absolute;
		}
		.space3D div:nth-child(1){
			transform: rotateY(0deg) translateZ(730px);
		}
		.space3D div:nth-child(2){
			transform: rotateY(40deg) translateZ(730px);
		}
		.space3D div:nth-child(3){
			transform: rotateY(80deg) translateZ(730px);
		}
		.space3D div:nth-child(4){
			transform: rotateY(120deg) translateZ(730px);
		}
		.space3D div:nth-child(5){
			transform: rotateY(160deg) translateZ(730px);
		}
		.space3D div:nth-child(6){
			transform: rotateY(200deg) translateZ(730px);
		}
		.space3D div:nth-child(7){
			transform: rotateY(240deg) translateZ(730px);
		}
		.space3D div:nth-child(8){
			transform: rotateY(280deg) translateZ(730px);
		}
		.space3D div:nth-child(9){
			transform: rotateY(320deg) translateZ(730px);
		}
	</style>
</head>
<body>
	<div class="view">
		<div class="space3D">
			<div><img src="../images/lunbo14.png"></div>
			<div><img src="../images/lunbo13.png"></div>
			<div><img src="../images/lunbo12.png"></div>
			<div><img src="../images/lunbo11.png"></div>
			<div><img src="../images/lunbo9.png"></div>
			<div><img src="../images/lunbo3.png"></div>
			<div><img src="../images/lunbo8.png"></div>
			<div><img src="../images/lunbo6.png"></div>
			<div><img src="../images/lunbo5.png"></div>
		</div>
	</div>
</body>
	<script type="text/javascript">
		var view=document.getElementsByClassName('view');//获取观众席
		var space3D=document.getElementsByClassName('space3D')[0];//获取舞台
		var pictures=space3D.getElementsByTagName('div');//舞台表演人员
			var index=0;
			//for循环图片
		for (var i = 0; i < pictures.length; i++) {
			pictures[i].onclick=function() {
				index++;
				space3D.style.transition="transform 2s";
				space3D.style.transform="rotateY("+40*index+"deg)";
			}
		}
	</script>
</html>

不要问我为啥这么犀利,嘘。。。。

很惭愧<br><br>只做了一点微小的工作<br><br>我会继续努力<br><br>谢谢大家