web前端分享

jquery 解析 json

2012-04-19 3:34 - javascript -

很简单的一个小例子，。，

        var url="http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?";
        $.getJSON(　　　　
        url,function(data){
					var tit=data.items[1].author;
					$("#ginfo").html(tit); 　
			}
        )
</script>
</head>
<body style="color:#000;">
<div id="ginfo">
</div>
</body>

已有 0 条评论 »

jquery 完美拖动

2012-04-18 3:00 - javascript -

这个JS拖动很符合我的需要，之前自己写过一个，但会有出界的情况。

到处找代码，找到这个，修改了下，自己拿去用了。

源码在此：完美拖动

已有 0 条评论 »

无指定宽度的DIV层中的不定数量a标签横排居中操作

2012-04-16 10:12 - css3 -

思路：“.page”向右浮动50%，是以外层“.pagelist_b”的宽度为标准的；内层（如A,SPAN）向左浮动50%，是以层“.page”的宽度为标准的，这里无需定义内层的宽度。这样算是一个小技巧，让“.page”居中了。也补足了float没有center属性的缺陷。

<!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" />
	<meta http-equiv="Content-Language" content="utf-8" />
	<title> new document </title>
	<meta name="robots" content="all" />
	<meta name="generator" content="editplus" />
	<meta name="author" content="hayden@yeah.net,hayden" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<link rel="stylesheet" rev="stylesheet" href="" type="text/css" media="all" />
	<script type="text/javascript" src=""></script>
	<style type="text/css">
* { word-wrap: break-word; margin: 0; padding: 0;}

.pagelist_b {width:100%;height:80px;text-align: center; }
.page {position:relative;left:50%;float:left;}
.page span {position:relative;left:-50%;border: 1px solid #ddd;display: inline;float:left;padding:0 6px;height:30px;line-height:30px;margin:2px;}
.page span.totlerecord{}
.page span.current{cursor:pointer;}
.page a:link,.page a:visited {border: 1px solid #ccc;display: inline;float:left;padding:0 6px;height:30px;line-height:30px;margin:2px;text-decoration: none;position:relative;left:-50%;color:#666}
.page a:hover {border:1px solid #666;}

	</style>
 </head>
 <body>

<div class="pagelist_b">
	<div class="page">
		<span class="totlerecord">5</span>
		<span class="totlepages">1/5</span>
		<span class="current">1</span>
		<a href="#">2</a>
		<a href="#">3</a>
		<a href="#">4</a>
		<a href="#">5</a>
		<a href="#">></a>
	</div>
</div>

 </body>
</html>

已有 0 条评论 »

纯css3做的枫叶飘动

2012-04-09 3:45 - css3 -

，这个例子非常出色。纯CSS3编写的枫叶飘动。

主要是应用到了CSS3 animation-name的属性，它为页面元素指定一个动画的名称。就这样：
@-webkit-keyframes fade
{
0% { opacity: 1; }
95% { opacity: 1; }
100% { opacity: 0; }
}

然后在HTML中这样使用：<div style=”top: -100px; left: 258px; -webkit-animation-name: fade,….，这样就把fade加载到这个DIV容器上了。

我把这个例子简化了一下，去掉了多余的东西。

源文件在此：枫叶飘动

已有 0 条评论 »

响应鼠标事件的纯CSS3的柱形图

2012-04-09 12:45 - css3 -

这个例子，看起来很复杂，其实很简单，它的响应鼠标应用了:hover；移动位置应用了transition和transform这二个CSS3的属性。

transition: transform 1s linear;意思是transition(过渡效果)中的transform(变形)，速度是1秒，linear是匀速。

transform: translate(202px, 115px);意思是transform(变形)中的translate(移动)，表示X向右移动202个像素，y向下移动115个像素。

在本例子中，三个盒子容器cube，默认的设置是绝对定位，位置在left: 50%;top: 300px;

于是，当鼠标移动到cube上的时候，cube就速度1秒并且匀速的状态，向右下移动了。

实例在此：css3d

已有 0 条评论 »

从零开始写一个HTML5页面

2012-04-09 10:47 - html5 -

要写个HTML5的网页，第一行就是这写doctype,HTML5是这样的：<!DOVTYPE html>,简单吧，还不分大小写。

写页面是要用标签的，标签就是容器，这一点是没有变的。容器组成网页。那么，先看HTML5有哪些新标签。

-<header>，头标签嘛，以前都是这样<div class=”header”></div>，现在就这样写<header></header>..

–<nav>，看字母也知道是导航的意思，以前这样写<div class=”nav”><ul><li>导航1</li><li>导航2</li></ul></div>，
现在这样写：

<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>

–<section>，规范里说是一个有主题的内容组。其实就是页面的主体内容即可。

–<article>，也是一个内容的容器，页面的主体内容即可。它和section可以嵌套的。

–<aside>，看规范的意思，就是备注，脚注，引用，注释，边栏一类的东西，，

–<footer>，页面的尾。

好了，页面的标签都搞清楚了，那么就用它来写个页面出来。就下面这样的，，

<!DOCTYPE html>
<html>
<head>
<style>
header {
	display: block;
	font-size: 12px;margin:0 auto;
	font-weight: bold;width:960px;height:40px; background:#f00;
}
nav{width:960px;height:30px;margin:0 auto; background:#ccc; }
nav li{float:left;width:auto;margin:4px; background:#fff;list-style:none;padding:0 3px;}
section{width:960px;height:auto;margin:0 auto; background:#ccc;}
section h1{color:#0f0;}
section article{color:#ff0; background:#ddd;padding:5px;}
footer{width:960px;height:30px;margin:0 auto; background:#ccc;}
</style>
</head><body>
<header>
  <h1>
    My Site
  </h1>
</header>
<nav>
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</nav>
<section>
  <h1>
    My Article
  </h1>
  <article>
    <p>构也很清晰，没有那许多的</p>
  </article>
</section>
<footer>
  <p>构也很清晰，没有那许多的</p>
</footer>
</body>
</html>

很简单，不是么，结构也很清晰，没有那许多的class。。。但要记得一点，在HTML5中，所有的元素默认都是inline的，要加上display:block。
但在这个例子中，貌似我没加display:block，页面也能正常显示啊，。。。等有时间的我再多测试一下，，

已有 1 条评论 »

html5标签简说

2012-04-09 10:14 - html5 -

简说，就是简单的说，实在受不了现在的文章，越来越长。。

首先，为毛要出HTML5？答，为了解决网站应用中的交互，媒体，验证，本地/网络操作，跨平台，跨终端等问题。

那么，它新在哪呢？看下面，，

–doctype简化了，<!DOCTYPE html>这一句即可。

–figure，用来标示图片的标题。

<figure>
  <p>黄浦江上的的卢浦大桥</p>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

--可编辑的Contenteditable，HTML5的新元素，使容器中的文本在网页中是可编辑的，很实用呀。实例：

<table id="edit" Contenteditable="true"></table>

<table id="edit" contenteditable="true">
            <tr><td>Chinese Name:</td>
            <td>moumou</td><td>Birthday:</td>
            <td>1931.01.13</td></tr>
</table>

--Email input之类的输入检查，在HTML5中，给input的type设置为email，浏览器会自动验证你输入的是不是为email，不用再写JS了，，
当然，你后端也得有相应的检查，，

-- Placeholder属性，HTML5新增的，就是文本框你设置了该值后，它的内容是灰色字显示的，文本框获得焦点之后，灰字消失。就这样:
<input id="t1" type="text" placeholder="请输入文字" />

--Local Storage，本地存储。存储大量的数据在客户端，大多浏览器已经支持，你用之前检测一下：
if(window.localStorage){
 alert('This browser supports localStorage');
}else{
 alert('This browser does NOT support localStorage');
}

--header 和footer就不说了，语义化而已。更多的html表单特性也不说了，以后另开贴。

--HTML5的新元素默认情况下全是inline方式，也就是说，你得把它们手动设置为display:block;就这样
header, footer, article, section, nav, menu, hgroup {display: block;}

--required属性，必填字段，不写就出错误提示的那种input。就这样，
<form action="demo_form.asp" method="get">
  Name: <input type="text" name="usr_name" required="required" />
  <input type="submit" />
</form>

--audio和video标签，不需要插件来显示音视频啦，不过兼容并不好，这个你懂的。而且HTML5对于video没有指定编码，导致各家

厂商根据自己的情况给video提供支持，乱着呢。。

其它的容后再写吧。。

已有 0 条评论 »

html5的一些情况与传说

2012-04-09 9:42 - html5 -

个人版本嘛，长话短说。

HTML5其实是一些新的标准，写法，创建网页的思路还是一样的，现代浏览器功能已经很强大了，HTML5更多的还是把浏览器本身的功能应用起来了。例如离线存储，video标签等，HTML5本身并不能做太多的事情。现在很酷的HTML5网站，实际上是CSS3+jQuery。它们运行的网页DOM是由HTML5组成的，但CSS3和JQ与HTML5是并列的，它们之间并不存在包含的关系。

以下是传说种种。。：
-HTML5的产生与苹果不支持FLASH没有关系。因为新的HTML标签，也就是早期的HTML5在2004年就已经由opera和mozila向W3C提交了，并于2006年被接受。

-HTML5与2020年的关系，这个2020年不知是哪出来的。其实HTML5已经在2009年审议通过了，就是不会再轻易被改动了。你现在就可以使用HTML5，至于有些浏览器不支持HTML5，你可以通过JS来解决。

-HTML5与CSS3没有必然联系，就是说，你可以HTML5+CSS2，完全可以。因为HTML5就是标记语言，它只是标签，只是容器而已。

HTML5与FLASH是死敌，这更是扯淡，FLASH现在还是被使用，并且是最广泛的客户端之一。误解就是ADOBE和APPLE之间的问题，还有HTML5音频和视频的支持，虽然HTML5播放音视频无需插件，但它需要更多的资源等，而且它本身还不完善。目前的一些HTML5音视频应用，更像是一些技术推广，还没有看到哪家厂商彻底放弃FLASH技术。只能说，FLASH和HTML5将统治不同的设备平台。

-HTML5的DOCTYPE，添加了它，你的网站就是HTML5网站了？是的，没错。在浏览器看来是这样的。但HTML5是一套语义标签，排版元素和提升用户体验等等的综合体，并使用浏览器的新功能，这才是HTML5网站。

其它的关于HTML5的误解嘛，以后再说。

已有 0 条评论 »

css3动画泡沫按钮

2012-04-08 6:49 - css3 -

，先看缩略图，这就是网上很流行的一个泡沫背景的CSS3按钮。

我按着网上的教程，重做了一个，当然，我只重做了一个按钮。

这个例子很生动，也很简单，其实就是二种状态的背景移动。分别是:link和:hover二种。

:link就是没有鼠标移动在它上面；:hover是鼠标移动到它上面的样子。

我把这个例子极简化了一下，只保留了背景移动效果，其它的都去掉了。

背景移动的关键在这：transition:background-position 1s;

当鼠标移动到按钮上时，就会触发过渡动画transition。

默认是在background-position:bottom left;

:hover时，就会移动到background-position:bottom left;

源码在此：css3-buttons

已有 0 条评论 »

使用jquery的CSS3时钟

2012-04-08 5:04 - css3 -

先看缩略图，这是一个由CSS3组成，由JQ驱动的时钟，很直观很简单，

运行起来是这个样子的：http://css-tricks.com/examples/CSS3Clock/

看CSS代码：

<style type="text/css">
        * {
        	margin: 0;
        	padding: 0;
        }

        #clock {
        	position: relative;
        	width: 600px;
        	height: 600px;
        	margin: 20px auto 0 auto;
        	background: url(images/clockface.jpg);
        	list-style: none;
        	}

        #sec, #min, #hour {
        	position: absolute;
        	width: 30px;
        	height: 600px;
        	top: 0px;
        	left: 285px;
        	}

        #sec {
        	background: url(images/sechand.png);
        	z-index: 3;
           	}

        #min {
        	background: url(images/minhand.png);
        	z-index: 2;
           	}

        #hour {
        	background: url(images/hourhand.png);
        	z-index: 1;
           	}

        p {
            text-align: center;
            padding: 10px 0 0 0;
            }
    </style>

首先定义了一个表盘，还有三个表针。表盘与表针的关系是父子容器和相对定位与绝对定位的关系，这样三个表针就会与表盘保持相对位置一至。

接下来看JS代码：

$(document).ready(function() {

              setInterval( function() {
              var seconds = new Date().getSeconds();
              var sdegree = seconds * 6;
              var srotate = "rotate(" + sdegree + "deg)";

              $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});

              }, 1000 );

              setInterval( function() {
              var hours = new Date().getHours();
              var mins = new Date().getMinutes();
              var hdegree = hours * 30 + (mins / 2);
              var hrotate = "rotate(" + hdegree + "deg)";

              $("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate});

              }, 1000 );

              setInterval( function() {
              var mins = new Date().getMinutes();
              var mdegree = mins * 6;
              var mrotate = "rotate(" + mdegree + "deg)";

              $("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate});

              }, 1000 );

        });

JS代码中，设置了三个setInterval，这个方法可以不停的调用其中的函数，直到窗口被关闭。

拿分针来说，setInterval了一个匿名函数，在页面加载时就开始调用，关键在于var mrotate = "rotate(" + mdegree + "deg)";这一句，它定义了指针的倾斜角度。

rotate来源于CSS 3中的变形功能：transform，单位是deg；语法是：-webkit-transform: roate(1deg);

那么上文连起来就是通过setInterval不断执行匿名函数，先得到当前的秒数，再乘6，因为一圈360度，一分60秒，那么每秒移动6度。

然后把mrotate这个变量传到设置CSS语句中，每执行一次匿名函数，秒针就移动一次。。。

源码这里： CSS3Clock

已有 0 条评论 »