有趣的鼠标悬浮效果

发表于 2017-03-07 更新于 2022-12-06 阅读次数：

1.文字的流光效果

关键代码：background-image: -webkit-linear-gradient(left, blue, red 25%, blue 50%, red 75%, blue 100%);
这句代码设置背景色的线性渐变
-webkit-background-clip: text;
以文字的形状裁剪背景色，这时候文字颜色还在背景色之上
-webkit-text-fill-color: transparent;
将文字颜色设置为透明
background-size: 200% 100%;
设置一下背景色的大小，之所以设置宽为原来的两倍，是与前面设好的蓝红蓝相对应

@keyframes streamer {
    0%  {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

animation: streamer 3s infinite linear;
最后让背景的位置移动就实现了流光效果，infinite（循环播放），linear（线性移动）

学习到的知识点
linear-gradient(起点，开始颜色，结束颜色);
可参考http://www.fx114.net/qa-264-77177.aspx

1 2	background-clip background-clip: border-box\|padding-box\|content-box\|text(要加-webkit)

border-box	背景被裁剪到边框盒
padding-box	背景被裁剪到内边距框
content-box	背景被裁剪到内容框
text	背景被裁剪到文字区域（此时文字颜色会盖住背景色）

animation
animation: name duration timing-function delay iteration-count direction;

animation-name	规定需要绑定到选择器的 keyframe 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function	规定动画的速度曲线
animation-delay	规定在动画开始之前的延迟
animation-iteration-count	规定动画应该播放的次数
animation-direction	规定是否应该轮流反向播放动画

2.背景图片模糊化

主要是用到-webkit-filter： blur（）
-webkit-filter的方法十种：

grayscale灰度
sepia褐色
saturate饱和度
hue-rotate色相旋转
invert反色
opacity透明度
brightness亮度
contrast对比度
blur模糊
drop-shadow阴影
参考：http://www.w3cplus.com/css3/ten-effects-with-css3-filter

3.按钮边框的从中间到两边扩展开

主要是用到css伪类before和after，配合transform-origin:center,通过在before伪类里设置border-left和border-right，另外加上这句关键代码transform: scale3d(1, 0, 1)，意思就是y轴伸缩为0倍，也就是消失，同理after上写border-top，border-bottom，transform: scale3d(0, 1, 1)，最后在hover伪类上写transform: scale3d(1, 1, 1) 和transform 0.75s ease-in-out 0.75s。

自定义的checkbox,radio样式

发表于 2017-02-15 更新于 2022-12-06 阅读次数：

html5

雪碧图

雪碧图即CSS Sprite，是一种图像合并技术，将网站用到的小图标和背景图都合并在一张图片上，用background-image和background-position来显示需要的图片部份。

自定义checkbox,radio样式

Input标签后面跟一个label标签，然后input标签隐藏，通过label标签的for属性，来与input的id对应起来，这样点击label标签，对应的input标签就会被选中。
在该方法下，checkbox，radio的样式就可以通过设置label的背景图来控制，在结合雪碧图，各种各样的样式都可以弄出来。

思路：

1.用visibility：hidden将input标签隐藏
2.准备雪碧图，label的大小设置为图标的大小，通过定位显示需要的图片部分
3.使用：checked伪类选择器改变label的背景图定位，定位为选中的图标

遇到的问题：

1.使用伪元素方法时，：after伪类给元素添加content的时候，要给设置定位，：after的样式相对label定位，使两者置于不同的文本流，避免出现节点相拥挤的浮动问题。

样式 .example2 input[type=’checkbox’]:checked + label{} 要在样式.example2 input[type=’checkbox’]:checked + label:after之前，否则不起作用。

雪碧图与伪元素方式对比：
1.用雪碧图的的方式，虽然在减少网络请求优化性能方面有明显作用外，可是一个小图标的大小应该比几十行的伪元素代码大一点，对文件大小方面可能不利。优点可能就是使用图片可以做出很美观的效果。
2.使用伪类元素的方式就相对复杂一下，遇到的问题也会比较多。但结合css3可以做出很简洁美观的效果。

总结
这两种方法各有优劣，采用哪种方式还是要按照项目的具体要求吧，不能一概而论。比如做移动端的话，个人感觉使用后者会计较好，因为请求一张雪碧图的流量会很大，消耗流量。而在pc端的网站，考虑前者也是一个不错的选择。

调用定时器的正确姿势

发表于 2017-02-10 更新于 2022-12-21 分类于 web开发，基础， js 阅读次数：

js

定时器最怕的问题

用到定时器最多的运动效果和时钟，玩过的人都知道，当业务逻辑越来越复杂的时候，假如定时器调用频繁，最怕的是不知道内存里还有几个定时器没清除。

最近在做一个音乐播放，在进度条这块，为了让进度条跑动，在进度条对象的原型链上调用了定时器。

在调用的时候，犯了新手很容易犯的错误。在播放下一首的时候，又生成了另一个进度条对象，所以页面开了两个定时器，管理定时器很麻烦。

而且这个定时器会在别的页面调用，就涉及到如何正确的把这个定时器导出去。另外，调用的时候，我要逻辑立即跑一次，就是让定时器立即执行，而不是等到规定的时间去执行，那就慢了一步。

废话不多说，调用定时器的正确姿势如下图(code)：

//进度计时
		timing: function(speed) {

			//计时
			var n = ++this.n;
			var m = parseInt(n/60);
			var s = parseInt(n%60);
			var curr = this.toDub(m) + ':' + this.toDub(s);
			this.currNode.innerHTML = curr;

			//progress
			this.steps += speed;
			if(this.steps >= this.max*100) clearInterval(this.timer);

			this.step.style.width = Math.min(this.steps/100, this.max) + 'px';
			this.btn.style.left = Math.min(this.steps/100, this.max) + 'px';
	
		},

		running: function() {
			
			var that = this;
			var speed = (that.max/that.sum).toFixed(2);
			speed = parseFloat(speed) * 100;

			//播放时立即调用
			this.timing(speed);	

			clearInterval(this.timer);
			//必须返回出去，在外才能清除计时器
			this.timer = setInterval(function() {
					//计时
					var n = ++that.n;
					if(n > that.sum) {
						n = that.sum
					}
					var m = parseInt(n/60);
					var s = parseInt(n%60);
					var curr = that.toDub(m) + ':' + that.toDub(s);
					that.currNode.innerHTML = curr;

					//progress
					that.steps += speed;
					if(that.steps >= that.max*100) clearInterval(that.timer);

					that.step.style.width = Math.min(that.steps/100, that.max) + 'px';
					that.btn.style.left = Math.min(that.steps/100, that.max) + 'px';
				}, 1000)

			return this.timer
		},

想要在别的页面调用，那就要把定时器赋值给全局的变量。页面上只有一个全局对象Audio，可以这样做：

1	Audio.timer = progress.running;

这样清楚定时器也方便：
·

1	clearInterval(Audio.timer);

JS之cookie.md

发表于 2016-06-02 更新于 2022-12-21 分类于 web开发，基础， js 阅读次数：

js

页面用来保存信息，比如保存用户名，自动登陆

cookie的特性

同个网站中所有页面公享一套cookie
数量，大小有限
过期时间，可用js来控制。给expries赋值设置时间
cookie存在于客户端，据说只有在狐火上可以单独使用，或者说在火狐上运行的问题很少

js中使用cookie

document.cookie

cookie的操作

设置cookie

格式：名字 = 值

不会覆盖，等号是添加的意思
*过期事件：expries = 时间

练习代码

设置cookie

function setCookie(name ,value, iDay)
{
	var oDate = new Date();
	oDate.setDate(oDate.getDate() + iDay);

	document.cookie = name +'='+value+';expires='+oDate;

}
	/*document.cookie = "user = Leo;expires=" +oDate ;
	document.cookie = "pass = 123";*/

读取cookie

function getcookie(name)
{
	//username=laotuzhu; passwork=123456789; user=Leo;...
	var arr = document.cookie.split('; '); //千万不能少空格，因为cookie中的元素是是以；和空格分开的，少了就只能get第一个元素
	//arr->['username=laotuzhu','passwork=123456789','user=Leo',..]
	var i = 0;

	for(i= 0; i<arr.length; i++)
	{
		var arr2 = arr[i].split('=');
		// arr2->['username','laotuzhu', ...]
		if (arr2[0] == name) {
			return arr2[1];
		}
	
	}
	return '';
}

主要是将字符串分割split
注意： var arr = document.cookie.split(‘; ‘); //千万不能少空格，因为cookie中的元素是是以；和空格分开的，少了就只能get第一个元素

删除cookie

function removeCookie(name)
{
	setCookie(name,'1',-1);
}

将时间设置为过期时间

cookie的使用

记录div的位置

<style>
		#div1{
			width: 100px;
			height: 100px;
			background-color: red;
			position: absolute;
		}
	</style>
	<script>
function setCookie(name ,value, iDay)
{
	var oDate = new Date();

	oDate.setDate(oDate.getDate() + iDay);

	document.cookie = name +'='+value+';expires='+oDate;
}

function getcookie(name)
{
	//username=laotuzhu; passwork=123456789; user=Leo;...
	var arr = document.cookie.split('; '); //千万不能少空格，因为cookie中的元素是是以；和空格分开的，少了就只能get第一个元素
	//arr->['username=laotuzhu','passwork=123456789','user=Leo',..]
	var i = 0;

	for(i= 0; i<arr.length; i++)
	{
		var arr2 = arr[i].split('=');
		// arr2->['username','laotuzhu', ...]
		if (arr2[0] == name) {
			return arr2[1];
		}
	
	}
	return '';
}
function removeCookie(name)
{	setCookie(name,'1',-1);
}

	window.onload =function(){
			var oDiv = document.getElementById('div1');
			var disX =0;
			var disY =0;

			var x = getcookie('x');
			var y = getcookie('y');
			if(x)
			{
				oDiv.style.left =x+ 'px';
				oDiv.style.top = y+ 'px';	
			}

		oDiv.onmousedown = function(ev){
				var oEvent = ev || event;

				disX = oEvent.clientX- oDiv.offsetLeft;
				disY = oEvent.clientY- oDiv.offsetTop;

				document.onmousemove=function(ev){
					var oEvent = ev || event;

					var l = oEvent.clientX-disX;
					var t = oEvent.clientY-disY;

					if (l<0) {  //限制div移出可视区
						l=0;
					}else if(l>document.documentElement.clientWidth- oDiv.offsetWidth){
						l = document.documentElement.clientWidth- oDiv.offsetWidth;
					};
					if (t<0) {
						t = 0;
					}else if(t>document.documentElement.clientHeight- oDiv.offsetHeight){
						t =document.documentElement.clientHeight- oDiv.offsetHeight;
					}

					oDiv.style.left = l+'px';
					oDiv.style.top = t+'px';
				}

				document.onmouseup = function(){
					document.onmousemove = null;
					document.onmouseup = null;

					setCookie('x',oDiv.offsetLeft, 30);
					setCookie('y',oDiv.offsetTop,30);
				}
			}
		}
	</script>
</head>
<body>
	<div id="div1"></div>
</body>

在onload下定好div位置，在ondown下记录

记录用户名

<script>
	function setCookie(name ,value, iDay)
{
	var oDate = new Date();
	oDate.setDate(oDate.getDate() + iDay);

	document.cookie = name +'='+value+';expires='+oDate;

}
	/*document.cookie = "user = Leo;expires=" +oDate ;
	document.cookie = "pass = 123";*/

function getcookie(name)
{
	//username=laotuzhu; passwork=123456789; user=Leo;...
	var arr = new Array();
	var arr = document.cookie.split(';');
	//arr->['username=laotuzhu','passwork=123456789','user=Leo',..]
	var i = 0;

	for(i= 0; i<arr.length; i++)
	{
		var arr2 = arr[i].split('=');
		// arr2->['username','laotuzhu', ...]
		if (arr2[0] ==name) {
			return arr2[1];
		};

	}
	return '';
}

function removeCookie(name)
{
	setCookie(name,'1',-1);
}

window.onload = function()
{
	var form = document.getElementById('form1');
	var oUser = document.getElementsByName('user')[0];
	var a = document.getElementsByTagName('a')[0];

	form.onsubmit = function()
	{
		setCookie('user',oUser.value,2);
	}

	a.onclick = function ()
	{
		removeCookie('user');
		oUser.value = '';
	}
}
</script>
</head>
<body>
	<form id="form1" action="www.baidu.com">
		用户名：<input type="text" name="user">
		密码：<input type="password">
		<input type="submit" value="登陆">
		<a href="javascript:;">清除记录</a>
	</form>
</body>

js面向对象编程之继承

发表于 2016-05-29 更新于 2022-12-21 分类于 web开发，基础， js 阅读次数：

js 继承

我是图片

前言

javascript本身不是静态语言，是一门动态语言，变量只有在运行的时候才知道是什么类型，严格上也没有像Java静态语言的类的概念((当然在ES6中提出了类的语法)，那么它是如何实现类的继承的呢？

阅读全文 »