2012-10-30

谈谈双层图片JavaScript滑动效果实现

需求

近来做公司项目有一个需求为图片滑动，与普通的图片滑动有点不同，这些图片需要排成上下两排，而以往的图片滑动仅需要一排。这个需求看起来貌似很简单，但其实有点不好实现。

我先来画一个图，以往的图片滑动效果：

full

HTML代码：

<div style="width:500px;overflow:hidden;height:100px;">
  <div style="width:800%;">
    <img src="1.jpg" style="float:left" />
    <img src="1.jpg" style="float:left" />
    <img src="1.jpg" style="float:left" />
    <img src="1.jpg" style="float:left" />
    <img src="1.jpg" style="float:left" />
    <img src="1.jpg" style="float:left" />
  </div>
</div>

...

READ ALL

2012-10-29
jQuery移动与复制DOM节点
在做一个项目时，需要DOM节点移动，如以下代码：
```
<div></div>
<p></p>
```
需要把p标签移动到div标签里，经过测试发现，在jQuery中移动DOM节点非常方便：
```
$('div').append($('p'))
```
这样即可把p标签移动到div标签里，千万不要写成这样
```
$('div').append( $('p').html())
```
这样只是把p标签里的内容复制到div标签里
如果只是复制一份到div标签里，原来的标签还保留着，那么可以这么写：
...
READ ALL
2012-10-28
Win7 64位安装Python PIL库
今天上传图片，一直提示
The _imaging C module is not installed
PIL模块我之前早就安装过了，为什么提示__imaging模块没有安装呢？到Python下能找到__imaging.pyd文件，说明已经安装过了。重装一次PIL库结果还是一样！
为了验证我随便写一个Python程序，
```
import __imaging
```
运行提示
PIL ImportError: DLL load failed: %1 不是有效的 Win32 应用程序
闹了半天，原来是我系统是Win7 64位的，而安装的PIL库是32位的，结果才导致64位的加载不了32位的程序。到官网去找找也没有发现64位exe程序。经过一番搜索，找到了一个64位的PIL库，可以解决Win7 64位的问题，直接下载安装就好。
...
READ ALL
2012-10-26
郁闷的Smarty变量调节器
Smarty的变量调节器是个不错的东西，一直以来都用着顺手，可昨天使用变量调节器时发现不管用。
```
{$name | upper}
```
仔细看了手册，看了Smarty加载路径，上上下下检查了将近一个小时也没有发现问题所在。即将要陷入无奈的困境时，把代码删除了重新写成
```
{$name|upper}
```
结果好了。原来是变量后要直接跟着竖线，函数名，中间不能有空格，否则变量调节器的功能将失效。闹了半天，原来就是一个空格引起的，太不值当了！！！
看来以后调Smarty程序，得注意空格问题～，说不定其它问题也可能是空格引起的，而空格引起的问题最不容易发现。
...
READ ALL
2012-10-24
PHP连接MySQL主机127.0.0.1与localhost的区别
发现问题
昨天在帮同事编译安装Linux环境时，遇到一个问题：Web Server是Apache，数据库是MySQL。
于是写了一个测试连接数据库的PHP页面：
```
$mysql = mysql_connect('localhost','root','');
```
打开http://localhost/test.php测试
提示：
Can’t connect to local MySQL server through socket...
检查环境正常
以为是数据库没有启动，于是查看一下进程，MySQL在进程里，重启了一下MySQL.
...
READ ALL

2012-10-23

IE浏览器A标签下包含img诡异BUG

看来我真的是跟IE啃上了，这会不只是IE6，就连IE7、IE8都发现有问题。先来阐述下事情缘由：项目里有一个页面其中一排图片是被A标签包含着的，正常情况下点击图片会链接到目标地址，可测试发现在IE下无法正常链接到目标地址。

于是我自己写了一个Demo：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>IE下诡异BUG</title>
    <style type="text/css">
      span {display:block;width:100px;height:100px;}
    </style>
  </head>
  <body>
    <a href="https://www.qttc.net" target="_blank">
      <span><img src="5.jpg" width="100" /></span>
    </a>  
  </body>
</html>

...

READ ALL

2012-10-19
IE6除a标签外其它标签伪类解决！
做前端样式都知道IE6伪类的问题，虽然这个问题到现在也不具有时效性，并且使用IE6的人也渐渐减少，但解决IE6伪类的方法还是值得借鉴。
IE6似乎只对A标签伪类有效，但如今的页面架构以不同以往的简单。div、p、span、li等标签的伪类样式更是经常使用。目前解决IE6伪类的方法只能通过JavaScript去实现，比如hover伪类就相对于JavaScript的移入移出事件。
自己写JavaScript
比如要给DIV一个hover伪类，触发时背景颜色改变为红色。
```
div { width:300px; height:300px; background:blue;}
div:hover { background:red; }
```
...
READ ALL
2012-10-17
IE6不能加载样式，原来是编码导致！
我向来是鄙视IE浏览器的，它总是不合群，特别是IE6。痛苦的是虽然微软已经开始IE6倒计时，国外使用IE6者几乎绝灭，而国内IE6用户依然众多。公司不肯放弃这些特殊用户，只得累生死调IE6兼容。
今天这个IE6出现的错误比较独特，页面打开后跟其它页面效果差别非常大，等于说是IE6下完全没有样式的HTML页面。首先得确定问题方向，因为样式文件是外链的，所以我在样式文件里给body来个背景颜色，结果发现除IE6以外其它浏览器背景都能正常变色。于是我在html页面直接加上body样式，这下IE6才生效。
html页面加写样式对于IE6有效，CSS文件写样式对于IE6无效只能说明IE6下无法加载样式文件。
...
READ ALL
2012-10-12
按代码量算钱，伤不起啊！
早闻不少公司按代码量计费，如今我怀疑公司也这么干了。
我不知道按代码量算钱在财务部那里是怎么算的？不过百分九十九几乎都是把代码放到一个工具里计算行数或者字数来确定你的工作量，然后按字母/按行算钱。难怪有些人被逼无奈把一行代码完成的事拆成N行来写，注释也更多了一些，空白也更多了一些，代码越臃肿工钱越多。
每个人都有自己的代码风格，包括我。我历来追求精简，提高代码运行效率，因此我的代码拿到了财务部那里经过工具一算就是少得可怜的工钱。想想有点亏，我应该尽量把代码写的多一些。甚至可以这样
```
function(){
  $a=1;
  $b=$a;
  $c=$b
  ...
  return $c;
}
```
...
READ ALL
2012-10-12
文件名编码后浏览器访问提示找不到文件解决方法
昨天做一个项目，其中有一个需求是每一张图片对应一小段文字对图片的说明，普通的做法是新建一个表然后把图片名与说明文字都记录到数据库内。仔细考虑后感觉这个应用不要数据库也能完成，我实现的方案是把说明文字url encode后当做文件名，这样当我读取文件的时候再把文件名url decode就可以后驱图片的文字说明了。
可是通过浏览器访问图片时却提示找不到文件，如有一张图片的说明文字为琼台博客，url encode后生成的文件名如下
%E7%90%BC%E5%8F%B0%E5%8D%9A%E5%AE%A2.jpg
于是我通过浏览器访问图片，提示找不到
...
READ ALL

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

需求

发现问题

检查环境正常

自己写JavaScript