前端开发-武方博
订阅我+1搜索一下 你也不知道
分类目录
热门文章
- csdn密码下载 csdn密码下载地址 csdn论坛600万账号 - 13,442 views
- 人人网密码下载 猫扑网密码下载 - 11,401 views
- 天涯数据下载 天涯数据库密码下载 天涯数据.kz下载 - 9,196 views
- ie6,ie7,ie8 css bug兼容解决记录 - 9,002 views
- jQuery实例 - 7,676 views
- 关于我 - 6,665 views
- jQuery向上循环滚动（仿新浪微博未登录首页滚动微博显示） - 6,538 views
- jquery图片横向左右滚动效果（带按钮控制） - 6,438 views
- 2011年圣诞前 CSDN密码大泄漏 - 6,393 views
- JS实现仿新浪微博大厅和腾讯微博首页滚动效果 - 5,830 views
-
近期文章
标签
前端开发 前端开发工具 前端开发工程师 前端开发规范 手机浏览器 手机浏览器兼容 手机网站 手机网站制作 手机网站开发 手机网站开发制作 猫扑网密码下载 用户体验 用户体验UED 网页设计 网页设计师 网页设计规范 郑州前端开发 郑州网页设计 郑州美工 3g网 bug解决 CSDN密码下载 css css经验 css3 css bug div+css HTML html5 javascript jquery jquery 图片左右滚动 jquery图片轮播 jquery实例 jquery 左右滚动 jquery插件 jquery 无缝滚动 jquery滑动 jquery特效 jQuerySlider wap网站制作 wap网站开发 web前端开发 web规范 worepress友情链接
分类目录归档：css3 html5
html5实现全屏的api方法
【进入和退出全屏】 // Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); document.webkitCancelFullScreen(); // Firefox 10 element.mozRequestFullScreen(); document.mozCancelFullScreen(); // W3C 提议 element.requestFullscreen(); document.exitFullscreen(); 【事件监听】 // Webkit-base: element.onwebkitfullscreenchange // Firefox: element.onmozfullscreenchange // W3C Method: element.addEventListener(‘fullscreenchange’, function(e) { if (document.fullScreen) { // document.webkitIsFullScreen /* make it look good for fullscreen */ } else { /* return to the normal state in page */ } }, true); 【css伪类】 :fullscreen – 当前全屏化的元素 :fullscreen-ancestor – 所有全屏化元素的祖先元素 &nb......查看更多>>
发表在 css3 html5
标签为 html5, html全屏
6 条评论
10个基于CSS3和jQuery的loading加载动画设计方案
过去，由于加载图片的格式限制(只能使用GIF格式)，设计加载动画不是那么容易。随着技术和浏览器的发展，用 CSS3 和 jQuery 就可以方便地设计加载动画，这种方式的高度可定制化以及服务器的进步使得开发者的各种要求得到满足。下面介绍10个实用的方案。 1. Sonic——循环的加载动画 Sonic是一个很小的JS“类”，你可以用它来创建自定义加载动画——蛇吞尾似的循环动画。 2. 闪烁的加载动画 用 CSS3 动画可以实现闪烁跳跃式的正在载入页面效果。 3. 旋转的加载动画(无需图片) CSS transform(Firefox 3.5+和基于Webkit的浏览器中可用)有很多有趣的功能，如旋转、平移、缩放和倾斜等等都可以用来设计加载动画。 4. Ajax 风格的加载动画(无需图片) 图片是网站中非常重要的部分，如果使用gif图片作为加载动画，则需要在载入网站图片的同时先载入gif动画图片。如果使用 CSS，这种问题就迎刃而解了。因此推荐用 CSS3 来开发 Ajax 风格的加载动画。 5. 圆......查看更多>>
发表在 css3 html5
标签为 css3, CSS3 loading, jquery, loading图标
留下评论
jQuery+CSS3实现的超炫3D相册效果
在线演示 本地下载 今天我们分享一款使用jQuery和CSS3实现的3D环廊展示特效，这个3D特效使用CSS3的3D变化特性实现，简单而非常华丽，希望大家喜欢！ 使用3D变化，通过将它们放置于一个三维空间，我们可以让很简单元素变得更加有活力，同时使用CSS的过渡效果，这些元素可以很容易的移动到3D空间中，并且创建一个非常真实的效果。 主要的想法是创建一个轮播式的画廊，我们可以将一个图片放置在中间，旁边放置两个图片。因为我们使用不同的角度，所以看起来两张旁边的图片好像被设置在一个3D空间中，然后我们旋转它们。 注意：这里的效果需要你的浏览器支持3D变化效果 如何工作 <section id="dg-container"> <div> <a href="#"> <img src="images/1.jpg" alt="image01"> <div>http:// www.colazionedamichy.it/</div> </a> <a href="#"> ......查看更多>>
发表在 css3 html5
标签为 CSS3 3D相册, jQuery 3D相册
留下评论
HTML5 不可限量的发展前景
现在的HTML5就像当年崭露头角时的Ajax，有人在做，但不知道叫它什么。最近，苹果在HTML5上大做文章，而著名的Web设计师Eric Meyer则提出了Web Stacks的概念。Alex Kessinger是Yahoo的一名前端工程师，本文是他对HTML5应用现状与前景的思考。 开源模式带来转变 O’Reilly创始人，TimO’Reilly，一位开源的支持者，曾在《Open Source Paradigm Shift》中如是说： “IBM对个人电脑设计的商品化使利润从硬件转移到软件这一层面，而开源将带来新的财富” 价值在不同的层面转移，HTML5将成为新的层面，商品的价值在下降，现时的浏览器已经成为商品，但这并没有问题，只要它们都遵守标准。人们说，我们可以将操作系统置入浏览器中，但这行不通，如果我们可以从过去的经历中学到些什么，那就是，不能简单照抄过去的模式，好比广播到电视的变迁，你不能简单地在一个播音员面前放台摄像机完事，将操作系统置入浏览器未必比HTML5离线应用本身更有价值。 发布渠道的重要 ......查看更多>>
发表在 css3 html5
标签为 html5, HTML5前景
留下评论
HTML5语音输入（淘宝语音搜索）x-webkit-speech方法 支持webkit内核
谷歌的网站是时逛时新啊，今天在他们首页发现了HTML5的新玩法——语音搜索。可惜的是只有webkit核心的浏览器才能使用。用法很简单 只需要在input添加属性x-webkit-speech即可，例子如下： <input type="text" x-webkit-speech /> 这样你的输入框右边里就多了个「小话筒」，点击的时候就会提示 这时说出来识别后就可以了，我测试下来，中文英语的识别率还挺高的。 语音输入其他属性： lang 这玩意可以强制输入框里面的语音的语言种类，例如 <input type="text" x-webkit-speech lang="zh-CN"/> 语音事件 目前已知的只有onwebkitspeechchange，顾名思义，就是语音发生变化时触发的事件，一般可以作为提交 <input type="text" x-webkit-speech onwebkitspeechchange="$(this).cloest('form').submit()"/> 这样说完以后就自动搜索了 x-webkit-grammar 这个不是语音搜索用的属性，但是可以控制这个输入的语法，例如在......查看更多>>
发表在 css3 html5
标签为 HTML5语音输入, webkit, x-webkit-speech, 淘宝语音搜索, 语音搜索
留下评论
12款有助于简化CSS3开发的生成工具
网站开发者能通过CSS3为网站设计增添很多时尚元素，CSS3 对CSS规范做了很大的改进。现在，本文将为你介绍12款有助于简化CSS3开发的工具。 1、CSS3 Pie: 允许在IE上使用CSS3绝大部分的酷炫功能。 2、CSS3 Builder： 通过该工具，你可以用类似应用photoshop特效的界面来设计复杂的CSS3 box模型。非常节约时间。 3、CSS3 Drop shadow generatr： 通过滑块功能直观的设计阴影。只需复制已被自动创建的CSS代码并粘贴到CSS文件中便可。 4、Cascadr： 非CSS3特有但却非常实用。允许输入HTML代码并能够侦测该代码中所有的内联CSS，将之从HTML中移除并添加到一个单独的样式表中。 5、Border Radius.com： 当前最流行的CSS3属性之一。有助于快速创建圆角box模型并获取适当的CSS3代码。 6、Button Maker： 允许创建出色的按钮。使得CSS3 按钮设计变得非常简便——只需采集颜色，调整半径，获取代码，粘贴代码至CSS文件即可。 7、CSS3 Generator： ......查看更多>>
网页input智能语音识别输入功能
手机语音智能控制，电视语音智能，现在你的网页也能识别语音输入了，赶快围观吧，chrome浏览器的标签法 只要在你的输入框加入x-webkit-speech 参数即可让你的页面具有语音识别输入功能。 html代码： <input type=”text” name=”inputBox” id=”inputBox” x-webkit-speech /> 是不是很强大，以后浏览器将无所不能！ 查看更多>>
一些常用的CSS3动画效果[animate.css]
animate.css是一个老外做的各种CSS3动画的合集，比较全，也很炫，大家可以参考学习一下。 项目主页：http://daneden.me/animate/ 自定义下载样式：http://daneden.me/animate/build/ git地址：https://github.com/daneden/animate.css 查看更多>>
发表在 css3 html5
标签为 animate.css, Css3 Transition, css3动画, CSS3动画合集, css3动画效果
留下评论
css3 box-shadow投影发光效果
CSS3的box-shadow属性可以让我们轻松实现图层阴影效果。我们来实战详解一下这个属性。 1. box-shadow属性的浏览器兼容性 先来看一个这个属性的浏览器兼容性: Opera: 不知道是从哪个版本开始支持的，我在发这篇文章测试的时候，正好更新了Opera到最新的10.53版本，已经支持box-shadow属性。 firefox通过私有属性-moz-box-shadow支持。 Safari和Chrome通过私有属性-webkit-box-shadow支持。 所有IE不支持(不知道IE9是否有所改善)。别急，我们将在文章最后会介绍一些针对IE的Hack。 2. box-shadow属性的语法 box-shadow有六个可设值: img{box-shadow:阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色 } 当不设阴影类型时，默认为投影效果。当设为inset时，为内阴影效果。 X轴和Y轴位移不等同但类似于photoshop里面的”角度”和”位置。 阴影大小、扩展、颜色和Photoshop里面的都同理。 3. 实例解析 让我们通过几个实例来看一个b......查看更多>>
发表在 css3 html5, 前端开发
标签为 -moz-box-shadow, box shadow, box-shadow发光效果, box-shadow属性, box-shadow的发光效果, css, css3, css3 box-shadow, css3 box-shadow发光效果, CSS3 box-shadow投影效果, css3 box-shadow效果, css3 shadow, CSS3 text-shadow, css3 发光效果, css3 效果, css3属性, CSS3属性box-shadow, css3投影, CSS3投影效果, css3教程, css3阴影, css3阴影效果, css发光效果, div+css, html5, ie-css3.htc, IE也支持box-shadow, Transition, webkit, webkit box shadow, 前端开发, 郑州前端开发
留下评论
css3 box-shadow发光效果
如果用过twitter，你可能已经留意到当输入框获得焦点后，它的边框会有蓝色发光的效果，并且这里运用了transition属性，使得发光效果有很平滑的过渡。本教程将讲述如何运用box-shadow属性来做到这样的效果。 CSS代码如下： input { transition: all 0.30s ease-in-out; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; outline:none; } 这里通过运用transition属性来展现input框的变化。 同时，这里需要用outline属性来使safari和chrome的默认高亮无效。 这里在使用box-shadow属性时，为了使其不像是阴影效果而达到发光的效果，因而采用了明亮的蓝色。 同时也可以用RGBA，这样就可以控制颜色的透明度了。 代码如下： input:focus { border:#35a5e5 1px solid; box-shadow: 0 0 5px rgba(81, 203, 238, 1); -webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1); -moz-box-shadow: 0 0 5px rgba(8......查看更多>>
发表在 css3 html5, 前端开发
标签为 -moz-box-shadow, box shadow, box-shadow发光效果, box-shadow的发光效果, css, css3, css3 box-shadow, css3 box-shadow发光效果, CSS3 box-shadow投影效果, css3 box-shadow效果, css3 shadow, CSS3 text-shadow, css3 发光效果, css3 效果, css3属性, CSS3属性box-shadow, css3投影, CSS3投影效果, css3教程, css3阴影, css3阴影效果, css发光效果, div+css, html5, Transition, webkit, webkit box shadow, 前端开发, 郑州前端开发
留下评论
HTML5 Canvas 绘制股市走势图
做金融类网站的时候，出现的最多的是价格走势图，但由于金融市场变化非常快，人工做图的话很不靠谱，机器生成的话开发难度比较大。所以小型金融网站通常会引用大网站的数据，例如 Google 财经频道的走势图。 可是 Google 采用的是 flash 来展示价格走势，如果我们的网站要针对 iPad 等移动终端进行开发的话，只能使用 HTML5 canvas 标签绘图。今天在网上看到一个 Prototype 插件，可以在 canvas 里绘制非常精致的股市走势图。 由于是前端 js 绘图，因此具有非常好的数据交互性，而且在进行移动终端优化时也比较方便。 官方网站 http://www.humblesoftware.com/finance/index 查看更多>>