12 2014 档案

jQuery-瀑布流 布局 （处理页面滚动和AJAX加载延迟问题）
摘要：瀑布流：这种布局适合于小数据块，每个数据块内容相近且没有侧重。通常，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。一、功能分析： 1.判断图片是否进入可视区域； 2.用AJAX请求服务器数据； 3.将数据播入到相应的列队；二、实现方法： 给window的scroll事件... 阅读全文
posted @ 2014-12-23 15:26 axl234 阅读(876) 评论(0) 推荐(0)
html5 audio音频播放全解析
摘要：html5开启了一个新时代，因为它让浏览器本身变得不那么被动，audio api就是一个典型的列子，在html5还没确定之前，如果想要在网页上听音乐看视频唯一的办法就是用flash意思是当你没有给浏览器装载Flash插件的话 那么音乐视频即是空谈，html5 audio的出现改变了这一格局，因为你可... 阅读全文
posted @ 2014-12-22 14:23 axl234 阅读(491) 评论(0) 推荐(0)
大型网站架构不得不考虑的10个问题
摘要：这里的大型网站架构只包括高互动性高交互性的数据型大型网站，基于大家众所周知的原因，我们就不谈新闻类和一些依靠HTML静态化就可以实现的架构了，我们以高负载高数据交换高数据流动性的网站为例我们这里不讨论是PHP还是JSP或者.NET环境，我们从架构的方面去看问题，实现语言方面并不是问题，语言的优势在于... 阅读全文
posted @ 2014-12-19 15:25 axl234 阅读(148) 评论(0) 推荐(0)
详解CSS网页布局中默认字体样式
摘要：浏览器默认的样式往往在不同的浏览器、不同的语言版本甚至不同的系统版本都有不同的设置，这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致，于是就有了类似YUI的reset之类用来尽量重写浏览器的默认设置保证各个浏览器样式一致性的做法。拿字体来说，各个浏览器默认的字体种类、字体大小和字体行... 阅读全文
posted @ 2014-12-19 11:37 axl234 阅读(446) 评论(0) 推荐(0)
图片裁剪：CropZoom插件
摘要：上传个人头像的功能：用户在上传自己的照片后，由于照片尺寸不符合网站的要求，要求用户对照片进行裁剪，最终根据用户裁剪的尺寸生成头像。用户可以对上传的图片进行自由缩放、裁剪，使之符合彩信图片的大小。CropZoom特性CropZoom是由Gaston Robledo写的一个功能非常强大的jquery图片... 阅读全文
posted @ 2014-12-19 11:35 axl234 阅读(658) 评论(0) 推荐(0)
jQuery实现拖动布局并将排序结果保存到数据库
摘要：很多网站的拖动布局的例子都是采用浏览器的COOKIE来记录用户拖动模块的位置，也就是说拖动后各模块的排序位置信息是记录在客户端的cookie里的。当用户清空客户端的cookie或浏览器的cookie过期后，再次访问页面时，发现布局又还原成最初的状态。这种cookie记录的方式使用简单，但不适合像个人... 阅读全文
posted @ 2014-12-19 11:25 axl234 阅读(837) 评论(0) 推荐(0)
WEB前端开发规范文档
摘要：基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的 解析速度.文件规范1. html, css, js, images文件均归档至约定的目录中;2. html文件命名: 英文命名, 后缀.htm.... 阅读全文
posted @ 2014-12-19 11:14 axl234 阅读(141) 评论(0) 推荐(0)
构建一个用于产品介绍的WEB应用
摘要：为了让用户更好地了解您的产品功能，您在发布新产品或者升级产品功能的时候，不妨使用一个产品介绍的向导，引导用户熟悉产品功能和流程。本文将给您介绍一款优秀的用于产品介绍的WEB应用。就像微博或邮箱这类WEB产品升级一样，使用Guiders.js构建的应用，用户将会看到一些列的弹出层，这些弹出层可以定位到... 阅读全文
posted @ 2014-12-17 11:11 axl234 阅读(230) 评论(0) 推荐(0)
图片延迟加载技术-Lazyload的应用
摘要：我们在浏览图片量非常大的页面时，像淘宝商城商品展示、必应图片搜索这类网站，图片的加载非常流畅，其中就应用了图片延迟加载技术。本文讲解Lazyload图片加载插件，当我们打开页面时，首先在屏幕可视区域加载完图片，随着向下滚动页面，图片会陆续加载，从而提升了页面打开速度。Lazyload是一款基于jQu... 阅读全文
posted @ 2014-12-17 10:55 axl234 阅读(272) 评论(0) 推荐(0)
你想不到的压缩方法：将javascript文件压缩成PNG图像存储
摘要：这样可以做到很高的压缩比，到底有多高，下面会提到。这种方法用到了 canvas 控件，这也意味着只有支持 canvas 控件的浏览器下才有效。现在你可以看到，上面的图像类似一个噪声图像，但它实际上是一个由124K的 prototype 框架代码转化成的30K的8位PNG图像（压缩比还不错吧）。其实，... 阅读全文
posted @ 2014-12-17 10:52 axl234 阅读(1049) 评论(1) 推荐(0)
如何更快速加载你的JS页面
摘要：确保代码尽量简洁不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具，只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。尽量减少DOM访问使用JavaScript访问DOM元素很容易，... 阅读全文
posted @ 2014-12-17 10:51 axl234 阅读(475) 评论(0) 推荐(0)
PHP+jQuery实现翻板抽奖
摘要：翻板抽奖的实现流程：前端页面提供6个方块，用数字1-6依次表示6个不同的方块，当抽奖者点击6个方块中的某一块时，方块翻转到背面，显示抽奖中奖信息。看似简单的一个操作过程，却包含着WEB技术的很多知识面，所以本文的读者应该熟练掌握jQuery和PHP相关知识。HTML抽奖者自己决定选取其中的某一个方块... 阅读全文
posted @ 2014-12-16 15:34 axl234 阅读(223) 评论(0) 推荐(0)
固定菜单页面滚动效果
摘要：在一个单页面设置一个主菜单，当页面滚动时主菜单位置固定在页面窗口中不动，或左或右，或上或下。当单击菜单项时，页面滚动到菜单对应的内容区，当页面滚动到预定内容位置时，对应的菜单项变为当前选中样式。此效果可以应用在一些内容比较长的单页设计，本文将介绍使用JjQuery和css来实现这一效果，demo中分... 阅读全文
posted @ 2014-12-16 15:24 axl234 阅读(732) 评论(0) 推荐(0)
响应式内容滑动插件bxSlider
摘要：bxSlider特性1.充分响应各种设备，适应各种屏幕；2.支持多种滑动模式，水平、垂直以及淡入淡出效果；3.支持图片、视频以及任意html内容；4.支持触摸滑动；5.支持Firefox，Chrome，Safari，iOS，Android，IE7+如何使用bxSlider1、首先是加载jQuery库... 阅读全文
posted @ 2014-12-16 15:18 axl234 阅读(444) 评论(0) 推荐(0)
jQuery+PHP实现的砸金蛋中奖程序
摘要：准备我们需要准备道具（素材），即相关图片，包括金蛋图片、蛋砸碎后的图片、砸碎后的碎花图片、以及锤子图片。HTML我们页面上要展现的是一个砸金蛋的台子，台上放了编号为1，2，3的三个金蛋，以及一把锤子。我们构建以下html代码：锤子123上述代码中，.hammer放置锤子，.resultTip用于砸蛋... 阅读全文
posted @ 2014-12-16 15:17 axl234 阅读(510) 评论(0) 推荐(0)
PHP和JAVASCRIPT判断访客终端是电脑还是手机
摘要：当用户使用手机等移动终端访问网站时，我们可以通过程序检测用户终端类型，如果是手机用户，则引导用户访问适配手机屏幕的移动站点。本文将介绍分别使用PHP和JAVASCRIPT代码判断用户终端类型。PHP版我们使用PHP的$_SERVER['HTTP_USER_AGENT']来获取手机用户浏览器的用户代理... 阅读全文
posted @ 2014-12-16 15:14 axl234 阅读(220) 评论(0) 推荐(0)
掷色子猜大小游戏
摘要：本文结合实例为大家讲解如何实现一个掷色子猜大小的游戏功能。上期我们给大家介绍了jQuery掷色子动画，本期在上期的基础上，涉及到HTML，CSS，jQuery以及PHP相关知识，文章重点关注后台PHP程序会根据用户选择的大小计算概率，控制最终掷出的点数，本例中用户猜中几率为20%。HTML本例中用到... 阅读全文
posted @ 2014-12-16 15:05 axl234 阅读(1284) 评论(0) 推荐(0)
幸运大转盘-jQuery+PHP实现的抽奖程序
摘要：目前好多网站上应用的转盘抽奖程序大多是基于flash的，而本文结合实例将使用jQuery和PHP来实现转盘抽奖程序，为了便于理解，作者分两部分来讲解，本文讲解第一部分，侧重使用jQuery实现转盘的转动效果。第二部分侧重使用PHP后台代码控制抽奖几率并最终实现转盘抽奖，将在下一篇文章中有讲解。准备工... 阅读全文
posted @ 2014-12-16 14:57 axl234 阅读(666) 评论(0) 推荐(0)
使用HTML5实现刮刮卡效果
摘要：我们利用HTML5的画布Canvas，结合其提供的API，在Canvas元素上绘制一个灰色蒙层，然后通过检测用户鼠标移到和手势来绘制一个透明的图形，这样就能看到Canvas背景下的真实图片，就达到刮刮卡效果。HTML我们只需要在页面中加入canvas标签元素，其他的就看javascript的了。注意... 阅读全文
posted @ 2014-12-16 14:55 axl234 阅读(364) 评论(0) 推荐(0)
让手机站点像原生应用的四大途径
摘要：在移动设备上构建设计良好的网站慢慢变得越来越容易。不论使用什么方法(响应式设计、自适应等),如果你了解你所做的,创建一个美观的网站不是问题。但你的用户可能仍然要求网站有原生app的体验。完成这样的体验是一个挑战。大多数时候,当人们谈论“app”或“原生”的感觉,他们讲的的不是一个网站的视觉体验。他们... 阅读全文
posted @ 2014-12-16 14:19 axl234 阅读(183) 评论(0) 推荐(0)
跨浏览器兼容的HTML5视频音频播放器
摘要：HTML5的video和audio标签是用来在网页中加入视频和音频的标签，在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。使用html5media.... 阅读全文
posted @ 2014-12-16 11:38 axl234 阅读(368) 评论(0) 推荐(0)
Sass介绍及入门教程
摘要：Sass是什么？Sass是"Syntactically Awesome StyleSheets"的简称。那么他是什么？其实没有必要太过于纠结，只要知道他是“CSS预处理器”中的一种即可，简单点说，Sass就是“CSS预处理器”，你可以称其是工具或者是语言。如果你实在想知道他是什么？可以看Sass官网... 阅读全文
posted @ 2014-12-11 15:50 axl234 阅读(689) 评论(0) 推荐(0)
iSlider手机平台JS滑动组件
摘要：iSlider手机平台JS滑动组件，无任何插件依赖。它能够处理任何元素，例如图片或者DOM元素。它有如下特性：能够自定义动画，自带的动画包括default, rotate, flip 和 depth你能够简易地添加回调函数(onslidestart, onslide, onslideend, ons... 阅读全文
posted @ 2014-12-10 19:14 axl234 阅读(818) 评论(0) 推荐(0)
css3前端工具
摘要：随着CSS3的出现，CSS3讨论的话题越来越多了，现在各种教程也是多如牛毛，不比一年前的时候，找个资料要捞遍整个互联网，而且还很难找到自己需要的参考资料。从侧面也说明，CSS3对于前端工程师来说，越来越重要了，从各处的招聘信息也能看出这一点。说这么说我想强调的是他的重要性。另一方面，有很多CSS3的... 阅读全文
posted @ 2014-12-05 11:46 axl234 阅读(344) 评论(0) 推荐(0)
移动端页面制作3
摘要：12：popuppopup分为两种：一种是内容比较多，直接以全屏显示， 一种是少量内容的popup提示popup page第一种形式，设计结构如下： ... 因为这种形式内容可能会比较长，有可能会有滚动效果，所以头部（含有关闭按钮）采用固定，动画设计使用translate... 阅读全文
posted @ 2014-12-04 11:10 axl234 阅读(248) 评论(0) 推荐(0)
移动端页面制作2
摘要：5：等分，居中等页面布局等分在说等分之前，先抛出一个问题，如下面的emmet代码，footer部分的导航有些页面是三个，有些页面是四个，我们要求的是不论是三个还是四个甚至于5个，都平分宽度。footer.footer>ul.nav-links>li*3footer.footer>ul.nav-lin... 阅读全文
posted @ 2014-12-03 11:28 axl234 阅读(539) 评论(0) 推荐(0)
移动端页面制作
摘要：1：pc端响应式开发火狐浏览器打开菜单栏，点击开发者，选择我们的响应式设计 ctrl+shiift+M谷歌浏览器点击“show console”图标，打开模拟面板，使用"User Agent"，选择所要模拟的机子，点击emulate按钮模拟，刷新浏览器。如要调整横竖屏，切换到"screen"2：新建... 阅读全文
posted @ 2014-12-03 10:55 axl234 阅读(427) 评论(0) 推荐(0)
UC浏览器开发者版调试手机页面
摘要：1 关于RI目前，在手机上使用浏览器访问网页，无法便捷地进行网页语言调试。手机屏幕相对较小且操作不便，直接在手机上进行网页数据调试不太现实。因此，我们使用技术将手机网页调试信息分离，实现一种能在大屏幕、高配置PC上来调试小屏幕、低配置的手机浏览器访问的网页的开发工具——RemoteInspector... 阅读全文
posted @ 2014-12-03 10:26 axl234 阅读(12826) 评论(0) 推荐(0)
CSS3的REM设置字体大小
摘要：在详细介绍rem之前，我们先一起来回顾一下我们常用的两种记量单位，也是备受争论的两个：PX为单位EM为单位PX为单位在Web页面初期制作中，我们都是使用“px”来设置我们的文本，因为他比较稳定和精确。但是这种方法存在一个问题，当用户在浏览器中浏览我们制作的Web页面时，他改变了浏览器的字体大小，这时... 阅读全文
posted @ 2014-12-02 15:31 axl234 阅读(2266) 评论(0) 推荐(0)