摘要：
1.css font的简写规则 当我们写字体样式的时候，我们也许会这样子写 font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-variant: small-caps; font-family: verdana,serif 其实，这样写是完全多余的，我可以只用font 来写就OK了。 比如： font: 1em/1.5em bold italic small-caps verdana,serif 2.把几个class属性写在一... 阅读全文
摘要：
1、效果及功能说明鼠标滑过悬停特效，div css制作产品列表图片布局通过鼠标滑过产品图片背景高亮闪烁显示，产品标题滑动显示或隐藏2、实现原理首先定义好一个重复实现效果的方法，然后定义光带出现速度和从什么位置出现，在定义当鼠标触及到图片后标题出什么位置出现到什么为位置停止，中间要花多少时间，最后在定义当鼠标离开图片后标题缩回去到那里和用的时间主要的方法$(this).find(".shine").css("background-position","-160px 0");//定义重复的动画效果$(this).find(".s 阅读全文
摘要：
jQuery里提供了许多创建交互式网站的方法，在开发Web项目时，开发人员应该好好利用jQuery代码，它们不仅能给网站带来各种动画、特效，还会提高网站的用户体验。本文收集了10段非常实用的jQuery代码片段，你可以直接复制黏贴到代码里，但请开发者注意了，要理解代码再使用哦。下面就让我们一起来享受jQuery代码的魅力之处吧。1.预加载图片(function($) { var cache = []; // Arguments are image paths relative to the current page. $.preLoadImages = funct... 阅读全文
摘要：
1、效果及功能说明 表格特效制作jquery表格可编辑任意修改里面的数值，是一种比较人性化的用户设计体验方式 2、实现原理 通过点击事件来触发跳出一个输入框可以在里面输入当这个输入框失去焦点后就把，所有值放到当前的input里面。 主要的方法 if(!$(this).is('.input')) //当点击了input后 $(this).addClass('input').html('').find('input').focus().blur(function() //点击以后跳出一个input类，在里面输入值，当失去焦点后把值都发 阅读全文
摘要：
最近Web应用程序中越来越多地用到了JQuery等Web前端技术。这些技术框架有效地改善了用户的操作体验，同时也提高了开发人员构造丰富客户 端UI的效率。JQuery本身提供了丰富的操作，但是，有时候我们需要根据我们自己的业务和系统特色（风格）构造一些我们常用的前端UI组件，而 JQuery的插件给了我们一个较好的方式来构造这些UI组件，方便我们日后反复重用这些组件。网上也有很多关于JQuery插件的文章，我也搜了一些，但是，这些文档太过离散，没有有效地组织并充分说明JQuey插件该如何编写，并且有哪几种形式，什么情况下使用哪种形式。下面，我将说明JQuery插件常用的写法，以及这些插件的常用 阅读全文
摘要：
IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javas cript表达式计算的结果。在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。 给元素固有属性赋值 例如，你可以依照浏览器的大小来安置一个元素的位置。以下是引用片段：#myDiv { position: absolute; width: 100px;... 阅读全文
摘要：
1、效果及功能说明 animate动画分页按钮制作鼠标悬停分页按钮上滑动展开分页按钮，鼠标离开后分页按钮收缩 2、实现原理 主要是靠动画方法，来让原本的箭头图像的长度发生变长，正好可以融入下标题的文字大小，当鼠标离开以后就会让箭头图像触发另一个动画效果让让标题消失和长度变回原来的大小。 主要的方法$(this).animate({width:90},400,function(){ //定义当前动画让长度通过动画变成90长度在0.4秒完成 $(this).children(".title").css("display","block") 阅读全文
摘要：
在程序语言中定义的各种各样的数据类型中，我们都会为其定义一个"空值"或"假值"，比如对象类型的空值null，.NET Framework中数据库字段的空值DBNull，boolean类型的假值false等等。在JavaScript中也有很多种的"空值"和"假值"，那么它们都有什么共同点和不同点呢？ 其实标题里面我已经列出了JavaScript中所有的"空值"和"假值"，除了boolean值本身就是true和false这两种情况外，其它数据类型的"空值"主要 阅读全文
摘要：
最简单的一种情形就是把一个小的、固定宽度的div元素和其他元素内容一起放在一个大的div中，比如下面： A Column Main Content Lorem ipsum 我们可以为#inner设定一个宽度值20%，但是由于div是块级元素，即使设定了宽度，其后面的内容也只能在下一行中显示，除非给它设定一个浮动属性那么此时会产生上面提到的问题了。 如果#inner的宽度和高度都比#outer小，这不会有问题。 但是，如果#inner的高度超过了#outer，那么的底部就会超出#outer的底部。这是因为为#inne... 阅读全文
摘要：
一个web前端工程师，应该知道jquery的.live()函数，知道它是做什么用的，但是不知它是怎么样工作的，使用起来也是不得得心应手的，甚至也没听说过.die()(去掉bind事件)。即使你能熟悉这些，但是你能意识到.die()的问题所在吗？ 什么是.live()?函数的.live()类似.bind()，除此之外，它允许你绑定事件DOM元素，现在和动态生成出来的dom节点，你可以绑定事件不存在的元素。比方说当用户在点击链接时及想提示他们正在离开站点。$(document).ready( function() { $(‘a’).click( function() { ... 阅读全文
摘要：
分页按钮思想： 1、少于9页，全部显示 2、大于9页，1、2页显示，中间页码当前页为中心，前后各留两个页码 先看效果图： 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager JS代码：var kkpager = { //divID pagerid : 'div_pager', //当前页码 pno : 1, //总页码 total : 1, //总数据条数 totalRecords : 0, //是否显示总页数 isShowTota... 阅读全文
摘要：
五：文字溢出bug(注释bug)1、在以下情况下将会引起文字溢出bug一个容器包含2两个具有“float”样式的子容器。第二个容器的宽度大于父容器的宽度，或者父容器宽度减去第二个容器宽度的值小于3在第二个容器前存在注释（这也是为什么此bug也叫做“IE6注释bug”的原因）。2、引起bug时的效果图这是正常效果 IE6下却多了一个“怪”字，真是怪3、修复该bug的解决方案改变结构，不出现【一个容器包含2两个具有“float”样式的子容器】的结构。——此解决方案的评论：疯了！因噎废食的做法。减小第二个容器的宽度，使父容器宽度减去第二个容器宽度的值大于3，例如将本文示例中第二个子容器的宽度改为19 阅读全文
摘要：
最近在一个私活做手机项目时候，需要实现一个类似ios 6中短信那样的气泡效果。这里分享下实现心得，希望能给大家一点启发。首先分析下iphone的气泡效果有一下特点1. 四面圆角2. 界面上向下的外阴影3. 上边和下边的内阴影4. 上边内的一个内嵌的玻璃气泡的反光效果因为文字的长度、高度，内容多少都未知，所以如果用图片，会涉及到了多张拼贴，而且效果不好，所以就选择了CSS3。首先定义一个容器，盒模型为display: inline-block，方便自适应文字大小.bubble {position: relative;display: inline-block;min-width: 30px;ma 阅读全文
摘要：
jQuery插件的开发包括两种：一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。1、类级别的插件开发类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：1.1 添加一个新的全局函数添加一个全局函数，我们只需如下定义：jQuery.foo = f 阅读全文
摘要：
什么是跨域1、document.domain+iframe的设置2、动态创建script3、利用iframe和location.hash4、window.name实现的跨域数据传输5、使用HTML5 postMessage6、利用flash本文来自网络（http://f2e.me/200904/cross-scripting/，该网址已不能访问），仅作个人读书笔记之用，并稍作修改和补充。什么是跨域JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下：首先什么是跨域， 阅读全文