一个专注于技术的IT男
CSS分割背景图片的技巧
因为我也不是CSS高手，所以本文的目的是写清楚如何弄明白CSS中分割图片的技巧，说到分割其实并不是真正意义上的剪裁图片，只是已经流行多年了的一种CSS best practise，用一个拼接起来的大的图片资源替代加载多个小图片的一种方法，优点是节约页面的加载速度，不会出现有的图片能显示有的还在加载的情况，这个效果或者性能用firebug可以测试出来。
当然用这个技巧也要选对地方用才行，要是经常需要改动的图像用这个技术还是有点折腾的。
核心的属性是这个：background-position 参数值从w3schools找出来的
Property Values
| Value | Description |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right |
If you only specify one keyword, the second value will be “center”. Default value is: 0% 0% |
| x% y% | The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. |
| xpos ypos | The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions |
| inherit | Specifies that the setting of the background-position property should be inherited from the parent element |
这里有篇不错的文章描述的是下面这个例子，将原图竖着的1234显示成横着的4个盒子
CSS: Using Percentages in Background-Image
.box1
.box2
.box3
.box4
下面这个例子也是常用到的：
鼠标移到按钮上，用稍微亮一点点的图片显示的悬停效果。
用到的green.png原图：
按钮的代码:
<a class="green" href="#">Green<span> </span></a>
按钮的CSS:
a {
/* The section titles */
display:block;
font-size:21px;
height:34px;
overflow:hidden;
padding:10px 20px 0;
position:relative;
width:200px;
}
a {
text-decoration: none;
}
a:hover{
/* Removing the inherited underline from the titles */
text-decoration:none;
}
a span{
/* This span acts as the right part of the section's background */
height:44px;
position:absolute;
right:0;
top:0;
width:4px;
display:block;
}
a.green{background:url(img/green.png) repeat-x top left; color:#436800;}
a.green span{ background:url(img/green.png) repeat-x top right;}
/* The hover effects */
a:hover{ background-position:bottom left;}
最重要的一行，鼠标移上去的时候设置图像的位置为bottom left，而下半部分的图像比上半部分亮一点。
效果如下:
最后一个按钮样式和第一个其实是一样的，只不过最后是从sprite.png加载过来的，我使用了CSS 图片拼合生成器将四张图拼接起来了，然后再用CSS去定位。
拼接完成之后的图：
| 打印文章 | 这篇文章由Jacky于2010/01/24 00:10发表在CSS, WebDev。你可以订阅RSS 2.0 也可以发表评论或引用到你的网站。 |
没有评论
link的地址以斜线开头完全没有道理啊
大约2周前 - 没有评论
在内部搭一个类stackoverflow的系统，选了个基于django的开源的osqa，部署的时候陆陆续续发现源码里有点小问题，比如用户相关的很多link是这样写的: <a href="/users/{{ user.id }}/{{ user.username|slugify }}/">{% gravatar user 32 %}</a> 这么搞的话link就指向了服务器的documentRoot，但是我不会把osqa这个应用直接挂在根域名下，这样的hard code我觉得挺愚蠢的。 其实同样的问题也存在我们的jsp里面，这个编程习惯不好，要改正其实也不难，手工做的话可以取得app的rootPath就行了，或者用url标签来帮我们自动搞定。（django&jsp都有的） 另一个Note：osqa第一次装的时候会把配置信息写到forum_keyvalue表里面，后面修改上传路径等的配置没有用，必须到数据库修改。 mysql> update forum_keyvalue set value="S’/upfiles/logo.png’ "> p0 "> ." where id=26; mysql> update forum_keyvalue set value="S’/var/lib/osqa/forum/upfiles’ "> p0 "> ." where id=33; Query OK, 1 row affected (0.00 sec) Rows matched: 1 Changed: 1 Warnings: 0 mysql> select * from 更多 >
jQuery Tips : 给AJAX回调函数传递额外参数
大约3月前 - 没有评论
讨论这个问题基于如下场景：点击页面上某个按钮之后，触发click事件，事件处理函数内部发送一个AJAX请求，AJAX回调函数更新页面的某一个部分 具体到这个例子，我们希望button1和button2点击之后，用AJAX的方式取example.html的内容，然后动态更新页面的id=callbackdemo3的div HTML如下： <div id="callbackdemo1"> <button id="button1">ajax load1</button><br/> </div> <div id="callbackdemo2"> <button id="button2">ajax load2</button><br/> </div> <div id="callbackdemo3" class="log"></div> <button onclick="$(‘.log’).html(”);">clear</button> 第一种做法： 适用于最简单的情况，也是比较直观的做法，就是在ajax回调函数中，使用jQuery的id选择器$(“#callbackdemo3″)得到id为callbackdemo3的div后更新其HTML内容 $("#callbackdemo1>#button1").click( function load(){ $.get("example.html",{ ‘param[]‘: ["var1", "var2"] }, function f1(data, textStatus, XMLHttpRequest) { $("#callbackdemo3").html(data); } ); } ); 第二种做法： 定义好一个接受额外参数的回调函数，然后在默认回调函数的内容调用这个预先定义好的回调函数 这样就能达到传递额外参数的目的了，较之第一种方法，此方法能比较方便的利用各个回调函数的上下文。 function callback_with_extraParam(data,param) { param.html(data); } $("#callbackdemo2>#button2").click( function load(){ var extraParam = 更多 >
Cool demo with jQuery plugin FancyBox
大约3月前 - 没有评论
$(document).ready(function() { $(“#login”).fancybox({ ‘padding’ : 0, ‘autoScale’ : false, ‘transitionIn’ : ‘none’, ‘transitionOut’ : ‘none’ }); $(“#flash”).fancybox({ ‘padding’ : 0, ‘autoScale’ : false, ‘transitionIn’ : ‘none’, ‘transitionOut’ : ‘none’ }); }); 猛击我查看效果 A Flash Demo 代码如下： <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://www.haojii.com/webdev/fancyboxdemo/fancybox/jquery.mousewheel-3.0.2.pack.js"></script> <script type="text/javascript" src="http://www.haojii.com/webdev/fancyboxdemo/fancybox/jquery.fancybox-1.3.1.js"></script> <link rel="stylesheet" type="text/css" href="http://www.haojii.com/webdev/fancyboxdemo/fancybox/jquery.fancybox-1.3.1.css" media="screen" /> <script type="text/javascript"> $(document).ready(function() { 更多 >
你应该使用的20个有用的jQuery方法
大约4月前 - 没有评论
原文地址：20 Helpful jQuery Methods you Should be Using 原文作者：Andrew Burgess 这篇文章介绍了jQuery中有用的20个方法，1-20编号如下，本文没有对照原文逐句翻译，这个20个方法名称，我其实就是用下面第14个map()的方式取出来的，亮点如下，firebug真是个离不开的好工具。 说到工具，那就顺便再提一下一个简洁的jQuery代码调试工具：jQueryPad 支持代码高亮，不支持代码辅助，小问题是这个工具带的jQuery.js的版本旧了，需要自己更新一份到它的目录。 （当然，我还是最喜欢firebug，特别是网页复杂的时候） 1 after() / before() 这个无需多说了，上面的图就是个例子，就是在当前对象的前面或者后面插入内容，被插入的内容是当然对象的兄弟节点 2 change() 和click()或者hover()一样，它也是个事件处理器，这个change事件作用于 textarea, text input, select, 当目标元素的值改变的时候触发该事件。它不同于对象失去焦点时触发的事件foucusOut()和blur()。 change()事件对于客户端验证的任务最适合不过了，因为你不需要在输入字段值没有变化的时候重新验证字段。 $(document).ready( function() { $(‘input[type=text]‘).change(function () { switch (this.id) { /* some validation code here */ case "name": alert(this.value+"…."); break; default: alert(this.id); break; } }); }); // HTML 更多 >
为iPhone优化网页的技巧
大约7月前 - 没有评论
为iPhone优化网页的技巧,为了使得网页看上去更像native的程序，我们需要对网页进行一些优化
本文包含一些小的技巧：
1. 如何隐藏iPhone Safari的地址栏
2. 如何设置网页的桌面快捷方式图标
3. 如何为网页设置iPhone的样式
4. 如何在网页中检测屏幕的方向
5. 如何在网页中检测当前的位置
炫酷CSS超链接按钮一
大约7月前 - 没有评论
上一篇文章提到用CSS分割图片的技巧，例子中也展示了一个很漂亮的CSS按钮，今天在tutorialzine看到这篇教程 Sweet AJAX Tabs With jQuery 1.4 & CSS3的按钮也很漂亮，把demo代码下载下来之后，看了一下也是用CSS定位分割图片的技巧做出来的，和上一篇文章中按钮实现略有不同，下面就来解析怎么做出如下的效果: Tab one Tab two Tab three Tab four 首先按钮的HTML代码, <a class="green" href="#">Tab two <span class="left"></span><span class="right"></span></a> 这个按钮的图片由左中右三部分构成，两边的图片是做好了边框效果的，中间的图片可以无限扩展。即下图显示的效果（注：图像来源于tutorialzine原教程） 源图像是这样的，其实还分成了亮度有区别的上下两部分，使用上文中已经介绍过的CSS技巧达到鼠标移上去高亮的效果。 ->->-> 让我们来看看实现一个按钮核心的CSS代码: a.blue{background:url(img/blue_mid.png) repeat-x top center; color:#03426e;} a.blue span.left{ background:url(img/blue_left.png) no-repeat left top;} a.blue span.right{ background:url(img/blue_right.png) no-repeat right top;} 然后是定义按钮size、边框、边距等的CSS代码: a,a:visited{ /* Styling 更多 >
jQuery1.4发布: 你必须知道的15个新特性
大约7月前 - 没有评论
原文地址：jQuery 1.4 Released: The 15 New Features you Must Know 原文作者：James Padolsey 译文地址：jQuery1.4发布: 你必须知道的15个新特性 译文作者：Ji Hao 1. 传递属性给jQuery(…)构造器 早在1.4版本之前，jQuery就支持通过有用的”attr“方法为元素集合添加属性，参数可以传递属性的名-值对或者是一个指定了多个属性的对象。jQuery1.4则支持元素创建的时候传递一个属性对象作为jQuery构造器的第二个参数。 举例来说，如果你要用jQuery1.4创建一个有多个属性的超链接对象，用如下简单的代码即可实现： jQuery(‘<a/>’, { id: ‘foo’, href: ‘http://google.com’, title: ‘Become a Googler’, rel: ‘external’, text: ‘Go to Google!’ }); 你可能已经注意到了”text”属性——可能你正怀疑它在这里出现是干啥的，毕竟超链接这玩意没有”text”属性！好吧，jQuery1.4其实统一了它自身的一些方法接受某些属性的行为。上面指定的”text”属性将会引起jQuery调用”.text()”方法，传递”Go to Google!”作为它的参数。 一个现实中更好点的例子： jQuery(‘<div/>’, { id: ‘foo’, css: { fontWeight: 700, color: 更多 >
Working with Events, Part 3: More Event Delegation with jQuery
大约7月前 - 3个评论
// 原文地址：http://www.learningjquery.com/2009/09/working-with-events-part-3-more-event-delegation-with-jquery 原文作者: Louis-Rémi Babé 正如本系列的第一篇文章中描述的那样，事件代理是利用事件冒泡机制来避免多次绑定事件监听器的一种办法。jQuery1.3和即将到来的jQuery1.4有很多新的特性可以使你的网页中使用事件代理更容易。这篇指南的目标就是帮助你理解这些新特性是如何工作的。 从传统的事件监听到事件代理 既然一个DOM元素上发生的事件会被传递到它所有的祖先元素（或者说是DOM节点）上，那么一个事件监听器就能被绑定在众多DOM元素的单一的那个祖先节点上，而不用为所有的DOM元素每个都单独绑定事件监听器。 看下面的列表先，再考虑下面的问题： <ul class="myList"> <li class="red">The first item.</li> <li class="green">The second item.</li> <li class="yellow">The third item.</li> <li class="blue">The fourth item.</li> </ul> <p>Class of the last clicked item: <span id="display"> </span> </p> 如果我们想知道被点击的列表元素的class,使用传统事件监听器的jQuery代码应该是这样写的： $("li").click( function( event ) { $("#display").text(event.target.className); }); 传递给事件处理器的参数event对象有一个target属性，对应于被点击的元素。 使用事件代理的等价的代码是这样写的： $("ul").click( function( event ) { $("#display").text(event.target.className); }); 更多 >
Working with Events, part 2
大约7月前 - 没有评论
// 原文地址：http://www.learningjquery.com/2008/05/working-with-events-part-2 原文作者: Karl Swedberg 在我的上一篇文章中，描述了一个常见的问题，即事件对新加入HTML文档的元素表面上不工作的情况，不管这个元素是通过ajax方式还是修改DOM的方式加入进来的。我们也检查了一个解决此问题办法：事件代理。使用这种办法，我们将事件绑定到一直在DOM中的容器元素上然后再检查事件发生的目标元素。 Cloning Nodes 这一次，我们将一起看看解决此问题的另一个方法：重新绑定事件处理器。但是这么做之前，我应该要提一下，在jQuery1.2中事件处理器能够随着元素一起被克隆。看这个无序列表: <ul id="list3" class="eventlist"> <li>plain</li> <li class="special">special <button>I am special</button></li> <li>plain</li> </ul> 我们可以拷贝一个<li class=”special”>然后插入到被拷贝的元素后面，同时取得任何绑定在原来元素上的事件处理器。jQuery提供的这个.clone()方法不会为我们把这任务都干了，它只会做元素的拷贝 $(document).ready(function() { $(‘#list3 li.special button’).click(function() { var $parent = $(this).parent(); $parent.clone().insertAfter($parent); }); }); 试试看： plain specialI am special plain 正如你所看到的，原按钮能够继续创建新的列表元素，但是“动态生成”的列表元素内的按钮不能创建新的按钮。 为了使得事件处理器也能被拷贝到新的元素上，我们只需要传递true给clone方法： $(document).ready(function() { $(‘#list4 li.special button’).click(function() { var $parent 更多 >
为wordpress博客文章设置单独的CSS
大约8月前 - 没有评论
因为想要在文章中插入一些动态的内容来做一些前端的demo，自然用到了JavaScript和CSS，目前我用的wordpress2.9对插入JavaScript的功能已经支持得蛮好，即使使用富文本编辑器和HTML视图切换的时候JavaScript不会被过滤掉，但是用link标签还是会被过滤。 网上有个per post css的wordpress插件，利用的是自定义meta域的方法，在页面渲染的时候插入css的link,虽然我没搞过WP的插件开发，但是代码倒也挺容易看懂，基本上不用解释了。 下面这个插件，性能不好，如果文章和css比较多的，每次查看的时候都要做很多次无效的循环（比如单独查看每个页面的时候），所以我没有选择这个插件。我换了个思路解决不能插入link标签的问题。 <?php /* Plugin Name: Per-Post CSS Version: 1.1 Plugin URI: <a href="http://trevorcreech.com/geekery/wordpress/per-post-css/">http://trevorcreech.com/geekery/wordpress/per-post-css/</a> Description: This plugin allows you to specify a chunk of CSS, which will be included in the header only when viewing that post, or a page where that post appears. Put the custom CSS in a Custom Field 更多 >
