saber酱的抱枕

哀哉京阿尼

07/27
08:42
学习

使用php制作网页端上传文件的功能

以前我网站上的图片是放在七牛图床上的,可以在七牛后台上传文件。但现在我的网站上没有这个功能(我不想用WordPress添加文章时的上传功能),每次添加图片都要远程登录服务器,再把文件放到附件文件夹里,非常麻烦。所以我今天做了个简单的上传文件的功能。

选择文件:
php 上传文件

上传结果:
php 上传文件

把下面的代码保存成php文件再访问就可以啦~
Read More →

使用php制作网页端上传文件的功能

07/14
03:53
学习

给WordPress文章里的图片添加放大效果

css3 javascript js scale wordpress 图片放大

昨天我在初音社(www.mikuclub.cn)看到了这个效果,有些地方的图片在鼠标经过时会放大,感觉很棒,整个网页似乎生动了不少,今天我也给自己的网站添加上了这个效果。

首先分析一下原理:在图片外层套了一个容器,这个容器和图片大小一样,设置超出隐藏。然后给图片添加上放大效果就可以了。

不过初音社应用这个效果的地方的宽高是固定的,但本站文章里的图片宽高是不一致的,所以需要用JavaScript来设定外层容器的宽高。

实现步骤如下:

首先添加css样式:

.img_scale_wrap{overflow: hidden;} /*外层元素*/
.post_t img{transition:1s;} /*设置过渡时间*/
.post_t img[data-scale]:hover{transform: scale(1.2);} /*放大效果*/

然后添加JavaScript代码:

var post_img = document.querySelectorAll(".post_t img");	// 获取所有图片
if (post_img.length > 0) {
    // 给图片添加缩放控制层
    function set_post_img_wrap(img) {
    	if (img.height>=500) {	// 大于一定尺寸的才添加放大效果
    		img.setAttribute("data-scale", "");	// 添加放大属性
    		var post_img_wrap = document.createElement("div");
    		post_img_wrap.className = "img_scale_wrap";
    		img.parentNode.insertBefore(post_img_wrap, img);
    		post_img_wrap.appendChild(img);
    		post_img_wrap.style.width = img.width + "px";
    		post_img_wrap.style.height = img.height + "px";
    	}
    }
    // 给图片添加事件
    for (var i = post_img.length - 1; i >= 0; i--) {
        if (post_img[i].complete) {
            set_post_img_wrap(post_img[i]);
        } else {
            post_img[i].onload = function() {
                set_post_img_wrap(this);
            }
        }
    }
}

本文的代码也可以用在其他类型的网站上,不只是WordPress里才能用。但是移植时要按自己情况修改css选择器和js选择器。

给WordPress文章里的图片添加放大效果

07/7
03:28
学习 软件

使用MySQL命令行恢复phpMyAdmin导出的sql文件

数据库的备份与恢复是个常见的问题,但是不同备份工具备份出来的.sql文件内容与格式不尽相同。

对于phpMyAdmin导出的sql文件,似乎用phpMyAdmin恢复比较容易。但我用其他一些MySQL数据库管理工具经常无法恢复成功(如使用Navicat for MySQL、HeidiSQL运行转储的sql文件,没有任何效果)。今天我试了下用MySQL命令行恢复phpMyAdmin导出的sql文件,感觉比较好使,记录一下。

恢复之前先手动创建一个空的数据库,编码和排序方式按需要选择。比如dedecms和WordPress默认的都是utf8_general_ci。

之后运行MySQL命令行,输入密码开始使用。

之后依次输入命令(按需要修改):

use databasename;
set names utf8;
source d:\desktop\simple.sql;

如下:

 database mysql phpmyadmin sql 恢复 数据库

记得输入分号,否则第二个命令会跑偏。

输入第三条之后就开始恢复了,等到执行完毕就ok了。

其实前两条命令,有些工具导出的sql文件里已经有了,有的没有(phpMyAdmin导出的就没有,这应该也是直接运行它备份的sql文件时无法恢复数据的原因)。所以有些工具备份的sql文件可能比较容易恢复,有的就要手动输入命令了。

使用MySQL命令行恢复phpMyAdmin导出的sql文件

06/22
10:23
学习 软件

自动解除ikanman.com上被屏蔽的漫画的用户脚本

在greasyfork.org上安装本脚本

自动解除ikanman.com上被屏蔽的漫画。当你在ikanman上看漫画时,country会被设置为US,以此解除屏蔽。

被屏蔽的漫画示例:《出包王女Darkness》

ps:本脚本分离自 《仙尊ikanman、omanhua漫画下载器》,如果你安装了这个下载器,就不需要再安装本脚本了。

被屏蔽时:

 cookie ikanman.com javascript js manga UserScript 漫画 用户脚本 解除屏蔽

自动解除屏蔽:

 cookie ikanman.com javascript js manga UserScript 漫画 用户脚本 解除屏蔽

自动解除ikanman.com上被屏蔽的漫画的用户脚本

06/18
11:42
学习 软件

获取bilibili视频的封面图片的用户脚本

bilibili cover image javascript js UserScript 哔哩哔哩 封面图 用户脚本

(虽然实际上没有这个右键菜单,咳咳,领会精神就好)

脚本安装地址:
https://greasyfork.org/zh-CN/scripts/30714

在bilibili的各种视频列表上,以及视频播放页面,按 ctrl+鼠标右键 ,就会在新窗口打开这个视频的封面图。

本脚本也有chrome扩展版本

其他说明:

①由bilibili官方发布的番剧(区别于up主上传的视频),其播放页面不能获取封面图,你可以在该番剧的目录页面获取封面图。
普通up主上传的视频,都可以在播放页面获取封面图。

②up主上传时的封面图是多大的,本扩展也只能获取多大的。如果up主自己把图片缩小了,本扩展也只能获取缩小后的图。

如果发现了问题和建议,可以加qq群讨论:499873152

获取bilibili视频的封面图片的用户脚本

06/14
12:03
学习

在script标签中输出script标签出错的解决办法

如果我们在JavaScript里想输出一个script标签,可以这样写:

document.writeln("<script>alert('xx');</script>");

但如果是在html文件里的script标签里这样写,就会出现语法错误:

<script>
document.writeln("<script>alert('xx');</script>");
</script>

javascript js script标签 语法错误

在编辑器里面也能看出来异常,本来红框内是字符串,应该都是黄色的,但是显示的不对,原因就是在html里会把结束标记的字符串
“</script>”解析成标签,导致了错误。

解决办法是把导致错误的这个结束标记拆开再拼接起来:

<script>
document.writeln("<script>alert('xx');</scr"+"ipt>");
</script>

在script标签中输出script标签出错的解决办法

06/7
11:09
学习

dedecms整站静态、动态切换

织梦(dedecms)后台默认首页是动态网页,其余栏目页、文章页是静态网页。

静态化有利于减小服务器压力,但是在开发、调试的时候,修改完网站需要更新网页才能看到效果,不如使用动态化来得便捷。

要切换静态。动态页面,步骤如下:

1.首页

①:静态改动态:

如果首页一直保持的是默认的“动态浏览”,则无需改动。

如果首页之前已经改成静态化了,在后台设置里改成“动态浏览”,再删除网站根目录里的index.html就行了(之后访问首页网址,如果后面还带的有index.html,是浏览器缓存的原因,实际上已经动态化了)。

2.栏目页

执行以下SQL语句把所有栏目页设置为动态化:

update dede_arctype set isdefault=-1 

如果最后改为1,则是静态化。

3.文章页

执行以下SQL语句把所有文章页设置为动态化:

update dede_archives set ismake=-1

如果最后改为1,则是静态化。

如果最后改为0,则是伪静态。但织梦的伪静态我还没用过,不知道是什么样。

ps:栏目页和文章页都可以在最后加上 where typeid=1 的形式来修改指定栏目的设置。

dedecms整站静态、动态切换

06/6
15:17
学习

重设商务通中间图片的url

商务通可以定制中间邀请框,用一个图片取代原来的邀请框。但是这个图片的url是定制的时候固定死的,后面要再改就要再花几百块。不过我们可以用JavaScript来替换图片url。

// 重设商务通中间定制图片的url
setInterval(function () {
	try{ //如果检查到中间图片,则替换其src
		document.querySelector("#LRdiv1 img").src="http://www.my.com/swt_center.gif";
	}catch(err){
		console.log(err.message);
	}
},1000)

重设商务通中间图片的url

06/5
13:58
学习

使用CSS美化表单(checkbox、radio)

今天做的网站上有个地方的单选按钮是这样的:

 使用CSS美化表单(checkbox、radio)

这个需要做美化,我找到了一个办法,步骤如下:

1.先把按钮隐藏,然后放一个i标签来伪装成按钮。把我们自己做的按钮图片设置为i标签的背景图。

2.按钮被隐藏起来了,怎么选中/反选按钮的状态呢?这就需要用label标签把按钮、i标签以及文字包裹起来,这样点击i标签和文字就可以设置按钮的选中状态了。

html代码如下:

<label><input type="radio" name="sex" value="男" checked><i></i> 男</label>
<label><input type="radio" name="sex" value="女"><i></i> 女</label>

3.在按钮的选中状态改变后,css怎样能相应的改变图片呢?我原以为要用js来判断选中状态,不曾想css里也有对应的选择器了。

css代码如下:

input[type="radio"] {display:none;} /*隐藏按钮*/
label i {  } /*设置通用样式,如宽高等*/
input[type="radio"] + i {  } /*这里设置未选中时的背景图,内略*/
input[type="radio"]:checked + i {  } /*这里设置选中时的背景图,内略*/

这是什么操作?我查了下,原来这是 :checked 是一个css3的伪类选择器,可以匹配每个选中的输入元素(仅适用于单选按钮或复选框)。

除此之外还有个识别禁用状态的 :disabled 伪类选择器,这次我没有使用。

+号选择器则代表相邻的元素。
Read More →

使用CSS美化表单(checkbox、radio)

06/5
12:03
学习

img元素不能使用after、before伪元素的研究

通过使用css的after、before伪元素,我们可以对html元素追加内容。今天我在对img元素使用after、before伪元素时发现不生效,后来确定是after、before伪元素对于img标签这类不支持内嵌其他标签的标签无效。

如下图,是对p标签使用after,正常。

::before ::after css img 伪元素 无效

注意,如果生效的话,我们在开发者工具里能看到红框处添加了伪元素。

下面是对img元素使用after,css规则是正确加载了的,但是没有给img标签追加伪元素。

::before ::after css img 伪元素 无效

后来我思考了一下,发现伪元素生效时,在html里追加的伪元素是位于标签内的。但img标签不能再嵌套其他标签,所以这时候伪元素就不生效了。

以此类推,其他一些不能嵌套子元素的标签应该一样不能使用after、before伪元素。

后来我去MDN上看了看这俩伪元素的定义,确实是这样。国内的一些网站上的资料则是说在元素前/元素后追加伪元素,害人不浅。

img元素不能使用after、before伪元素的研究