saber酱的抱枕

Fly me to the moon

09/12
08:00
学习

使用elevateZoom插件制作图片放大镜效果


之前我用过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>

查看demo

首先引入jq和elevateZoom的js文件,然后给图片设置data-zoom-image属性,指示大图url。最后绑定一下事件就行了。如果要用在多个图片上的话,一个个绑定就行了。是不是很简单呢?

关于elevateZoom的参数,可以参考这里

网上关于elevateZoom的信息比较少,官网在此,注意,你也许需要翻墙。再注意,官网上给出的代码都是驴唇不对马嘴的,请你自己查看源代码,找到真正使用的代码——而不是直接在页面上显示出来的代码。
Read More →

使用elevateZoom插件制作图片放大镜效果

08/22
15:21
学习

jq中获取checkbox的checked值

$("#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
10:38
学习

解决火狐不支持jq动画的backgroundPosition属性的方法

现在排版的网站中有一个地方,指示器的位置需要变化,我用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
15:55
学习

input获得和失去焦点时文字改变的jq代码

 input jq jQuery js value 焦点 表单

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,需要的话再加吧

input获得和失去焦点时文字改变的jq代码