-
-
Web前端开发之路
收藏本专栏专注 web前端技术包括 Html/css/DIV+美工/jquery/AJax/JS/
分享到：
最近更新文章
用jquery都弱爆了 纯css 实现焦点图的 动态绚丽效果
先看大图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content=&q ...
圆形的hover效果 多种style可供选择见demo
当鼠标浮动时 会呈现圆形的富有生动的多重样式的动态效果
这种样式一般会在网页底端应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv ...
图片hover状态平滑划过过渡效果
附源码
//first preload all images
$hs_images = $hs_container.find('img');
var total_images = $hs_images.length;
var cnt = 0;
$hs_images.each(function(){
var $th ...
纯css 应用使得网站各个模块切换 平滑过渡
首先创建一个百分百的 layout 然后创建各个panel layout
然后应用按钮加上平滑过渡效果 这样会使得网页更加丰富生动
<div class="st-container">
<input type="radio" name="radio-set" checke ...
页面滑到底端弹出提示表单
<p id="last">
Some paragraph text
</p>
<div id="slidebox">
<a class="close"></a>
<p>More in Technology & ...
php版本 化妆程序 给图片添加饰物
大家估计都用手机玩过 化妆整人的程序
也就是对照片加工处理 添加饰物 然后生成一张图片 可以搞笑娱乐大家
本文主要采用的技术有
1.jquery的拖拽 drag& drop技术
2.PHP转换Json data
3.CSS3 +ＨＴＭＬ５
首先我们建立一个大体的框架
<div id="content">
...
完美的 登录注册框 含漂亮的过渡、转换效果
<div id="container_demo" >
<!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4 -->
<a cl ...
大气磅礴的网站效果 scroll+easing+animation+水平、竖直滚动
像酒店 酒吧 咖啡店连锁 小型餐厅 音乐网站等等 都可以采用我如下所讲的大气磅礴的网站效果 scroll+easing+animation+水平、竖直滚动。。。
主要运用的技术有jquery easing+jquery scroll
源码见页脚附件
主要核心知识简单介绍如下所述：
在网页内首先要建立几个section 来实现滚动 如下
<div class=&quo ...
LESS 一种流行的新式的动态样式语言
简介：
LESS 是动态的样式表语言，通过简洁明了的语法定义，使编写 CSS 的工作变得非常简单。
本质上，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性，更不是用来取代 CSS 的，而是在现有 CSS 语法的基础上，为 CSS 加入程序式 ...
PHP+AJAX实现 分页
分页功能在博客 日志 网站中等十分常见。往往我们会采用服务器技术来实现对内容的分页展示
对数据类的网站 我们还有专门的sql语句来编写。
但也有越来越多的网站采用ajax技术来实现，对于简单的文字展示类网站 这种方法可以算是比较优秀和用户体验很好的方式，当然任何东西都是一分为二的 弊端当然也随之存在 ，因为他会在某种程度上影响SEO
下面我就简单介绍一下php+ajax方式来实现分页功能 ...
jquery实现 购物车 信息 级联改变
<!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 ...
发现一款很酷的jquery 相片墙翻牌效果
可用于 企业网站中的 赞助商、 合作伙伴、 公司产品、 招聘计划等等模块
主要运用的技术有 php +CSS + Jquery插件 flip http://lab.smashup.it/flip/
实现步骤可以大致这样来讲
我们可以看到某个翻牌的div 的源码如下
<div title="Click to flip" class=" ...
用css或jquery方式 使div 水平、竖直均居中
.className{
width:270px;
height:150px;
position:absolute;
left:50%;
top:50%;
margin:-75px 0 0 -135px;
}
jquery方法
$(document).ready(function(){
$(window).r ...
国外经典JS、Jquery 各种资源集合
1,首推 Jquery 官网 http://jquery.com/
本网站融合了各种jquery所需要的基本 中级高级知识 和各种资源 插件
2,Bootstrap http://twitter.github.com/bootstrap/
Bootstrap不光为了看起来好看，而且在现代的桌面浏览器上有极佳的表现(包括IE7！)。
在平板电脑和智能手机上面还有 响应式CSS 可以 ...
鼠标悬浮 浮动放大 expand 效果
要求效果：
1.鼠标浮动在div上 要求div动态浮出 有膨胀效果
2.切换须柔和 且 无缝相隔
3.鼠标离开后恢复原状
4.实现图片缩放效果的完美展示
源码下载
:hover.zip
效果图：
主要代码展示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
我用过的强大的常用的 Web Debugging Tool
在Web service开发中常用的debugging工具 相信大家都用过不少
下面主要介绍一下 Charles和Fiddler
这两款工具都能更细致的帮你调试到你需要的 变量和 response data
并以各种文本或者xml json等易于观察的格式来呈现
易于我们跟第三方 service的team交流和便于我们开发 提高效率当然是必须的了。。。
Charles 下载地址
...
Selenium 一个用于Web应用程序测试的强大工具
Selenium测试直接运行在浏览器中，就像真正的用户在操作一样，这对项目经理,QA,tester 来说 无疑是一个宝贝。
更易于项目测试人员和开发人员的沟通和提高效率。
目前支持的浏览器包括IE、Mozilla Firefox、Mozilla
Suite等。
这个工具的主要功能包括：测试与浏览器的兼容性—测试你的应用程序看是否能够很好得工作在不同浏览器和操作系统之上。
...
个人觉得 SublimeText 目前最好用的 文本编辑器
1.技巧提示 总结
http://ihacklog.com/post/sublime-text-2-tips-and-tricks.html
2.常用快捷方式 提示
http://www.csser.com/board/4f59c2cb9c3694f227001cd7
3.常用案例解析
http://www.cnblogs.com/BiffoLee/archive/2011/11/26 ...
带提示的input输入框类似html5的 placeholder
Html5带来了 placeholder
<input id="t1" type="text" placeholder="请输入文字" />
轻松实现 简单不...但是扩展性比较差 而且ie等浏览器支持不是很完善 而且各主流浏览器支持效果不是很统一
所以还是jquery/js 比较实用...简单实现起来也不是很复杂 ...