09/12
2015
之前我用过jqzoom这个插件做图片放大镜效果，今天看萌の里这个网站，发现它的图片放大镜挺好的，于是看了下源代码，看到它使用的是一个名为elevateZoom的插件。然后我也去百度了下用用，感觉良好。用这个比用jqzoom更快捷更有效率。如果你使用jqzoom，你需要引入它的css文件，还要注意它用来做鼠标指针的那张图片的路径是否正确。而elevateZoom只需要你引用它自身的js文件就够了。
做了一个demo，代码如下：
<script src="https://apps.bdimg.com/libs/jquery/1.9.0/jquery.js"></script>
<script src="/f/jquery.elevateZoom-3.0.8.min.js"></script>
<img id="zoom_img" src="/f/saber美图125_s.jpg" alt="" data-zoom-image="/f/saber%E7%BE%8E%E5%9B%BE125.jpg">
<script>
$(function () {
$('#zoom_img').elevateZoom({
scrollZoom: true,//允许滚动控制
easing: true//允许动画效果
zoomWindowWidth:550,//放大镜窗口宽度
zoomWindowHeight:400//放大镜窗口高度
});
});
</script>
首先引入jq和elevateZoom的js文件，然后给图片设置data-zoom-image属性，指示大图url。最后绑定一下事件就行了。如果要用在多个图片上的话，一个个绑定就行了。是不是很简单呢？
关于elevateZoom的参数，可以参考这里。
网上关于elevateZoom的信息比较少，官网在此，注意，你也许需要翻墙。再注意，官网上给出的代码都是驴唇不对马嘴的，请你自己查看源代码，找到真正使用的代码——而不是直接在页面上显示出来的代码。
Read More →
使用elevateZoom插件制作图片放大镜效果
08/22
2015
$("#box").change(function () {
//此时获取的已经是change后的值了
if($(this).prop("checked")){//如果全选按钮已经被选中
$(".sub").prop("checked",this.checked);
}else{//如果全选按钮未被选中
$(".sub").prop("checked",false);
}
});
#box是全选按钮（它也是个复选框），.sub是底下各个条目的复选框。用的是jq的.prop()方法。
刚才同学做全选功能，出了问题，来问我。我拿到代码试了试，点击全选按钮，然后获取并判断它的checked值，结果没反应。
然后去调试，发现发现获取到的复选框（checkbox）的checked值始终是undefined，选中了也不变。这还怎么做？
难道要把复选框放到form标签里才行？或者是需要手动加上checked这个属性？都试了试，完全没用
想想两年前还在学校的时候，就做过全选和反选这样的功能，怎么现在就做不出来了呢？这个郁闷啊
于是去百度“jq怎么获取checked值”，百度出来的各个教程的方法和我一样啊，怎么人家能用我就不能用？
最后直接百度“checkbox checked undefined”，总算找到答案了。
原来，在jquery1.6版本有了变更：
checked属性在页面初始化的时候已经初始化好了，不会随着状态的改变而改变。
也就是说如果checkbox在页面加载完毕时是选中的，那么返回的永远都是checked，如果一开始没被选中，则返回的永远是undefined。
然后怎么办呢， 用jq的.prop()方法。例子就是上边的代码了。
真想说过期信息害死人，以后搜索技术问题的时候最好去搜索选项里，把结果限制在最近一年之内。
jq中获取checkbox的checked值
08/20
2015
现在排版的网站中有一个地方，指示器的位置需要变化，我用jQuery做了动画，把这个指示器设置为背景图，然后使用backgroundPosition属性来使其移动。
可是今天测试兼容性的时候发现在火狐下这个动画无效。百度一番，找到了解决办法。参见此处
解决这个问题之前（火狐中无效）的动画代码如下：
$("#anlilist").animate({
backgroundPositionX:bgLeft+"px",
backgroundPositionY:"0px"
},100);
这时候X和Y值要分别定义，否则chrome中是无效的。
要解决火狐中无效的问题，先在动画的代码之前加入以下代码：
/**
* 自定义backgroundPosition的animate，支持火狐，jQuery1.8以上版本
* @author Meleong
* v1.00
*/
(function($) {
$.fx.step["backgroundPosition"] = function(fx) {
if (typeof fx.end == 'string') {
fx.start = getBgPos(fx.elem);
//fx.end原本是一个string，这里将它转换成数组，就不会再进入这个if，也方便我们下面的计算
//例 "0px -21px"
fx.end = [parseFloat(fx.end.split(" ")[0]), parseFloat(fx.end.split(" ")[1])];
}
//这里fx.pos是根据传入的时间参数，从0到1变化的浮点数
var nowPosX = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit;
var nowPosY = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit;
fx.elem.style.backgroundPosition = nowPosX + ' ' + nowPosY;
/**
* 获取backgroundPosition数组[top, left]，没有单位
*/
function getBgPos(elem) {
var top = 0.0;
var left = 0.0;
if ($(elem).css("backgroundPosition")) {
//例 "0px -21px"
top = parseFloat($(elem).css("backgroundPosition").split(" ")[0]);
left = parseFloat($(elem).css("backgroundPosition").split(" ")[1]);
}else{
top = parseFloat($(elem).css("backgroundPositionX"));
left = parseFloat($(elem).css("backgroundPositionY"));
}
return [top, left];
}
}
})(jQuery);
然后改一下动画的代码，把X和Y的值写在一起就行了。
$("#anlilist").animate({
backgroundPosition: bgLeft.toString()+"px 0px"
},100);
这样写一起chrome里也是能用的，分开写chrome里反而无效了。此时，IE、chrome、firefox三大浏览器里都可以正常实现动画效果了。
Read More →
解决火狐不支持jq动画的backgroundPosition属性的方法
08/18
2014
input失去焦点和获得焦点jquery焦点事件插件，鼠标在搜索框中点击的时候里面的预设文字就消失了，在别的地方点击的话预设文字又出现了。
input需要设置id，然后在头部先引入jq，之后添加下面的js代码
//设置表单的预设value切换
jQuery.focusblur = function(focusid) {
var focusblurid = $(focusid);
var defval = focusblurid.val();//针对input
var deftext = focusblurid.html();//针对textarea
focusblurid.focus(function(){
var thisval = $(this).val();
if(thisval==defval){
$(this).val("");
$(this).html("");
$(this).css("color","#333");
}
});
focusblurid.blur(function(){
var thisval = $(this).val();
if(thisval==""){
$(this).val(defval);
$(this).html(deftext);
$(this).css("color","#aaa");
}
});
};
//注册 一个一个写
$.focusblur("#yy_name");
$.focusblur("#yy_tel");
两段color设置是我后来加的，第一个是点击之后，如果文字改变得和预设文字不同了，则把文字颜色加深，第二个则是失去焦点时如果没有任何文字了，则把文字重设为预设文字，颜色重设为指定的颜色。这样就ok了~
修改版：
jQuery.focusblur = function(element,defcolor,truecolor) {
var focusblurid = element;
var defval = focusblurid.val();//针对input
focusblurid.focus(function(){
var thisval = $(this).val();
if(thisval==defval){
$(this).val("");
$(this).css("color",truecolor);
}
});
focusblurid.blur(function(){
var thisval = $(this).val();
if(thisval==""){
$(this).val(defval);
$(this).css("color",defcolor);
}
});
};
$.focusblur($(".jbdh").eq(0),"#b7b7b7","#444");
这个里面没有加html，需要的话再加吧
