saber酱的抱枕

Fly me to the moon

10/24
17:53
学习

css3的渐变

这是一个常规的线性渐变,其在chrome下代码如下:

background:-webkit-gradient(linear, 0% 0%, 00% 100%, from(yellow), to(orange));

不要担心这些语法会让你看花眼,我也是这样的!只要记得我们需要用一个逗号来隔开这个参数组。
渐变的类型? (linear)
渐变开始的X Y 轴坐标(0 0 – 或者left-top)
渐变结束的X Y 轴坐标(0 100% 或者left-bottom)
开始的颜色? (from(color))
结束的颜色? (to(color))

调整了起始点和终点的样式:

同上chrome下的代码:

background:-webkit-gradient(linear, 20% 10%, 10% 90%, from(yellow), to(orange));

为了兼容性考虑可以在渐变之前写一个纯色背景;颜色可以用rbg/rgba格式或16进制颜色

包含ff的代码请看这里

css3的渐变

10/15
11:04
学习

chrome下字号不能小于12号的变通解决方法

今天在某网站看到导航的英文标签用css来缩小了字体

-webkit-transform:scale(0.84,0.84);

这使12px的字体显示的像9px左右,但是看起来不是很自然了。我刚开始很奇怪,因为用的arial字体即使在小于12px的情况下也有很好的表现,后来我去掉这条属性,直接把字号改成9px,却发现无效,这才想起来chrome里面字号小于12px的话也是按12px显示的,这个方法大概可以算是一个变通的方法了。

chrome下字号不能小于12号的变通解决方法

10/14
10:18
学习

研究SuperSlide的记录

已弃坑。我下面试的几次,都是自己对其示例进行了结构的简化,想要以后用着方便,事实证明这么做意义不大,该用的时候拉过来源代码直接修改就成了。以后只做一些补充就行了。

用superslide做焦点图,其切换间隔太快,但是demo文档里又没有这个参数设置,于是去查看官网的参数文档,找到了interTime参数,如下:

jQuery(".slideBox").slide({mainCell:".bd ul",effect:"fold",autoPlay:true,interTime:5000});

css里有些地方得改一下:

.slideBox .bd{ position:relative; height:100%; z-index:0; left:50%; margin-left:-960px;  }/*这里设置居中*/
/*.slideBox .bd img 如无必要,不要设置width,否则可能导致图片变形*/
/*指示器默认是靠右的,可能会被右侧的漂浮广告挡住,给.slideBox .hd设置一个right值比较合适。*/

注意参数最后是不加分号的,加了报错。另附动画效果参数:

[v1.0] fade:渐显; || top:上滚动;|| left:左滚动;|| topLoop:上循环滚动;|| leftLoop:左循环滚动;|| topMarquee:上无缝循环滚动;|| leftMarquee:左无缝循环滚动;
[v2.0] fold:淡入淡出
[v2.1] slideDown:下拉效果
Read More →

研究SuperSlide的记录

10/14
09:27
学习

MSClass.js滚动插件

在仿站的时候发现某网站的滚动大量使用这个插件,原来是MSClass.js,官网在此。现在网上流传的版本有很多都是07年的了,然而照样能用,我只能说666666了。我也摸索了下怎么用(我实验的时候用的是老版)。

首先引入这个js。之后需要一个容器,设置id,里面放上需要滚动的内容,也可以是列表,复杂些的内容也可以。最后在容器结束之后,为这个容器创建滚动对象。

容器不需要设置超出隐藏和宽高(你在参数里指定之后MSClass.js会把这些规则加到元素上)。容器内的子元素浮动的话可能导致滚动失效。至于滚动的参数可以看说明。

我发现图片的html换行的话,图片之间会产生空白,至今无法解决。使图片浮动的话就没有空白了,但是滚动会失效。

MSClass.js滚动插件

10/11
14:26
学习

js复制内容时自动加上版权信息

这在萌娘百科注意到的,复制其页面的文字粘贴,会自动多出一段标有出处的话。百度之,找到了代码,兼容主流浏览器。

function addCopyright() {
    var Original = "\n转自 saber酱的抱枕 " + location.href; //追加的内容
    if ("function" == typeof window.getSelection) {
        var c = window.getSelection();
        if ("Microsoft Internet Explorer" == navigator.appName && navigator.appVersion.match(/MSIE ([\d.]+)/)[1] >= 10 || "Opera" == navigator.appName) {
            var g = c.getRangeAt(0),
            h = document.createElement("span");
            h.appendChild(g.cloneContents()),
            g.insertNode(h);
            var i = h.innerHTML.replace(/(?:\n|\r\n|\r)/gi, "").replace(/<\s*script[^>]*>[\s\S]*?<\/script>/gim, "").replace(/<\s*style[^>]*>[\s\S]*?<\/style>/gim, "").replace(/<!--.*?-->/gim, "").replace(/<!DOCTYPE.*?>/gi, "");
            try {
                document.getElementsByTagName("body")[0].removeChild(h)
            } catch(f) {
                h.style.display = "none",
                h.innerHTML = ""
            }
        } else var d = "" + c;
        var e = document.getElementsByTagName("body")[0],
        f = document.createElement("div");
        f.style.position = "absolute",
        f.style.left = "-99999px",
        e.appendChild(f),
        f.innerHTML = d.replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, "$1<br />$2") + "<br />" + Original,
        c.selectAllChildren(f),
        setTimeout(function() {
            e.removeChild(f)
        },
        0)
    } else if ("object" == typeof document.selection.createRange) {
        event.returnValue = !1;
        var c = document.selection.createRange().text;
        window.clipboardData.setData("Text", c + "\n" + Original)
    }
};
document.body.oncopy = addCopyright;

js复制内容时自动加上版权信息

10/11
13:39
学习

破图床毁一生

刚才发现一篇文章里点我的很多图都加载不出来了,一看都是http://t.williamgates.net/存的,8月初的时候七牛审查停用1周,这段时间有不少图存在了这个网站上,当时还记下了这个网站点我,结果现在才俩月图就不在了,把我坑的血本无归,WTF!

破图床毁一生

10/11
11:59
学习

在网页上引用了百度地图,那么问题来了

百度地图生成器里创建了一个地图,然后引入到网页。似乎一切都很正常

但是在chrome中,插入了百度地图的页面,所有元素都无法被选中了(快捷键ctrl+a除外)。不信可以单独把生成的地图代码放到一个新的html里,然后随便打些字测试。但是IE和FF里能正常选中。

找了好久的原因,最终发现在百度地图引入了一个叫做ctrl-pkg_2e03d04.js的js文件(源文件里看不到,在缓存中找到的),里面有三句onselectstart="return false",这也是我所用过的伎俩,但是我却不会破解,给跪

后来贴吧大神帮我解决了,把代码里的api版本从1.1改成1.0就行了,目前没发现大的问题。

在网页上引用了百度地图,那么问题来了

10/11
11:33
学习

html的map热区

html的map热区可以在一张图片上划分出多个区域分别设置链接。要点如下:

1.在图片上设定 usemap="#name" (记得加#,否则只在chrome中有效
2.map标签设定name="name"
3.area里面的shape标签有三种定义:
rect为矩形,coords(坐标)需要左上角坐标和右下角坐标;
circle为圆形,coords需要圆心位置和半径;
poly为多边形,依次设定各个顶点的坐标。
如果两个区域重叠了,以优先定义的区域为准

html的map热区

10/11
09:45
学习

js表单验证

这也是常用的东西了,但是我之前没做过,现在研究了一下,原理就是提交表单的时候要求一个返回值,这个返回值是true还是false则由JS进行取值判断。以前不了解表单提交时可以判断true或者false的机制,还以为更加复杂呢。做了个最简单的判断姓名不能为空的demo,代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>js表单验证</title>
</head>
<body>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
function checkfrom () {
	if ($("#youname").val()=="") {
		alert("姓名不能为空!");
		$("#youname").focus();
		return false;
	}else{
		return true;
	};
}
</script>
<form action="../../plus/diy.php"  method="post"  onsubmit="return checkfrom()">
	姓  名:<input  id="youname" name="youname" type="text" value="">
	<input class="coolbg" name="submit" type="submit" value="提 交">
</form>
</body>
</html>

Read More →

js表单验证