放大镜左边的白色透明框怎么调整大小?
2016-07-07 16:02 来源:www.chinab4c.com 作者:ecshop专家
我放大镜左边的白色半透明框很大,而且还是长方形的。不知道这个在什么地方调整?找遍了论坛都没找到怎么修改。希望知道的朋友不吝指点一下。谢谢了!
|
回答:
我搜索了一些资料。左边白色半透明背景框是按比例来的。图片越大框越小。可我看到很多模板的是固定框大小的。不知道高手们怎么改的。求解中。希望知道的达人不吝赐教。 |
不修改好看着的心里就是感觉难受。期待达人的出现啊。。。。。。 |
顶!!!!!!!我搜索了一些资料。左边白色半透明背景框是按比例来的。图片越大框越小。可我看到很多模板的是固定框大小的。不知道高手们怎么改的。求解中。希望知道的达人不吝赐教。 |
明确的告诉你是固定的,是按照比例来的,这个很容易想到,如果zoom出来的大图很大,那么放大handle区域也会相应缩写,不然一个很大的原图,你的handle还是那么大放大就没有必要了,附上zoom的代码
PS:你说的那个handle一样大是因为人家的zoom大图都是经过处理的,都是一样大
- (function(a){a.fn.zoom=function(b){var c={xzoom:300,yzoom:300,offset:10,offsetTop:0,lens:1};if(b){a.extend(c,b)}var d=a(this);a(this).hover(function(){var f=a(this).offset().left;var e=a(this).offset().top;var m=a(this).children(".picbox").children("img").offset().left;var h=a(this).children(".picbox").children("img").offset().top;var k=a(this).width();var i=a(this).height();var l=a(this).children(".picbox").children("img").get(0).offsetWidth;var j=a(this).children(".picbox").children("img").get(0).offsetHeight;var g=a(this).children(".picbox").attr("href");if((l<k)&&(j<i)){}else{if(a("div.zoomdiv").get().length==0){a(this).after("<div class='zoomdiv'><img class='bigimg' src='"+g+"'/></div>");a(this).append("<div class='handle'> </div>")}}a("div.zoomdiv").css({top:c.offsetTop,left:k+c.offset});a("div.zoomdiv").width(c.xzoom);a("div.zoomdiv").height(c.yzoom);a("div.zoomdiv").show();a(document.body).mousemove(function(q){mouse=new MouseEvent(q);var r=a(".bigimg").get(0).offsetWidth;var p=a(".bigimg").get(0).offsetHeight;var n="x";var o="y";if(isNaN(o)|isNaN(n)){var o=(r/l);var n=(p/j);a("div.handle").width((c.xzoom)/o);a("div.handle").height((c.yzoom)/n);if(c.lens){if(o>1||n>1){a("div.handle").css("visibility","visible")}}}xpos=mouse.x-a("div.handle").width()/2-m;ypos=mouse.y-a("div.handle").height()/2-h;if(c.lens){xpos=(mouse.x-a("div.handle").width()/2<m)?0+(m-f-1):((mouse.x+a("div.handle").width()/2>l+m)?(l-a("div.handle").width()+(m-f-3)):xpos+(m-f-3));ypos=(mouse.y-a("div.handle").height()/2<h)?0+(h-e-1):((mouse.y+a("div.handle").height()/2>j+h)?(j-a("div.handle").height()+(h-e-3)):ypos+(h-e-3))}if(c.lens){a("div.handle").css({top:ypos,left:xpos})}scrolly=ypos-(h-e-2);a("div.zoomdiv").get(0).scrollTop=scrolly*n;scrollx=xpos-(m-f-2);a("div.zoomdiv").get(0).scrollLeft=(scrollx)*o})},function(){a(document.body).unbind("mousemove");if(c.lens){a("div.handle").remove()}a("div.zoomdiv").remove();a("div.zoomtips").remove()})}})(jQuery);function MouseEvent(a){this.x=a.pageX;this.y=a.pageY};
复制代码 |
哈哈,你放那么多代码他也看不懂啊,小刀放出的QQ红色商城模板中的放大镜效果很好的,LZ再配合后台添加商品时生成的缩略图大小就可以达到比较好的效果了。 |
温州国际快递携手与您同行,http://www.fzkdw.com |
goods.dwt加入这个代码就行了title="{$goods.goods_name|escape:html}" |