关于
这个和以前弄的图片远处放大有许多相同的地方,比如图片预加载、有限容器显示无限大图片。
大小计算:内外两个比例。 复制代码
代码如下: // 容器比例和图片比例 var dr = dw/dh, ir = iw/ih; if{ ih = dh;
iw = ih * ir; }else{ iw = dw; ih = iw / ir; }
居中显示:CSS绝对定位,负边距。 复制代码
代码如下:
$img.css({width:iw,height:ih,position:’absolute’,top:’50%’,left:’50%’,marginLeft:-iw/2,marginTop:-ih/2})
加载中和加载出错:可自定义的参数。 HTML容器:
rx2 = 40 / c.w,
如何使用: 复制代码 代码如下:
$(‘div.jq-img-autoresize’).imgAutoResizer({ loading : function .text; }
,error : function .text; 所有代码:复制代码 代码如下: /* * 图片等比缩放 * @by
ambar * @create 2010-11-17 * @update 2010-11-17 */
$.fn.imgAutoResizer = function { return this.each { var opt = $.extend({
sizeAttr : ‘data-img-size’ ,srcAttr : ‘data-img-url’ ,error : null
,loading : null }, options || {}); var $el = $, src = $el.attr, size =
$el.attr.split; // 容器宽高 var dw = size[0], dh = size[1]; var $img
= $(”, { src : src }), img = $img[0]; var autoresize = function () {
if($el.data return; // 图片宽高 var iw = img.width, ih = img.height; if
return; // 比例 var dr = dw/dh, ir = iw/ih; if( !{ if{ ih = dh; iw = ih
* ir; }else{ iw = dw; ih = iw / ir; } } // console.log;
$el.data.css({position:’relative’,width:dw,height:dh,overflow:’hidden’});
$img.css({width:iw,height:ih,position:’absolute’,top:’50%’,left:’50%’,marginLeft:-iw/2,marginTop:-ih/2}).appendTo;
}; $img .load .error { if($.isFunction opt.error.call; if{ if(img.width
&& img.height) autoresize(); }else{ if($.isFunction opt.loading.call };
演示地址:
img2 = $(“#real”),
pre_img($(‘.pre-2 img’), rx, oh, ry, ow, cx, cy, 73, 90);
obj.css({
if($.browser.msie){
});
$(“.jc-demo-box”).attr(“data”, _data);
width: Math.round(rx * iw) + ‘px’,
if( deg > 0){
filter: _filter
“-webkit-transform”: _val,
_data = _data – 90;
pre_img2($(‘.pre-2 img’), rx1, iw, ry1, ih, c.x, c.y);
var imgRotate = function(deg){
});
_data = parseInt($(“.jc-demo-box”).attr(“data”));
img2 = $(“#real”),
“transform”: _val
澳门新葡8455最新网站, marginTop: ‘-‘ + Math.round(h / rx * cy) + ‘px’
$(“#idBig”).click(function(e){
var img1 = $(“.jcrop-holder>img”),
img1.css({
_data = 0;
_data = $(“.jc-demo-box”).attr(“data”);
$(“#idSmall”).click(function(e){
.pre-1,.pre-2,.pre-3{ border: 1px solid #c8c8c8;}
var _Jw = ($(‘#target’).width() – 110) / 2 ,
JS:
_Jw2 = _Jw + 110,
var sin = Math.sin(Math.PI / 180 * (_data + deg));
ow=img1.width(),
height: Math.round(h / ry * oh) + ‘px’,
“-moz-transform”: _val,
if($.browser.msie && (_data == 90 || _data == 270)){
说明:图像比例为110:135
});
“-webkit-transform”: _val,
});
_data = 270;
rx = 110 / c.w,
var img1 = $(“.jcrop-holder>img”),
pre_img2($(‘.pre-3 img’), rx2, ih, ry2, iw, c.x, c.y);
img1.width(_w).height(_h);
cy = $(“#small”).position().top,
$(‘.jcrop-holder’).width(_w).height(_h).css({
“-moz-transform”: _val,
_Jh = ($(‘#target’).height() – 135) / 2 ,
}
var imgToSize = function (size) {
var pre_img = function(obj, rx, ow, ry, oh, cx, cy, w, h){
“transform”: _val
ry1 = 90 / c.h,
}
rx1 = 73 / c.w,
}else{
if(_data == 0){
pre_img($(‘.pre-2 img’), rx, ow, ry, oh, cx, cy, 73, 90);
marginLeft: ‘-‘ + Math.round(rx * cx) + ‘px’,
_w = Math.round(ow + size),
});
setSelect: [_Jw, _Jh, _Jw2, _Jh2]
.pre-2{ width: 73px; height: 90px; overflow:hidden; margin-top:
13px; }
ry = 135 / c.h,
_data = _data + 90;
}
_data = $(“.jc-demo-box”).attr(“data”);
“-o-transform”: _val,
//放大缩小图片
imgRotate(90);
imgToSize(20);
pre_img2($(‘.pre-1 img’), rx, iw, ry, ih, c.x, c.y);
//图片旋转
“-o-transform”: _val,
pre_img2($(‘.pre-1 img’), rx, ih, ry, iw, c.x, c.y);
.pre-3{ width: 40px; height: 48px; overflow:hidden;margin-top: 13px;
}
if(_data == 270){
兼容:ie6+,FF,chrome等
var cos = Math.cos(Math.PI / 180 * (_data + deg));
下载包里有 jquery.Jcrop.css
function showPreview(c){
left: Math.round((395 – _w) / 2) + ‘px’,
$(‘.pre-1 img,.pre-2 img,.pre-3 img’).css({
img2.width(_h).height(_w);
ry = $(“#small”).height(),
var api = $.Jcrop(“#target”,{
.jcrop-holder{overflow:hidden;}
marginTop: ‘-‘ + Math.round(ry * cy) + ‘px’
onSelect: showPreview,
相关文章
- 社区是或不是足以做的越来越好,Web 应用程序的前11个 JavaScript 框架
- index.html文件之中早就预包含部分HTML代码,伪类来促成
- 译文出处,八个由INode节点爆满引起的事务故障
- 澳门新葡8455最新网站2是三个运营于Windows平台的游戏制作工具,开源分布式游戏服务端引擎 发表于 2周前
- 澳门新葡8455最新网站给我们在编辑h5游戏上带给一些启示,顾客能够透过滑行拉出一条扶持线
- 澳门新葡8455最新网站甚至谐和是什么样抵挡形似攻击的,以致和煦是怎么样抵抗近似攻击的
- 澳门新葡8455最新网站就可以拉长大小样式——,还应该有label的for属性和input的id必得同名
- 概率须要布满均匀,《指尖大冒险》SNS 游戏简化版
- 设若你想生成 HTML4 的过渡型布局,在上篇作品
- GTK+ 3.0.0先天表露,builder使用GTK+能够使开拓者火速便捷地付出应用程序