并未进行广泛的测试
<html>
<head>
<title>根据图片实际比例进行缩放</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="study/global.js"></script>
<style>body{font-size:12px;}</style>
</head>
<body>
<p id="pic" style=" width:550px; height:500px; border:solid 1px #f60; overflow:hidden;">
<img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="100" height="400" align="center" height="" />
</p>
<input type="button" value="生成CMD" id="go" onclick="PicUtil.fixCenter($('#pic'))" />
<br><br>
<div id="msg"></div>
<script type="">
var PicUtil={
cacheImg:$('<img />'),
//以容器为基准, 根据图片实际比例进行缩放
fixCenter:function(box){
var img=$("img",$(box));
if(img.size()>0){
var o = this.getProperty(img[0]);
if(o.wf>o.w0 && o.hf>o.h0){
this.fixOnly(box);
}else if(o.wf<o.w0 || o.hf<o.h0){
img.width(o.wf).height(o.hf);
if(o.hp>o.hf) $('<div style="clear:both;width:1px;height:'+((o.hp-o.hf)/2)+'px"></div>').insertBefore(img);
if(o.wp>o.wf) $(box).css("text-align","center");
}
}
},
fixOnly:function(box){
var img=$("img",$(box));
if(img.size()>0){
$(box).css({"background-image":"url("+img[0].src+")","background-repeat":"no-repeat","background-position":"center"}).empty();
}
},
getProperty:function(img){
if(!img || !img.src) return {};
var tmpImg=this.cacheImg;
tmpImg[0].src=img.src+"";
var parent=$(img).parent();
var rs={w0:tmpImg[0].width,h0:tmpImg[0].height,w:img.width,h:img.height,wp:parent.width(),hp:parent.height()};
if(rs.w0==0 || rs.h0==0) return {};
rs.wf=Math.floor(rs.h0/rs.w0*rs.wp)>rs.hp?(Math.floor(rs.w0/rs.h0*rs.hp)):rs.wp;
rs.hf=Math.floor(rs.h0/rs.w0*rs.wp)>rs.hp?rs.hp:Math.floor(rs.h0/rs.w0*rs.wp);
return rs;
}
}
function msg(x,y){
if(!y) $("#msg").html(x); else $("#msg").html(x+"<br>"+$("#msg").html());
}
</script>
</body>
</html>
分享到：
相关推荐
"jQuery图片等比例缩放图片左右垂直居中"这一技术就是为了应对这样的挑战。jQuery是一个广泛使用的JavaScript库，它提供了丰富的API和便捷的DOM操作方法，使得实现这个功能变得相对简单。 首先，我们要理解图片等...
总的来说，"jQuery图片等比例缩放图片左右垂直居中"涉及到前端开发中的响应式设计、图片布局、JavaScript事件处理和CSS定位等多个知识点。正确应用这些技术，可以提升网页的视觉效果和用户体验。
3. **应用缩放**：将缩放比例应用到图片的`width`和`height`上，并可能需要调整`margin`使其居中： ```javascript $("#yourImage").css({ width: imgWidth * scale, height: imgHeight * scale, margin: "auto",...
总的来说，实现这个"jquery图片缩放-支持平移、带按钮"的功能，需要对jQuery事件处理、CSS3变换以及图片资源管理有深入理解。这个功能的实现不仅提高了用户体验，也展示了JavaScript和jQuery在网页交互设计上的强大...
为了解决这个问题，我们可以利用jQuery来实现图片的按比例缩放，保持图片原有的纵横比，避免图片变形。本文将详细讲解如何使用jQuery实现这一功能。 首先，我们要明白jQuery是一个强大的JavaScript库，它提供了丰富...
这个技术的核心目标是实现图片的水平垂直居中，并在必要时进行智能裁切，以保持图片的正比例，防止变形。 首先，我们要理解"图片居中"这一概念。在CSS中，可以使用`margin: auto`结合`display: block`来使一个元素...
3. **处理事件**：在事件处理函数中，我们可以获取当前的缩放比例，并根据用户操作（点击或滚动）调整这个比例。例如，每次点击可以增加一个固定的缩放因子，而滚动事件可以根据滚轮的向上或向下滚动来增加或减少...
在实际项目中，"jQuery伸缩图片"效果可能会根据需求进行定制，如添加阴影、边框、过渡动画等，以增加视觉吸引力。通过结合HTML、CSS和jQuery，我们可以创建出丰富的交互式用户体验，使网页更加生动有趣。
在处理图片比例时，可以采用CSS的`max-width: 100%`和`height: auto`属性，让图片根据容器宽度自适应缩放，保持其原有的纵横比。若图片需要居中展示，可以使用`margin: 0 auto`来水平居中。 JavaScript中，我们还...
如果你对代码有深入理解，还可以根据实际需求进行二次修改，比如调整缩放比例、动画速度，甚至添加更多复杂的效果。这个压缩包中的代码提供了一个基础的起点，对于学习和实践jQuery特效来说，是一个很好的起点。
2. **马赛克布局**：利用jQuery动态生成或隐藏图片元素，根据屏幕尺寸和预设的布局规则调整每张图片的位置和大小。可以使用CSS Grid或Flexbox进行更现代的布局控制。 3. **缓冲运动**：应用`.animate()`函数来实现...
标题“浏览器窗口放大缩小后页面内容居中解决方法”揭示了我们今天要探讨的核心问题：如何使网页内容在浏览器窗口缩放时仍然保持居中对齐。 在描述中提到了一个链接到CSDN博客的文章，虽然具体内容无法直接展示，但...
- 使用CSS或jQuery创建并显示一个遮罩层，以及放大版的图片。 - 实现关闭功能，用户可以通过点击遮罩层或指定的关闭按钮来关闭灯箱。 - 可能还需要考虑图片的缩放和居中，以及键盘导航支持。 在"jquery实现的...
当鼠标悬停时，我们将图片的缩放比例增大，离开时恢复原值。这里需要注意的是，为了保持图片居中，可能还需要调整`transform-origin`属性： ```javascript var zoomFactor = 1.5; // 图片放大的倍数 $('.image-...
它的消息容器甚至能够根据宽度让文本居中或居左对齐——这一切全是XHTML+CSS原生实现。 完善的接口 它的接口完善，可以轻易与外部程序配合使用。如异步写入消息、控制位置、尺寸、显示与隐藏、关闭等。 细致的体验 ...
接下来，在CSS中设定初始的图片样式，通常会设定一个最大宽度，超出此宽度后图片会等比例缩放，保持原始比例。这有助于在放大前保持页面整洁： ```css #myImage { max-width: 100%; height: auto; } ``` 然后，在...
2. **图片放大效果**: 这个相册功能通过JavaScript实现了图片的点击放大效果，可能包括平滑过渡、等比例缩放、居中显示等特性，旨在提供良好的用户体验。 3. **HTML结构**: `index5.html`、`index4.html`等可能是...
### Jquery图片自适应大小实现方法 #### 一、引言 在网页设计与开发过程中，经常遇到的一个问题是如何让图片在不同的设备上保持良好的视觉效果。特别是在响应式设计日益重要的今天，确保图片能够根据屏幕大小自动...
开发者在使用smartZoom插件时需要注意引入正确的资源文件，并根据实际需要进行适当的CSS和JavaScript代码编写，以确保实现良好的用户体验。当然，smartZoom插件还提供了更多的API供开发者使用，具体可以参考插件的...