十六进制颜色转换成RGB

2015-07-17

使用示例：

“#333”.toRGB();

“#AAAAAA”.toRGB();

String.prototype.toRGB = function(){
 var _color = this,
 _rgb = [];
 if(_color.search(/^#[a-fA-F0-9]{3}$|^#[a-fA-F0-9]{6}$/) === 0){
 // 如果是3位的十六进制转换成6位的十六进制
 if(this.length === 4){
 _color = this.replace(/[a-fA-F0-9]/g, function(color){
 return color + color;
 })
 }

 // 将十六进制颜色转换成RGB模式
 _color.replace(/[a-fA-F0-9]{2}/g, function(color){
 _rgb.push(parseInt(color, 16));
 });
 return "rgb("+ _rgb.toString() + ")";
 }
 console.error("类型错误");
 return null;
}

阅读全文

浏览器内核分类

2015-07-17

现在市面上五花八门的浏览器一大堆，包括移动端的。作为前端开发者，要处理好兼容各个浏览器也是比较头疼的事。我根据个人的了解和查找资料，整理一下目前主流的浏览器内核。

1.Trident内核

Trident内核也就是我们常说的IE内核，最具代表性的当然就是IE浏览器了。Trident(又称为MSHTML)，是微软开发的一种排版引擎。它在1997年10月与IE4一起诞生，一直在被不断地更新和完善。

阅读全文

文本框禁止复制粘贴操作

2015-07-17

利用剪切板的copy、cut、paste事件操作。

兼容性上：上述三种事件，只要在上下文菜单（右键菜单）,或者使用了相应的键盘组合键，所有浏览器上都可以触发它们。

核心语句即为：当用户触发此三种事件时，通过JS阻止事件的默认行为。

1
2
3

EventUtil.addHandler(text,'copy',function(event){//copy换成paste、cut
event = EventUtil.getEvent(event);//取event
EventUtil.preventDefault(event);//阻止其默认行为

阅读全文

js跨域总结及解决方案

2015-07-17

什么是跨域

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下：

首先什么是跨域，简单地理解就是因为JavaScript同源策略的限制，a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下图：

阅读全文

面向对象---拖拽

2015-07-17

一、非面向对象的写法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function()
{
var oDiv=document.getElementById('div1');
oDiv.onmousedown=function(ev)
{
var oEvent=ev||event;
var x=0;
var y=0;
x=oEvent.clientX-oDiv.offsetLeft;
y=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function(ev)
{
var oEvent=ev||event;
var out1=oEvent.clientX-x;
var out2=oEvent.clientY-y;

var oWidth=document.documentElement.clientWidth-oDiv.offsetWidth;
var oHeight=document.documentElement.clientHeight-oDiv.offsetHeight;

if(out1<0)
{out1=0;}
else if (out1>oWidth)
{
out1=oWidth;
}

if(out2<0)
{out2=0;}
else if (out2>oHeight)
{
out2=oHeight;
}

oDiv.style.left=out1+'px';
oDiv.style.top=out2+'px';
}
document.onmouseup=function()
{
document.onmousemove=null;
document.onmouseup=null;
}
return false;//解决firefox低版本的bug问题
}
}
</script>
</head>

<body>
<div id="div1" style="width:100px; height:100px; background:#060; border:1px solid #039; position:absolute;">
</div>
</body>
</html>

阅读全文

常见浏览器的兼容问题

2015-07-17

1、ie6.0横向margin加倍

产生因素：块属性、float、有横向margin。
解决方法：display：inline；

阅读全文

闭包及其应用

2015-07-17

一. 闭包的理论

首先必须了解以下几个概念：

执行环境

每调用一个函数时（执行函数时），系统会为该函数创建一个==封闭的局部的运行环境==，即该函数的执行环境。函数总是在自己的执行环境中执行，如读写局部变量、函数参数、运行内部逻辑。创建执行环境的过程包含了创建函数的作用域，函数也是在自己的作用域下执行的。从另一个角度说，每个函数执行环境都有一个作用域链，子函数的作用域链包括它的父函数的作用域链。关于作用域、作用域链请看下面。

阅读全文

手把手教你怎么写jQuery插件

2015-07-17

jQuery（以下简称JQ）是一个功能强大而又小巧的JS框架，现在很多网站都在使用JQ，本站也不例外。本文教大家如何写一个属于你自己的JQ插件。

本JQ插件例子是在你网站的文章结尾处添加你的版权。
JQ插件标准的封装代码如下，首先需要闭包：

<script type="text/javascript">
(function($){
//这里放入插件代码
})(jQuery);
</script>

阅读全文

javascript实现标签云

2015-07-16

这是一个效果图

阅读全文

CSS3自定义滚动条样式 -webkit-scrollbar

2015-07-16

有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如何自定义滚动条的呢？

前言

webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。

阅读全文

为网站增加js网页雪花飘落效果jquery插件

2015-07-16

代码说明:

圣诞、元旦、新年了为网站增加js网页雪花飘落特殊效果jquery插件，特别适合圣诞、元旦、新年网站气氛烘托。

这个js网页雪花效果jquery插件，只需要将 jq.snow.js 引入到你的网站，当然你的网站必须已经引用了jquery库，如果没有那你要想要引入jquery库才可以,建议把js网页雪花飘落特效文件在网站的body标签的前面引用，这样做的好处是这个特效的将在最后加载不影响贵网站主要内容的快速展示。

阅读全文

css3动画简介以及动画库animate.css的使用

2015-07-16

在这个年代，你要是不懂一点点css3的知识，你都不好意思说你是个美工。美你妹啊，请叫我前端工程师好不好。呃。。好吧，攻城尸。。。呵呵，作为一个攻城尸，没有点高端大气上档次的东西怎么能行呢，那么css3的动画就绝对是值得你拥有了，虽说IE9以及更早版本的IE浏览器都不支持css3动画，但是IE6-8浏览器已是江河日下，使用谷歌浏览器、火狐浏览器、IE10+浏览器以及移动端浏览器等这些支持css3动画的浏览器的人数越来越多，所以如果很简单的就能让一部分人获得更好的用户体验，那何乐而不为呢。
从广义上来讲，css3动画可以分为两种。

阅读全文

腾讯移动web开发规范

2015-07-16

移动开发规范概述

以下规范建议，均是Alloyteam在日常开发过程中总结提炼出的经验，规范具备较好的项目实践，强烈推荐使用

阅读全文

分享我的HTML模板页面

2015-07-16

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>首页</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/reset.css"/>
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <!--[if IE]>
        <link rel="stylesheet" href="css/ie.css" />
        <script src="js/html5.js"></script>
    <![endif]-->
</head>
<body>
    <script src="js/jquery.js"></script>
    <script src="js/common.js"></script>
</body>
</html>

阅读全文

移动端中判断横屏竖屏

2015-07-16

在移动端中我们经常碰到横屏竖屏的问题，那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。
首先在head中加入如下代码：

1	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

阅读全文

jQuery中关于on的使用

2015-07-16

移除on()所绑定的方法，可以使用off()方法处理

$(document).ready(function(){
$("p").on("click",function(){
$(this).css("background-color","pink");
});
$("button").click(function(){
$("p").off("click");
});
});