Fork me on GitHub

发表于 | 分类于 | 阅读次数: 
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
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            background:#6EC3FF;
        }
        .hl-box{
            position: absolute;
            top: 400px;
            left: 300px;
            width: 300px;
            box-shadow: 0 0 1px 2000px rgba(0,0,0,.5), 0 2px 15px rgba(0,0,0,.4);
            height: 200px;
            border-radius: 4px;
            transition: all 1s;
        }
    </style>
</head>
<body>
    <div class="hl-box"></div>
    <h1>爱上大还是打开就卡萨爱上大还是打开就卡萨爱上大还是打开就卡萨丁和</h1>
    <h1>爱上大还是打开就卡萨爱上大还是打开就卡萨爱上大还是打开就卡萨丁和</h1>
    <h1>爱上大还是打开爱上大还是打开就卡萨爱上大还是打开就卡萨就卡萨丁和</h1>
    <h1>爱上大还是打开爱上大还是打开就卡萨爱上大还是打开就卡萨就卡萨丁和</h1>
    <h1>爱上大还是打爱上大还是打开就卡萨爱上大还是打开就卡萨开就卡萨丁和</h1>
    <h1>爱上大还是打爱上大还是打开就卡萨爱上大还是打开就卡萨开就卡萨丁和</h1>
    <h1>爱上大还是打爱上大还是打开就卡萨爱上大还是打开就卡萨开就卡萨丁和</h1>
    <h1>爱上大还是打爱上大还是打开就卡萨爱上大还是打开就卡萨开就卡萨丁和</h1>
    <h1>爱上大还是打爱上大还是打开就卡萨爱上大还是打开就卡萨开就卡萨丁和</h1>
<script>
    // window.onload=function(){
    //     setTimeout(function(){
    //        document.getElementsByClassName('hl-box')[0].style.left='500px';
    //     },1000)
    // }
</script>
</body>
</html>

上面代码显示效果如下图：
"box-shadow效果图"

发表于 | 分类于 | 阅读次数:

介绍：基于jquery的ajax封装

首先把常量Url提取出来,这里可以多存几个备用（比如测试环境和正式环境），到时候切换环境，直接打开注释，切换一下就ok了

阅读全文 »

发表于 | 分类于 | 阅读次数:

js实现一天自动换一张图记录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	img {
		width: 200px;
		height: 100px;
	}
</style>
</head>
<body>
	<img id="img" />
 	<script type="text/javascript">
		 var imgSrc = new Date().getDate() +'.png';
		 //var imgSrc = new Date().getSeconds() +'.png'; //测试一秒换一张
		 document.getElementById('img').src = imgSrc;
 	</script>
</body>
</html>

发表于 | 分类于 | 阅读次数:

在使用vue绑定数据的时候，渲染页面时会出现变量闪烁，例如：

1
2
3
<div class="#app">
    <p>{{value.name}}</p>
</div>

在页面加载时会短暂的看见value.name,在页面出现，过了几秒后才会看见渲染的数据，在vue里面有个v-clock指令可以解决这个问题，那么，v-cloak要放在什么位置呢，是不是每个需要渲染数据的标签都要添加这个指令，经过试验发现，v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以：

1
2
3
<div class="#app" v-cloak>
    <p>{{value.name}}</p>
</div>

接着在css里面加入

1
2
3
[v-cloak] {
    display: none;
}

这样就可以防止页面闪烁了

但是有时候会不起效果，原因有下面两种：
1、v-clock的display属性被层级更高的给覆盖掉了，所以要提高层级

1
2
3
[v-cloak] {
    display: none !important;
}

2、样式放在了@import引入的css文件中
v-cloak的这个样式放在@import 引入的css文件中不起作用，可以放在link引入的css文件里或者内联样式中

发表于 | 分类于 | 阅读次数:

字体流光效果

html部分

1
2
3
<div class="demo">
	<h1>具有流光效果的一段文字！</h1>
</div>

css部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.demo {
	width: 400px;
	text-align: center;
	background-image: -webkit-linear-gradient(left, green, purple 25%, green 50%, purple 75%, green);
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
	-webkit-background-size: 200% 100%;
	-webkit-animation: masked-animation 3s infinite linear;
	}
	h1 {
	    width: 100%;
		height: 100%;
	}
	@-webkit-keyframes masked-animation {
	    0%  { background-position: 0 0;}
	    100% { background-position: -100% 0;}
	}

发表于 | 分类于 | 阅读次数:

作为一个前端，切图是必备技能，但是每次从ui设计师那里接来稿件，习惯性的用ps打开，总需要去设置一些东西，下面介绍一下，配置一个专属的前端切图区

阅读全文 »