蹩脚的俄罗斯方块
好久没有写文章了，之前在忙准备实习的事，实习的时候也忙，就没上博客。面向对象没学好，这jquery写的俄罗斯方块，也只写了80%，不想写了，demo，思路是像电视机显像管一样，图象在什么位置，哪些DIV就变色。
总结下遇到的问题。
1、判断图象是否超出容器内部。
2、图象自动下落与按键使其下落的问题。
3、图象变形的瞬间与其他图象碰撞的问题。
4、消条的时候，我选择的是从集合底部遍历（jQuery.each），依次消色并下落图象。
* You are viewing the archive for the ‘jquery’ Category
jquery each从尾部遍历
jquery each默认是从头部遍历jquery对象的，如果在回调函数里面，把$(this)的某个属性赋值到它之后的jquery对象里，那就会出现不期待的结果，所以最好each能从尾部遍历，但是jquery没有提供这个功能。
只能在设置个数组（arr）变量保存遍历结果，然后arr.reverse()颠倒元素顺序，最后再一次each遍历arr即可。
var arr = [];
$("div").each(function(i){
arr.push($(this))});
arr.reverse();
$.each(arr,function(i,n){
$(this).next().css("background-color",$(this).css("background-color"));
});
jquery在ie8上的bug
之前网上找的图片播放器，用的库是jquery.min.js(1.3.2),在个IE6，7，8和火狐浏览器下都没
问题，但是把库改成jquery-1.3.1.js，IE8上面浏览却出问题:数字导航点不跟随图片切换而切换。
猜猜是
$(this).css({“background”:”#fff”,”color”:”#000″}).siblings()
.css({“background”:”#000″,”color”:”#fff”});
这句的问题，没有深入研究。
用了最新的jquery-1.4.2.js，运行偶尔还是会出问题。
PS：jquery.js和jquery.min.js在功能上没有任何区别. 只是min是mini版.
删除了原本中所有的注释和换行等.是js文件小了很多. 压缩了一下而已
jquery图像传送带
还是《jquery基础教程》里的，从CSDN上下载的源码，有2个问题
1、图片连续向右移动时不能很好的显示箭头指示图，本地测试没问题，放到服务器上（网速较慢），就出现问题了。
特别是IE678，对hover事件响应反应比火狐慢，导致箭头指示图显示缓慢.
2、点击放大图片时，先显示前一张图片，再变成被点击的图片，影响用户体验.
对这两个问题进行了改进，并改变图片隐藏的方式（有大到小）.demo地址
jq,ajax,php自动完成（股票搜索）
之前做的股票价格实时更新，由于没有搜索股票便自动完成功能，显得不够方便，于是补上这个功能。
demo地址
mysql数据库中建立相关的表，分为4个字段：id（主键），code（股票代码），name（股票名称），pinyin（股票英文缩写）
php文件以json返回，如下
Continue Reading
jquery拼图，draggable插件
发现draggale定了axis ，移动太快还是会漂，不知道是不是我代码问题.
对js还是不够熟，虽然看得多，写起来就是感觉不一样。编的过程中，错误很多，思路上可能也有问题。
draggale后面用不好，就能用animate方法了。
demo
———————————-
<!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”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>jquery拼图</title>
<script language=”javascript” src=”jquery.ui/jquery-1.2.4a.js”></script>
<script language=”javascript” src=”jquery.ui/ui.base.min.js”></script>
<script language=”javascript” src=”jquery.ui/ui.draggable.min.js”></script>
<script language=”javascript”>
var x //取得白方块div的left值
var y
var sleft = new Array(); //1到8，每个div的移动前的left值
var sstop = new Array(); //1到8，每个div的移动前的top值
$(function(){
start();
function start(){
for(var i=1;i<9;i++){
x=$(“#f9″).position().left;
y=$(“#f9″).position().top;
sleft[i] = $(“div”).eq(i).position().left
var posx = sleft[i]-x; //取得第i个div与白方块#f9的left差值 ，有正负
var absposx = Math.abs(posx); //取得第i个div与白方块#f9的left差值的绝对值
sstop[i] = $(“div”).eq(i).position().top
var posy = sstop[i] -y;
var absposy = Math.abs(posy);
if(absposx==200 && absposy == 0){ //判断该移动的轴，x或y轴，并调用stop函数
$(“div”).eq(i).draggable(“enable”);
$(“div”).eq(i).draggable({axis:”x”,containment:”parent”,opacity:0.6,cursor:”move”,snap: true});
$(“div”).eq(i).bind(‘dragstop’, function(event, ui) { //绑定draggable的stop函数
var index=$(“div”).index(this);
var eleft = $(this).position().left; //取出该div的最终left值，赋值给eleft
$(this).animate({left:x,opacity:”0.6″},function(){
x=sleft[index]; //x的值已经改变
$(this).css(“opacity”,”1″);
$(“#f9″).css(“left”,x);
$(“div”).draggable(“disable”);
$(“div”).unbind(‘dragstop’); //取消监听事件，重要★★★
start();
});
});
}
else if(absposx==0 && absposy==200){ //y坐标移动
$(“div”).eq(i).draggable(“enable”);
$(“div”).eq(i).draggable({axis:”y”,containment:”parent”,opacity:0.6,cursor:”move”,snap: true });
$(“div”).eq(i).bind(‘dragstop’, function(event, ui){
var index=$(“div”).index(this); //i不能作为参数传入该函数，所以定义个index表示序号
var etop = $(this).position().top; //移动后的top值
$(this).animate({top:y,opacity:”0.6″},function(){
y=sstop[index]
$(this).css(“opacity”,”1″);
$(“#f9″).css(“top”,y);
$(“div”).draggable(“disable”);
$(“div”).unbind(‘dragstop’);
start();
});
});
}
}
}
});
</script>
<style>
h1{ … Continue Reading
