H5C3新特性总结(二)

一.径向渐变radial-gradient

不管是线性渐变(线性渐变总结(一)有介绍)还是径向渐变,都是相当于当作背景图片来处理的,案例如下:

background-image: radial-gradient(100px at center,red 30%,green 30%,green 60%,blue 60%);

说明:
参数1:指圆的大小(指半径)和圆心的位置(水平和垂直,上面一个center代表两个都是center);
参数2:颜色1;
参数3,颜色2;
至少要填2个颜色,多了不限,第一个颜色给百分比代表什么位置结束,后面颜色给百分比代表什么位置开始,如果需要给后面的颜色结束位置,需要再写一个颜色,指定百分比,这个百分比就是结束的位置.

二.2D变换

先看各自效果:
在这里插入图片描述

在CSS里任何变换都是改的transform属性.

1.rotate(参数):旋转,传入角度单位是deg

    参数给正是顺时针旋转,给负是逆时针旋转.

2.translate(参数1,参数2):平移,参数带单位px

	参数1:x轴方向的平移,给正是向右平移,负往左平移,
	参数2:y轴方向的平移,正是往下,负是往上.

3.scale(参数1,参数2):缩放,参数给的是倍数,不用带单位

	参数1:x轴方向缩放(宽度的缩放);
	参数2:y轴方向缩放(高度的缩放);
	如果只给一个参数,宽高都影响.

4.skew(参数):扭曲,参数给的也是角度;

	正数是往左扭,负数是往右扭.
	注意点:先旋转在平移会有影响(它会用旋转后的坐标去平移),解决办法建议将平移写在前面,让旋转写在后面就好了.

三.获取经纬度

调用navigator.geolocation.getCurrentPosition()这个方法,括号里面传入一个回调函数,当获取到位置后会自动调用这个回调函数,并且把位置新型当作形参传进来.
演示代码:

//获取经纬度
navigator.geolocation.getCurrentPosition(function(loc){
console.log(loc);
console.log("纬度是:"+loc.coords.latitude);
console.log("经度是:"+loc.coords.longitude);
})
</script>

四.localStorage本地存储

1.什么是本地存储?

	它是把数据存储在浏览器端的技术
            特点1.它没有有效期，也就是说只要你自己不手动删除（包括自己清浏览器数据，自己写代码删除），它就会一直存在;
            特点2.它不会自动发送给服务器，除非你自己写代码取出来;
            特点3.localStorage是按域名来存的，所以不同的网站之间不能访问到彼此的本地存储.

2.使用方法:localStorage点出下面的内容

	localStorage.setItem('键',值):存储一个数据;
	localStorage.getItem('键'):读取一个数据;
	localStorage.removerItem('键'):删除一个数据;
	localStorage.clear():情况所有数据,不用传参数.

3.注意点:
localStorage只能存储基本数据类型，如果要存复杂类型，那么可以先把复杂类型转成JSON字符串再来保存,取出来的时候，就可以把这个JSON字符串再转成JS的复杂类型就行了.

五.sessionStorage

事先解释,sessionStorage跟session没有半毛钱关系，它们仅仅是名字很像;

sessionStorage可以理解为是一个短命版的localStorage.sessionStorage的用法跟localStorage的用法是一样一样的;

localStorage是只要自己不删就一直存在，而sessionStroage是关掉浏览器就没有了.

六.拖拽

有些元素可以拖拽,比如图片标签,有些不可以,比如div盒子,但我们都可以设置一个行内属性可以实现拖拽,这个属性叫做:draggable=“true”;
拖拽有三个事件(总结所有事件名都是小写,无需驼峰命名):

ondragstart:拖拽开始;
ondrag:拖拽中;
ondragend:拖拽结束.

七.计算相对于自身左上角的坐标(这是新型算法,重要):

算法是：
x = e.clientX - 盒子可视区域的x - 左边框宽度
y = e.clientY - 盒子可视区域的y - 上边框宽度
里面有一个关键,如何获取盒子可视区域的x和y?
其实可以用元素.getBoundingClientRect()方法获取,获取的是一个对象.里面有x和y轴.
演示如下:
在这里插入图片描述
上述核心代码:

        //获得自身盒子到可视区域的一个距离（但是得到的是一个对象）
        var rect = box.getBoundingClientRect();
        console.log(rect);//得到一个对象,里面有x和y的值

        var x = e.clientX - rect.x - box.clientLeft;//clientLeft是获取到边框大小
        var y = e.clientY - rect.y - box.clientTop;
        console.log(x,y);//完美得到点击点到盒子边缘的值