对json的详解

2015-09-02

很多刚入门的小伙伴对json格式甚是害怕，甚至陌生，今天这篇文章主要是针对新手来讲解一下json格式。

一、JSON概念

JSON（JavaScript Object Natation）JS对象表示法，从属于JS（JavaScript），是一种基于文本、独立于语言的轻量级数据交换格式。它经常被拿来和XML作比较，比较方面一般有：

动态加载、移除、替换js/css文件

2015-09-02

1、动态加载一个js/css文件

function loadjscssfile(filename, filetype){
    if (filetype=="js"){
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
    }else if (filetype=="css"){
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)
}

阅读全文

web前端开发中的浏览器CSS兼容性总结

2015-08-31

1、居中问题

div里的内容，IE默认为居中，而FF默认为左对齐，可以尝试增加代码margin: 0 auto;

2、高度问题

两上下排列或嵌套的div，上面的div设置高度(height)，如果div里的实际内容大于所设高度，在FF中会出现两个div重叠的现象；但在IE中，下面的div会自动给上面的div让出空间所以为避免出现层的重叠，高度一定要控制恰当，或者干脆不写高度，让他自动调节，比较好的方法是 height:100%;但当这个div里面一级的元素都float了的时候，则需要在div块的最后，闭和前加一个沉底的空div，对应CSS是：

阅读全文

剖析Javascript匿名函数

2015-08-31

一、什么是匿名函数？

在Javascript定义一个函数一般有如下三种方式：

1、函数关键字(function)语句：
javascriptfunction fnMethodName(x){alert(x);}

阅读全文

jQuery+CSS3实现点击动画弹出表单代码

2015-08-31

分享一款基于jQuery+CSS3点击动画弹出表单代码是一款鼠标点击图标按钮动画弹出表单特效代码。效果图如下：

实现的代码。

阅读全文

JS图片压缩（pc端和移动端都适用）

2015-08-31

最近在做移动端遇到了一个问题就是：手机拍照后，图片过大如果上传到服务器务必会浪费带宽，最重要的是流量啊别慌，好事儿来了，务必就会有人去研究研究图片的压缩：

鄙人结合前人的经验，结合自己实战，总结出一个方法供大家参考:

/**
 * 图片压缩，默认同比例压缩
 * @param {Object} path    
 *         pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径
 * @param {Object} obj
 *         obj 对象 有 width， height， quality(0-1)
 * @param {Object} callback
 *         回调函数有一个参数，base64的字符串数据
 */
function dealImage(path, obj, callback){
    var img = new Image();
    img.src = path;
    img.onload = function(){
        var that = this;
        // 默认按比例压缩
        var w = that.width,
            h = that.height,
            scale = w / h;
            w = obj.width || w;
            h = obj.height || (w / scale);
        var quality = 0.7;        // 默认图片质量为0.7

        //生成canvas
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');

        // 创建属性节点
        var anw = document.createAttribute("width");
        anw.nodeValue = w;
        var anh = document.createAttribute("height");
        anh.nodeValue = h;
        canvas.setAttributeNode(anw);
        canvas.setAttributeNode(anh);

        ctx.drawImage(that, 0, 0, w, h);
        // 图像质量
        if(obj.quality && obj.quality <= 1 && obj.quality > 0){
            quality = obj.quality;
        }
        // quality值越小，所绘制出的图像越模糊
        var base64 = canvas.toDataURL('image/jpeg', quality );
        // 回调函数返回base64的值
        callback(base64);
    }
}

阅读全文

深入分析详解Phaser状态管理(StateManager)

2015-08-29

当我们在玩一个简单的网页游戏的时候，其流程通常会包含以下步骤：

1、出现一个载入进度条，载入一些必须的图片、音频、字体等文件；

2、显示主菜单，提示用户开始游戏；

3、进入游戏主逻辑。在游戏过程中，当用户胜利或者失败，或是触发了某个按钮或者按键时，游戏会退出，显示主菜单。

阅读全文

Phaser新手教程：开发”怪物要糖果“游戏

2015-08-29

在这个特别长的教程里，我将详细解释“怪物要糖果”的代码。这是一个多平台游戏，使用Phaser（HTML5游戏引擎）制作。这样你就可以了解Phaser，并将学到的技巧用来创建你自己的HTML5游戏。

说明

如果你想制作HTML5游戏，最好选择一个框架或引擎。你可以用JavaScript写游戏，但使用一个框架，会大大提高开发效率。

阅读全文

javascript 面向对象继承详解

2015-08-29

题记

关于继承已经是老生常谈的事情了，不管是css的继承还是js的继承，都已经出了不少文章，本次将继续和大家一起探讨js中面向对象的继承。由于js不像java那样是完全面向对象的语言，js是基于对象的，它没有类的概念。所以，要想实现继承，一般都是基于原型链的方式；

阅读全文

RGBA与Opacity区别详解

2015-08-29

RGBA和Opacity都和透明度有关，但是它们又有什么区别呢？也许有的小伙伴一时也想不出来，不要紧，悄悄地往下看。

先来简单看看RGBA：

语法

1	gba(r,g,b,a)

阅读全文

H5游戏开发之phaser学习笔记（二）

2015-08-29

一、启用物理系统

默认的游戏中的每个对象的物理系统是关闭的，要启用一个对象的物理系统，可以使用 game.physics.enable() 方法
enable(object, system, debug)

阅读全文

移动端Web开发如何处理横竖屏

2015-08-28

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title>横竖屏切换检测</title>
<style type="text/css">
.landscape body {
background-color: #ff0000;
}

.portrait body {
background-color: #00ffff;
}
</style>
<script type="text/javascript">
// window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式
// onorientationchange : 在每次屏幕方向在横竖屏间切换后，就会触发这个window事件，用法与传统的事件类似
(function(){
var supportOrientation=(typeof window.orientation == "number" &amp;&amp; typeof window.onorientationchange == "object"); //判断浏览器是否支持orientation

var updateOrientation=function(){
if(supportOrientation){
updateOrientation=function(){
var orientation=window.orientation;
switch(orientation){
case 90:
case -90:
orientation="landscape"; //横屏
break;
default:
orientation="portrait"; //竖屏
}
document.body.parentNode.setAttribute("class",orientation);
};
}else{
updateOrientation=function(){ //如果当前浏览器不支持orientation，则使用最简单的方法（判断窗口的高宽）
var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait";
document.body.parentNode.setAttribute("class",orientation);
};
}
updateOrientation();
};

var init=function(){
updateOrientation();
if(supportOrientation){
window.addEventListener("orientationchange",updateOrientation,false);
}else{
window.setInterval(updateOrientation,5000);
}
};
window.addEventListener("DOMContentLoaded",init,false);
})();
</script>
</head>
<body>
<div>
移动端Web开发如何处理横竖屏
</div>
</body>
</html>

阅读全文

JavaScript中function的多样性

2015-08-28

JavaScript 中的 function 有多重意义。它可能是一个构造器（constructor），承担起对象模板的作用；可能是对象的方法（method），负责向对象发送消息。还可能是函数，没错是函数，和对象没有任何关系独立存在的可以被调用的函数。

由于语言设计者的妥协，在 JavaScript 加入了一些 class 相关的特性，以使 JavaScript 看起来确实象 Java，可以 “面向对象”。虽然 JavaScript 添加了 new 和 this，但却没有 class （ES6已加）。最后 function 临时担负起 class 的任务。

阅读全文

利用CSS、JavaScript及Ajax实现图片预加载的三大方法

2015-08-27

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术，来增强网站的性能与可用性。

阅读全文

CSS3兼容IE的神器

2015-08-27

经过长久以来的不懈努力，我终于成功的将selectivizr与PIE这两个解决css3的利器进行了深度的整合，大大降低了使用难度

1	<!--[if lte IE 9]><script src="/js/selectivizr.js"></script><![endif]-->

阅读全文

JQUERY 只能投票一次（根据cookies判断）

2015-08-27

根据cookie来判断，只能投票一次，下面贴上代码：

<html>
<head>
<title>test</title>

<script type="text/javascript" src="jquery-132min2.js" ></script>
<script type="text/javascript" src="Jquery-cookie.js" ></script>

<script type="text/javascript">
document.oncontextmenu = function() {
  return false;
}
$(document).ready(function() {
  if (document.cookie & amp; & amp; document.cookie != '') {
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
      var cookie = jQuery.trim(cookies[i]);
      var id = cookie.substring(cookie.indexOf('=') + 1);
      $("#vote-up-" + id).attr("disabled", "disabled");
      $("#vote-dn-" + id).attr("disabled", "disabled");
    }
  }
});

function votes(id, num) {
  var cookieName = $.cookie('isClick' + id);
  if (cookieName == id) return;
  var posscore = parseInt($('#up-' + id).text()),
    negscore = parseInt($('#dn-' + id).text()),
    d = (num > 0 ? 'up' : 'dn');
  num > 0 ? posscore++ : negscore--;
  var val = 0;
  if (num > 0)
    val = posscore;
  else
    val = negscore;
  $("#" + d + "-" + id).html(val);
  showAnimation(d + '-' + id, num);
  // $("#vote-up-"+id).removeClass("");
  // $("#vote-up-"+id).addClass("");
  // $("#vote-dn-"+id).removeClass("");
  // $("#vote-dn-"+id).addClass("");
  $("#vote-up-" + id).attr("disabled", "disabled");
  $("#vote-dn-" + id).attr("disabled", "disabled");
  $.cookie('isClick' + id, id);
}

function showAnimation(containerId, actionValue) {
  var obj = $('#' + containerId),
    pos = obj.offset(),
    ani = $('<div id="vote-ani" style="font-size:24px;z-index:1000;">' + (actionValue > 0 ? "+1" : "-1") + "</div>");
  ani.appendTo('body');
  $("#vote-ani").css({
    top: pos.top + 10,
    left: pos.left + 10,
    display: 'block',
    position: 'absolute'
  });
  $("#vote-ani").animate({
    opacity: 0,
    left: "-=10px",
    top: "-=10px"
  }, 500, 'linear', function() {
    ani.remove()
  });
}

</script>

</head>
<body>
<div class="bar clearfix" id="qiushi_counts_4283026">
<div class="up" id="vote-up-4282280">
<a href="javascript:votes(4282280,1)" id="up-4282280">1574 </a>
</div>
<div class="down" id="vote-dn-4282280">
<a href="javascript:votes(4282280,-1)" id="dn-4282280">-55 </a>
</div>
</div><br />
<div class="bar clearfix" id="Div1">
<div class="up" id="vote-up-4282281">
<a href="javascript:votes(4282281,1)" id="up-4282281">11 </a>
</div>
<div class="down" id="vote-dn-4282281">
<a href="javascript:votes(4282281,-1)" id="dn-4282281">-11 </a>
</div>
</div>
</body>
</html>

阅读全文

jQuery输入框提示自动完成插件 autocomplete

2015-08-27

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>练习</title>
<script src="js.js"></script>
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.autocomplete.min.js"></script>
</head>
<body>
<form action="">
<input type="text" name="country" id="autocomplete"/>
</form>

</body>
<script>
var countries = [
{ value: 'Andorra', data: 'AD' },
// ...
{ value: 'Zimbabwe', data: 'ZZ' }
];

$('#autocomplete').autocomplete({
lookup: countries,
onSelect: function (suggestion) {
alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
}
});

</script>
</html>

阅读全文

指定内容多少行后未显示全就用省略号代替

2015-08-26

相信大家也开始接触移动端的项目了，移动端兼容各种设备想必让你也头疼吧。不过移动端也有它好的一面，就是可以用比较新的css3属性了，从而在布局上面来说也是福音。下面就说的就是文字内容超出就用省略号代替的问题，相信大家在PC端都知道多换文字是无法实现内容超出就用省略号显示的，多半是用字符串截取的方式了。那移动端就可以结合css3来实现，下面的例子就是多行内容如果没有显示全就用省略号代替了。

阅读全文

关于手机端CSS Sprite图标定位的一些领悟

2015-08-26

今天在某个群里面闲逛，看见一个童鞋分享了一个携程的移动端的页面。
地址这里我也分享下吧：http://m.ctrip.com/html5/在手机端我都很少用雪碧图合并定位图标，用的比较多就是用字体图标来代替，有些图标不多的时候就自己单个的切出来控制了。

阅读全文

JavaScript拖拽翻页(ThrowPage)

2015-08-26

查看演示

结构层

要把一个目录的内容按页展开，该怎么写呢？也许是这样，至少我就是这么写的

<div id=”menu”>
<div class=”page”>
<ul>
<li><span>09-11-25</span><a>恋曲1980</a></li>
<li><span>09-11-25</span><a>恋曲1990</a></li>
<li><span>09-11-25</span><a>恋曲2000</a></li>
<li><span>09-11-25</span><a>母亲</a></li>
</ul>
<span class=”tip”>1/2页 拖拽翻页</span>
</div>
<div class=”page”>
<ul>
<li><span>09-11-25</span><a>伴侣</a></li>
<li><span>09-11-25</span><a>思念</a></li>
<li><span>09-11-25</span><a>童年</a></li>
<li><span>09-11-25</span><a>牧童</a></li>
</ul>
<span class=”tip”>2/2页 拖拽翻页</span>
</div>
</div>

阅读全文

侠名风

一、JSON概念

1、动态加载一个js/css文件

一、什么是匿名函数？

说明

一、启用物理系统