/*详情页图片放大镜*/ (function ($) { $.fn.imagezoom = function (options) { var settings = { xzoom: 210, yzoom: 140, offset: 10, position: "btr", preload: 1 }; if (options) { $.extend(settings, options); } var noalt = ''; var self = this; $(this).bind("mouseenter", function (ev) { var imageleft = $(this).offset().left; //元素左边距 var imagetop = $(this).offset().top; //元素顶边距 var imagewidth = $(this).get(0).offsetwidth; //图片宽度 var imageheight = $(this).get(0).offsetheight; //图片高度 var boxleft = $(this).parent().offset().left; //父框左边距 var boxtop = $(this).parent().offset().top; //父框顶边距 var boxwidth = $(this).parent().width(); //父框宽度 var boxheight = $(this).parent().height(); //父框高度 noalt = $(this).attr("alt"); //图片标题 var bigimage = $(this).attr("rel"); //大图地址 $(this).attr("alt", ''); //清空图片alt if ($("div.zoomdiv").get().length == 0) { $(document.body).append("
"); //放大镜框及遮罩 } if (settings.position == "btr") { //如果超过了屏幕宽度 将放大镜放在右边 if (boxleft + boxwidth + settings.offset + settings.xzoom > screen.width) { leftpos = boxleft - settings.offset - settings.xzoom; } else { leftpos = boxleft + boxwidth + settings.offset; } } else { leftpos = imageleft - settings.xzoom - settings.offset; if (leftpos < 0) { leftpos = imageleft + imagewidth + settings.offset; } } $("div.zoomdiv").css({ top: boxtop, left: leftpos }); $("div.zoomdiv").width(settings.xzoom); $("div.zoomdiv").height(settings.yzoom); $("div.zoomdiv").show(); $(this).css('cursor', 'crosshair'); $(document.body).mousemove(function (e) { mouse = new mouseevent(e); if (mouse.x < imageleft || mouse.x > imageleft + imagewidth || mouse.y < imagetop || mouse.y > imagetop + imageheight) { mouseoutimage(); return; } var bigwidth = $(".bigimg").get(0).offsetwidth; var bigheight = $(".bigimg").get(0).offsetheight; var scaley = 'x'; var scalex = 'y'; //设置遮罩层尺寸 if (isnan(scalex) | isnan(scaley)) { var scalex = (bigwidth / imagewidth); var scaley = (bigheight / imageheight); $("div.zoommask").width((settings.xzoom) / scalex); $("div.zoommask").height((settings.yzoom) / scaley); $("div.zoommask").css('visibility', 'visible'); } xpos = mouse.x - $("div.zoommask").width() / 2; ypos = mouse.y - $("div.zoommask").height() / 2; xposs = mouse.x - $("div.zoommask").width() / 2 - imageleft; yposs = mouse.y - $("div.zoommask").height() / 2 - imagetop; xpos = (mouse.x - $("div.zoommask").width() / 2 < imageleft) ? imageleft : (mouse.x + $("div.zoommask").width() / 2 > imagewidth + imageleft) ? (imagewidth + imageleft - $("div.zoommask").width()) : xpos; ypos = (mouse.y - $("div.zoommask").height() / 2 < imagetop) ? imagetop : (mouse.y + $("div.zoommask").height() / 2 > imageheight + imagetop) ? (imageheight + imagetop - $("div.zoommask").height()) : ypos; $("div.zoommask").css({ top: ypos, left: xpos }); $("div.zoomdiv").get(0).scrollleft = xposs * scalex; $("div.zoomdiv").get(0).scrolltop = yposs * scaley; }); }); function mouseoutimage() { $(self).attr("alt", noalt); $(document.body).unbind("mousemove"); $("div.zoommask").remove(); $("div.zoomdiv").remove(); } //预加载 count = 0; if (settings.preload) { $('body').append(""); $(this).each(function () { var imagetopreload = $(this).attr("rel"); var content = jquery('div.jqpreload' + count + '').html(); jquery('div.jqpreload' + count + '').html(content + ''); }); } } })(jquery); function mouseevent(e) { this.x = e.pagex; this.y = e.pagey; } //以下代码实现小图左右的移动效果 ph$ = { bindevt : function() { var o = {}; o.btn_sell_l = $("#pageleft"); if (o.btn_sell_l.length > 0) { o.btn_sell_l.bind("click", function() { ph$.scrolllvesell('right'); }); } o.btn_sell_r = $("#pageright"); if (o.btn_sell_r.length > 0) { o.btn_sell_r.bind("click", function() { ph$.scrolllvesell('left'); }); } }, scrolllvesell : function(o) { if (this.cfg.lv_flag == 0) return false; var tar = $("#sell_order"); var tar2 = $("#sell_order_t"); tar.stop(); tar2.stop(); var max_num = $("#sell_order>li").length; var width = 128; //每次移动的大小,包含内边距和外边距 var left = 0; var pos = tar.position(); //alert(pos.left + "|" + width); if (o == "left") { if (math.abs(pos.left)+width > width*(max_num-3)) { return false; } left = pos.left - width; } else if (o == "right") { if (pos.left >= 0) { return false; } left = pos.left + width; } left = left + "px"; //alert(left); ph$.cfg.lv_flag = 0; tar.animate({ left: left }, 330); tar2.animate({ left: left }, 330, function() { ph$.cfg.lv_flag = 1; //alert(pos.left); }); }, cfg : { }, init : function() { this.bindevt(); } }; $(function($) { ph$.init(); //****点击小图展示大图和内容 begin*** //小于4时不显示左右的箭头 var num=$("#sell_order li").length if(num<4){ $("#pageleft").css("display","none") $("#pageright").css("display","none") } else{ $("#pageleft").css("display","block") $("#pageright").css("display","block") } var firstbig=$(".sell_order li:first img").attr("datasrc"); var firstsmall=$(".sell_order li:first img").attr("rel"); $(".big_pic img").attr("src",firstbig) $(".small_pic img").attr("src",firstsmall) $(".sell_order li:first").addclass("hover") $(".sell_order li").hover(function(){ var imgbig=$(this).find("img").attr("big"); var imgsmall=$(this).find("img").attr("mid") $(".bigpic img").attr("rel",imgbig) $(".bigpic img").attr("src",imgsmall) $(".sell_order li").removeclass("hover") $(this).addclass("hover") var bigpicurl=$(this).find("img").attr("big") $("#chakan").attr("href",bigpicurl) }); //****点击小图展示大图和内容 end*** }); $(function($) { var bigpicurl=$(".sell_order li[class='hover']").find("img").attr("big") $("#chakan").attr("href",bigpicurl) $(".jqzoom").imagezoom(); })