SKILLNULL, Author at SKILL.NULL

解决css3毛玻璃效果(blur)有白边问题

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

做一个登录页，全屏背景图毛玻璃效果，实现方法如下：

HTML：

<body>

　　</div>

　　　　var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

　　　　var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

　　　　$('.login-mask').css("height", h);

　　　　$('.login-mask').css("width", w);

　　</script>

</body>

CSS：

.login-wrap {

　　overflow: hidden;

}

.login-mask {

　　/* IE6~IE9 */

　　filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=100, MakeShadow=false);

　　-webkit-filter: blur(100px);

　　-moz-filter: blur(100px);

　　-ms-filter: blur(100px);

　　filter: blur(100px);

　　background-image: url(../../../img/background/home-bg-3.jpg);

　　background-repeat: no-repeat;

　　background-size: cover;

　　background-attachment: fixed;

　　background-position: center;

　　position: absolute;

　　z-index: 1;

}

.login-box {

　　width: 300px;

　　height: 400px;

　　background-color: rgba(255, 255, 255, 0.5);

　　display: block;

　　border: 1px solid rgba(183, 183, 183, 0.47);

　　border-radius: 6px;

　　position: absolute;

　　left: 50%;

　　margin-right: auto;

　　margin-left: -150px;

　　margin-top: 10%;

　　z-index: 2;

}

效果如下：

可以发现边上是有白边的，这是一种blur的值很大的情况下。此时的解决方法是直接将background-size:cover;改成background-size:150% 150%;就行了。

效果图如下：

仔[……]

2018-12-03by SKILLNULL HTML&CSS 阅读(12951)评论(0)

ajax循环读取json多维数组

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

test.json:

{

　　"one": [

　　　　　　{

　　　　　　　　"name": "黑默丁格",

　　　　　　　　"car": "鲁LLL608",

　　　　　　　　"mobil": "15666666666",

　　　　　　　　"mount": "1",

　　　　　　　　"time": "2016-07-13",

　　　　　　　　"cat": "保养",

　　　　　　　　"state": "有效",

　　　　　　　　"message":"长安福特4S店温馨提醒:是时候给您的爱车去做保养了。"

　　　　　　},

　　　　　　{

　　　　　　　　"name": "EZ",

　　　　　　　　"car": "鲁LLL608",

　　　　　　　　"mobil": "15666666666",

　　　　　　　　"mount": "1",

　　　　　　　　"time": "2016-07-13",

　　　　　　　　"cat": "保养",

　　　　　　　　"state": "有效",

　　　　　　　　"message":"长安福特4S店温馨提醒:是时候给您的爱车去做保养了。"

　　　　　　}

　　　　],

"two": [

　　　　　　{

　　　　　　　　"name": "机器人",

　　　　　　　　"car": "鲁LLL608",

　　　　　　　　"mobil": "15666666666",

　　　　　　　　"mount": "1",

　　　　　　　　"time": "2016-07-13",

　　　　　　　　"cat": "保养",

　　　　　　　　"state": "有效",

　　　　　　　　"message": "长安福特4S店温馨提醒:是时候给您的爱车去做保养了。"

　　　　　　},

　　　　　　{

　　　　　　　　"name": "贾克斯",

　　　　　　　　"car": "鲁LLL608",

　　　　　　　　"mobil": "15666666666",

　　　　　　　　"mount": "1",

　　　　　　　　"time": "2016-07-13",

　　　　　　　　"cat": "保养",

　　　　　　　　"state": "有效",

　　　　　　　　"message":"长安福特4S店温馨提醒:是时候给您的爱车去做保养了。"

　　　　　　}

　　]

}

ajax：

效果：

2018-12-03by SKILLNULL JavaScript 阅读(7256)评论(0)

禁止微信内置浏览器调整字体大小

1

2

3

4

5

6

7

8

9

10

微信webview内置了调整字体大小的功能，用户可以根据实际情况进行调节。

但是这也会导致字体大小改变以后，出现页面布局错乱的情况，

目前iOS的解决方案是覆盖掉微信的样式：

body { /* IOS禁止微信调整字体大小 */

-webkit-text-size-adjust: 100% !important;

}

安卓的解决方案是通过 WeixinJSBridge 对象将网页的字体大小设置为默认大小，

并且重写设置字体大小的方法，让用户不能在该网页下设置字体大小：

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

/*

* android禁止微信浏览器调整字体大小

* 这种方法会导致网页延迟大约1S

*/

(function () {

　　if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {

　　handleFontSize();

　　} else {

　　if (document.addEventListener) {

　　　　document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);

　　} else if (document.attachEvent) {

　　　　document.attachEvent("WeixinJSBridgeReady", handleFontSize);

　　　　document.attachEvent("onWeixinJSBridgeReady", handleFontSize);

　　}

function handleFontSize() {

　　// 设置网页字体为默认大小

　　WeixinJSBridge.invoke('setFontSizeCallback', {

　　'fontSize': 0

　　});

　　// 重写设置网页字体大小的事件

　　WeixinJSBridge.on('menu:setfont', function () {

　　　　WeixinJSBridge.invoke('setFontSizeCallback', {

　　　　　　'fontSize': 0

　　　　});

　　}

})();

2018-12-03by SKILLNULL 微信阅读(8244)评论(0)

ajax+php+mysql 实现点赞、局部刷新，每个IP只能对一篇文章点赞一次

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

主要流程：

点赞—>判断当前设备IP是否对当前文章有过点赞记录—>若有记录，弹出提示“已经赞过了”;

若无记录，当前文章点赞数+1，并在记录设备IP点赞记录的表中插入信息。

文章表 article 必不可少的字段：article_id(必须设置为自增), cat_id, praise

图文表 image_article 必不可少的字段：article_id(必须设置为自增), cat_id, praise

设备IP点赞记录表 client_ip 必不可少的字段：id(必须设置为自增), article_id, cat_id, ip

HTML部分：

({$sentence.praise})

JS部分( praise.js )：

$(function (){

$(".praise").click(function () {

var praise = $(this);

var article_id = praise.attr("rel");//获取HTML页面POST过来的article_id

var cat_id = praise.attr("rev");//获取HTML页面POST过来的cat_id

$.ajax({

type: "POST",

url: "praise.php",

data: "article_id=" + article_id + "&cat_id=" + cat_id,//数据拼接

cache: false,//不缓存此页面

success: function (data) {

praise.html(data);//显示data并局部刷新

},

error: function () {

alert("error");

}

});

PHP部分( praise.php )：

<?php

$connect = mysql_connect("数据库地址","数据库用户名","数据库密码");//链接数据库

if (!$connect){die('Could not connect: ' . mysql_error());}

mysql_select_db("数据库名称",$connect);//选择数据库

$ip = $_SERVER["REMOTE_ADDR"];//获取终端IP

$article_id = $_POST['article_id'];//获取article_id

$cat_id = $_POST['cat_id'];//获取cat_id

if (!isset($article_id) || empty($article_id) & !isset($cat_id) || empty($cat_id)) exit;//检测变量是否设置

$look = "select ip from client_ip where article_id='$article_id' and cat_id='$cat_id' and ip='$ip'";

$ip_look = mysql_query($look, $connect); //查询client_ip表中是否存在当前终端IP

$count = mysql_num_rows($ip_look); //返回查询结果的记录数目

if ($count == 0) { //如果没有记录

$up_praise = "update article set praise=praise+1 where article_id='$article_id' and cat_id='$cat_id'";

$result = mysql_query($up_praise, $connect); //更新文章点赞数

$up_img_praise = "update image_article set praise=praise+1 where article_id='$article_id' and cat_id='$cat_id'";

$result = mysql_query($up_img_praise, $connect); //更新图文点赞数

$entry_in = "insert into client_ip (article_id,cat_id,ip) values ('$article_id','$cat_id','$ip')";

mysql_query($entry_in, $connect); //写入数据

} else {

echo "<script>alert('已经赞过了');</script>";

}

$new_praise = "select praise from article where article_id='$article_id' and cat_id='$cat_id'";

$look_new_praise = mysql_query($new_praise, $connect);//查询更新后的文章表点赞数

$new_img_praise = "select praise from image_article where article_id='$article_id' and cat_id='$cat_id'";

$look_new_img_praise = mysql_query($new_img_praise, $connect);//查询更新后的图文表点赞数

if ($arr = mysql_fetch_assoc($look_new_praise)) {

$transform_arr[] = $arr;//将查询到的article表的prise转换成数组

} elseif ($arr = mysql_fetch_assoc($look_new_img_praise)) {

$transform_arr[] = $arr;//将查询到的image_article表的prise转换成数组

}

echo '(' . $transform_arr[0]['praise'] . ')';//打印数组值

mysql_close($connect);//关闭数据库

2018-12-03by SKILLNULL PHP 阅读(7567)评论(0)

让textarea完全显示文章并且不滚动、不可拖拽、不可编辑

1

2

3

4

5

6

7

8

9

10

11

textarea {

　　width: 100%;

　　border: none;

　　outline: none;

　　resize: none;

　　overflow: hidden;

　　padding-bottom: 100%;

　　background-color: inherit;

}

2018-12-03by SKILLNULL HTML&CSS 阅读(7131)评论(0)

浏览器滚动条样式更改

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

::-webkit-scrollbar { // 滚动条整体部分

width: 6px;

height: 8px;

}

::-webkit-scrollbar-track { // 外层轨道

background-color: #eee;

border-radius: 4px;

}

::-webkit-scrollbar-track-piece { // 内层滚动槽

background-color: #eee;

border-radius: 4px;

}

::-webkit-scrollbar-thumb { // 滚动的滑块

background: rgba(32, 33, 36, 0.3);

border-radius: 4px;

}

::-webkit-scrollbar-thumb:hover {

background: rgba(32, 33, 36, 0.4);

width: 10px;

}

::-webkit-scrollbar-corner { // 边角

display: none;

}

::-webkit-scrollbar-button { // 滚动条两端的按钮

display: none;

}

注：目前仅Chrome下生效

2021-07-06by SKILLNULL HTML&CSS 阅读(7622)评论(0)

PHP获取当前位置

如果想动态的获取当前栏目所处的位置，就要关联到数据库，下面是例子：

栏目表（category）：

涉及到二级目录。

（1）首先在你的首页导航栏，还有首页所出现的链接后面，为栏目加上catid，就像这样：。

当然，子页公用的导航栏也是要加上的。

（2）然后在控制[……]

2018-12-03by SKILLNULL PHP 阅读(8629)评论(0)

ThinkPHP动态版本控制

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

动态版本控制可以根据时间戳来实现，但是这样的话，每次打开页面都会重新下载加了版本控制的文件，如果你的页面自身打开本来就慢的话，

这样一来，无疑会带来很差的用户体验。

　　但是如果在每个引用文件后面都手动加上版本，如果页面比较多的话，这很明显是个很蠢的做法，所以我们可以这样做：

　　（1）在入口文件定义公共模块：

　　　　　　　　 define('COMMON_PATH','./Common/');

　　　　　然后将Home文件夹下的Common剪切出来，放在和入口文件同目录。

　　（2）在Common-->Conf-->config.php中配置一个数组：

　　　　　　　　　　<?php

　　　　　　　　　　　　return array(

　　　　　　　　　　　　//CSS版本控制

　　　　　　　　　　　　'cssVersion' => '1.0',

　　　　　　　　　　　　'cssVersionid' => '1.0',

　　　　　　　　　　　　//JS版本控制

　　　　　　　　　　　　'jsVersion' => '1.0',

　　　　　　　　　　　　'jsVersionid' => '1.0',

　　　　　　　　　　　　);

（3）在控制器中引入　　　　　　

　　　　　　　　<?php

　　　　　　　　　　namespace Home\Controller;

　　　　　　　　　　use Think\Controller;

　　　　　　　　　　class IndexController extends Controller {

　　　　　　　　　　　　public function index(){

　　　　　　　　　　　　/* 版本控制 */

　　　　　　　　　　　　$config = require(COMMON_PATH.'Conf/config.php');

　　　　　　　　　　　　this−>assign(′cssVersionid′,config['cssVersionid']);

　　　　　　　　　　　　this−>assign(′jsVersionid′,config['jsVersionid']);

　　　　　　　　　　　　/* 页面显示 */

　　　　　　　　　　　　$this->display();

　　　　　　　　　　　　　　}

　　　　　当然所有的assign必须放在$this->display();前面。在thinkPHP3.2.3中，你也可以这样写：

　　　　　　　　<?php

　　　　　　　　　　namespace Home\Controller;

　　　　　　　　　　use Think\Controller;

　　　　　　　　　　class IndexController extends Controller {　　　

　　　　　　　　　　　　　　public function __construct(){ /* 版本控制 */

　　　　　　　　　　　　　　　　　parent::__construct();

　　　　　　　　　　　　　　　　 $config = require(COMMON_PATH.'Conf/config.php');

　　　　　　　　　　　　　　　　　this−>assign(′cssVersionid′,config['cssVersionid']);

　　　　　　　　　　　　　　　　　this−>assign(′jsVersionid′,config['jsVersionid']);

　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　public function index(){

　　　　　　　　　　　　　　　/* 页面显示 */

　　　　　　　　　　　　　　　$this->display();

　　　　　　　　　　　　　　　}

　　（4）这时候就可以在HTML页面引入了

　　这样一来，每次有更新的话，只需要手动在config.php更改版本就行了，而且可以只更新CSS或JS其中一个。

2018-12-03by SKILLNULL PHP 阅读(7825)评论(0)

图片加载失败显示默认图片占位符

为网站的图片加上加载失败的默认占位符会让网站看起来更专业、更严谨。

<img src=”__PUBLIC__/img/simple/simplelove.png” onerror=”onerror=null;src=’__PUBLIC__/img/defaultpic.jpg'”&gt[……]

2017-08-14by SKILLNULL HTML&CSS 阅读(7782)评论(0)

JS根据不同浏览器(分辨率)调用不同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

根据不同浏览器：

var version = navigator.userAgent;

if (version.indexOf("MSIE") > 1) {

document.write("<link href='ie.css' rel='stylesheet' type='text\/css'\/>");

} else if (version.indexOf("Chrome") > 1) {

document.write("<link href='chrome.css' rel='stylesheet' type='text\/css'\/>");

} else if (version.indexOf("Firefox") > 1) {

document.write("<link href='ff.css' rel='stylesheet' type='text\/css'\/>");

}

</script>

根据不同分辨率：

if (screen.width == 1024){

document.write("<link href='css/css1.css' rel='stylesheet' type='text\/css'\/>");

}else {

document.write("<link href='css/css2.css' rel='stylesheet' type='text\/css'\/>");}

</script>

2018-12-03by SKILLNULL JavaScript 阅读(6926)评论(0)

2024年十一月
一	二	三	四	五	六	日
« 8月
				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