2015年05月_u011263845

原创微博发布框的jquery

2015-05-26 10:35:02 1257 2

原创高亮显示当前导航条的javascript

首先写一下html结构:<div id="nav"> <ul> <li><a href="#1">首页</a></li> <li><a href="#2">产品</a></li> <li><a href="#3">地址</a></li> <li><a href="#4">关于</a></li> <li><a hr

2015-05-25 20:55:35 3414 3

原创 javascript滑动门的实现方法和案例

首先我们知道js滑动门的三种实现思路： -自定义方法 -闭包 -自定义属性那么写个列子分析一下各自的好坏。demo地址：http://codepen.io/tianzi77/pen/jPMPeB html结构：<div id="content"> <div id="tabs"> <ul> <l

2015-05-20 21:44:48 1889

实现公告栏目循环的滚动效果，直接放代码：<!doctype html>  <html> </body> </html> <head> <meta charset="utf-8"> <title>tianzi code</title> <script type="text/javascript" src="jquery-2.1.3.min.js"></script> <scr

2015-05-20 21:11:56 2492 1

原创 jquery实例demo1

<!doctype html>  <html> </body> </html> <head> <meta charset="utf-8"> <title>tianzi code</title> <script type="text/javascript" src="jquery-2.1.3.min.js"></script> <script type="text/javas

2015-05-19 21:48:37 1046

原创纯CSS下拉导航和jquery下拉导航对比

纯css实现的下拉导航demo：http://codepen.io/tianzi77/pen/xGOyxp 不用javascript以及jquery动态效果实现导航条的下拉效果。纯css属性实现，主要应用到绝对定位中的left：auto和left：-9999px；来隐藏或者鼠标经过的时候显示下拉菜单。 htm结构：<ul class="nav"> <li><a href="/">小哲</

2015-05-19 16:15:03 672

原创 jquery强大的选择器和javascript 的对比。

案列demo：http://codepen.io/tianzi77/pen/yNJVaM 首先写结构：<body> <ul id="nav"> <li class="current">tianzi</li> <li>tianzi</li> <li>tianzi</li> </ul> <div id="content"> <div class="show">content区域

2015-05-17 17:50:32 856

转载关于CSS[几乎]没人知道的3件事

你了解 CSS 吗？在六个月前，我提供了一个在线免费 CSS 测试系统。测试结果表明很多一线开发者并没有如他们所想的那样了解 CSS。目前有超过 3,000 人参加了该项测试，平均成绩只有 55 分。但是，嘿，平均分本身并没有什么意思。我更加关心大家都栽到了哪些问题上。这篇文章中，按照出错的程度将其中三个问题列出来。我会和你讨论每个问题，告诉你哪个答案被选择的最多，然后解释正确答案。可以肯定地说，如

2015-05-16 16:17:34 426

原创从一个简单例子谈谈js的捕获与冒泡问题

事件冒泡与事件捕获，下面是js中捕获与冒泡的一个实例： html结构：<div id="tianzi"> <div id="tianzi1"> <div id="tianzi2"> <div id="tianzi3"> </div> </div> </div> </div>css样式控制：#tianzi{

2015-05-11 16:39:09 1325

原创完整的日历表格

平时写表格都直接table然后tr td就完事了，其中还是有很多不完善的，今天按照标准写了个日历，带样式。供日后写表格提供一个参考，搞前端规范还是挺重要的效果地址：http://codepen.io/tianzi77/pen/JdGpwjcss部分：body { font-family: "myriad pro", arial, helvetica, sans-serif; font

2015-05-11 11:11:48 3128

原创图片折叠效果CSS实现

觉得这个效果不错，就随便写了一下。效果：http://output.jsbin.com/gerogawiqi/1 思路很简单，添加一个空伪元素，然后进行边框设置，实现折叠的效果。不过看起来还是很好看的。css部分：.tianzi{ width:300px; height: 300px; background: orange; po

2015-05-10 17:45:09 3458

原创原生javascript基础知识点（2）复习与回顾

常用对象上节课有提到引用对象，并大致的讲了一下。这里再选取其中3种稍微详细的讲一下。Object对象，其内容形式为键值对，主要用来存储和封装。创建对象创建一个对象有两种常见方式，通过对象字面量 {} 或者 new 操作符。如下：var obj = {}; var obj2 = new Object(); 对象内容的键值对中，值可以是各种类型的数据，如：var obj = { key1: 's

2015-05-08 15:16:42 668

原创 CSS雪碧图的一个小案列

以前只是听说过雪碧图没用过，然后来了这里做的第一个活儿就涉及到他。因为怕不会用，就用他们原来切的，那个调的费事啊，算那个background-position困难的啊。原因是他们的雪碧图切放在了一起，没有留有空隙，所以，只能用一个废标签去专门放一个图标。现在发现雪碧图还是很有用的，把所有要用的图片放在一起，然后根据定位来调出要用的图片很方便。随便写了个小demo：http://codepen.i

2015-05-03 21:32:55 2629

原创用css3或者jquery实现切换按钮效果

switch demo地址：http://codepen.io/tianzi77/pen/VLLBmQ整理思路：这个 DEMO 的功能大致就是模拟开关效果，用于增强原生的 checkbox。视觉效果大致是一个白色的方块左右移动，这里我们最直接的可以想到这种实现：左边一个蓝色方块，中间一个白色方块，右边一个灰色方块，三者宽度调整宽度和位置来完成动画这么来看，我们需要控制的元素有3个，并且我们仔细观察

2015-05-02 12:42:57 2609

Tz。