当前的文章分类为: 前端开发

新浪微博、腾讯微博、QQ空间、人人网、豆瓣 一键分享API

24

October

2013

新浪微博:
http://service.weibo.com/share/share.php?url=

count=表示是否显示当前页面被分享数量(1显示)(可选,允许为空)
&url=将页面地址转成短域名,并显示在内容文字后面。(可选,允许为空)
&appkey=用于发布微博的来源显示,为空则分享的内容来源会显示来自互联网。(可选,允许为空)
&title=分享时所示的文字内容,为空则自动抓取分享页面的title值(可选,允许为空)
&pic=自定义图片地址,作为微博配图(可选,允许为空)
&ralateUid=转发时会@相关的微博账号(可选,允许为空)
&language=语言设置(zh_cn|zh_tw)(可选)
[ 查看全文... ]

Emmet LiveStyle 介绍和使用方法

08

September

2013

想必听到Emmet(原名:Zen coding)都不太会陌生,它是个能够帮助开发人员高效和快速编写HTML和CSS的插件。

而这次的Emmet LiveStyle,则是个提供“样式实时预览”插件,最大好处就是方便了我们对页面的调试。

不过Emmet LiveStyle目前处于公测阶段,暂时只支持Chrome和Safari浏览器与Sublime Text 2/3的双向修改。并且在官网中提到,它并免费使用,而是有偿使的,即正式版出来后会收费(但相信这个问题难不倒"天朝"...你懂的...)

Emmet LiveStyle的特点:
1. 即时更新(不会重新加载页面,样式修改以后无需保存也能预览);;
2. 多个页面同时预览(例:同时打开多个页面,并且关联到相同的CSS,此时修改该CSS,这些页面都能即时显示修改内容);
3. 双向修改(在Chrome开发者工具和Sublime Text中,只要有一处修改,两个工具的样式都会更改。)
4. 便捷的安装和使用。 [ 查看全文... ]

Hello CSS! 和图片说Bye Bye

25

July

2013

在一次聊天中讨论到如何利用CSS来制作一个按钮,不但能自适应宽高,并且还要在不实用图片的情况下,让按钮有类似“外描边”、“内描边”和圆角的效果,并且兼容IE6、IE7。所以今天特地花了点时间来做这个。

当完成以后,发现单纯的按钮有点单调,就想加点ICON来美化一下。可既然按钮都是用CSS来完成,那ICON还用图片来显示,是否有些背道而驰,所以仍然利用CSS属性来给按钮增添我们所需的图标。此时在保证“低配用户”能正常显示的情况下,也加入一些CSS3属性,起到渐进增强的目的,让“高级用户”能够得到更好的呈现效果。

这样做的好处在于按钮和图标颜色都能通过CSS来调整,维护起来比较方便。还有就是CSS的渲染速度比较快,同时还减少了HTTP请求量。

不过,并不是说用CSS必定比图片好,关键还是要根据实际环境和需求,合理使用才是关键。

本例兼容:IE6-10、Chrome、Safari、Opera。 [ 查看全文... ]

jQuery Slider Gallery(滑动相册 带拖动按钮)

12

July

2013

以前做过个项目,需求是做一个图片集(图片相册),其中有个小功能是底部带拖动按钮,拖动按钮相册列表一起滚动。当初单独做个拖动按钮没什么问题,问题不知道怎么让上面的内容随着这滚动条一起等比例的滚动,后来这块是由我同事帮忙写的。所以空下来便研究一下,把思路理清自己写个试试,结果比想象中的要简单很多。

当前版本:v1.2
兼容:IE6+、Firefox、Chrome、Safair [ 查看全文... ]

图片、文字水平垂直居中(兼容各浏览器)

02

July

2013

图片水平垂直居中、文字(多行文字)水平垂直居中,这是个老生常谈的问题,也经常有人提及这个问题,至此写个案例作为备忘。

主要用到的CSS属性就是display:table-cell[指定对象作为表格单元格。类同于html的td标签]。应用与已知外层容器宽高,但内部图片大小和文字数量未知的情况。

注:使用display:table-cell的时候,当前元素不支持margin和position属性,这个问题往往容易被人忽略。 [ 查看全文... ]

Ublue jQuery Image Scroll(无缝滚动)

27

June

2013

一直懒得写这个效果,但有需求就必须有供应。最近正好有项目需要这东西,所以就把之前写的插件拿来改了下,作为一个单独的插件,等以后有时间再把2个插件合并起来吧。

功能和描述(v1.0):
1.图片无缝左右滚动
2.经过图片显示/隐藏标题(可选)
3.自动循环滚动(可选)
3.鼠标经过停止滚动
4.单个页面可以重复使用
5.兼容IE6+、Chrome、Firefox、Safari、Opera [ 查看全文... ]