那天在服务器上临时增加了一点小脚本,昨天更新的给覆盖掉了.
今天一早就收到老板的通知,图片尺寸自己又不会缩了.这里先备一个份,省得下次又得重新写.
具体思路:
通过具体容器取得容器内所有图片
循环检查所有图片长宽
对超过的图重新定高度.
直接写成一个扩展好了,以后可以直接用.
jquery.fn.ImageAutoSize = function(width,height)
{
$("img",this).each(function()
{
var image = $(this);
if(image.width()>width)
{
image.width(width);
image.height(width/image.width()*image.height());
}
if(image.height()>height)
{
image.height(height);
image.width(height/image.height()*image.width());
}
});
}
调用:先引用上面的脚本或将上页的脚本放入自己的JS库,然后只要再加
$(function(){ $("图片组所在的容器").ImageAutoSize(限制最大宽,限制最大高);});
分享到:
相关推荐
"jQuery+CSS 用图片收缩与放大 插件" 提供了一种高效、动态的方式来处理网页上的图片,使得用户可以轻松查看细节,同时保持页面的整体整洁性。这个插件利用了JavaScript库jQuery的强大力量和CSS的灵活性,为图片添加...
1. **选择器与DOM操作**:jQuery通过选择器来定位页面中的图片元素,并使用`.html()`、`.append()`等方法来动态地添加或替换这些元素,以实现图片的切换。 2. **动画效果**:`.animate()`函数是实现滑动和伸缩效果...
jQuery作为一款广泛使用的JavaScript库,提供了丰富的功能和简便的API,使得开发者能够轻松实现各种复杂的动态效果。本文将深入探讨jQuery可伸缩时间轴插件timeline,该插件以其优雅的样式和灵活的功能,深受广大...
jquery+div带动画按钮图片手动与自动切换的特效代码 jquery一页多用的飞飞图片幻灯插件演示 jquery仿flash产品图片多角度展示特效代码 jquery仿flash图片放大相册的插件代码(Zoomer Gallery)下载 jquery仿flash的...
通过使用jQuery,开发者可以以更简洁的代码实现复杂的功能,提高开发效率。 2. **时间轴设计**:时间轴是一种将事件按照时间顺序排列的可视化工具,常用于历史记录、项目进度或新闻更新的展示。timeline插件通过CSS...
"jQuery左右伸缩滑动效果"是一种常见的JavaScript特效,它广泛应用于导航菜单、图片轮播、内容切换等多个场景。jQuery库以其简洁的API和丰富的插件,为开发者提供了实现这种效果的便利。本文将详细介绍如何利用...
为了避免过度渲染和提高性能,我们可以使用CSS3的`transition`属性预定义部分动画效果,让浏览器在可能的情况下自动优化。同时,确保在动画执行期间禁用其他交互,避免出现冲突。 此外,为了使抽屉式图片展示更加...
"jQuery流布局伸缩放大特效"正是这样一种技术,它巧妙地结合了jQuery库与CSS3,使得网页中的图片在鼠标悬停时能够动态放大,为用户带来生动且酷炫的视觉体验。这一特效常用于商品展示或个人相册,以突出显示关键细节...
在本文中,我们将深入探讨如何使用jQuery来实现全屏幕自动伸缩广告Banner的特效。jQuery是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作等任务,非常适合用于创建动态网页效果。 首先,全屏幕...
总的来说,jQuery商城图片滑动伸缩图片广告代码的实现涉及到了jQuery的选择器、事件处理、动画效果,以及与CSS3的结合使用,这些都是前端开发中的重要技能。理解并熟练掌握这些技术,不仅能够提升网站的互动性和吸引...
标题中的“jquery代码模块自动伸缩效果.zip”指的是一个使用jQuery库实现的代码示例,该示例展示了如何创建一种动态的、响应式的模块化布局,其中元素可以根据需要自动伸缩。这种效果常用于现代网页设计,特别是那些...
54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery贴图旋转及缩放插件下载 56. jquery门户网站首页全屏弹性伸缩至小屏的广告代码(非常实用) 57. jQuery黑色动感Ajax无刷新动态分组图片效果代码 58. ...
本教程将详细讲解如何使用jQuery来实现“仿麦包包商城图片滑动伸缩图片广告代码”,这是一个常用于电商网站的动态效果,能够提升用户体验并吸引用户注意力。 首先,我们需要理解这个效果的基本概念。它通常包括以下...
5. 时间间隔(setTimeout和setInterval):为了实现自动切换的效果,可能需要使用这两个函数来设定定时器,定期执行某个函数,如切换到下一张图片。 6. 数据存储和索引管理:如果涉及到多张图片的切换,可能需要...
在本项目中,"jQuery有缩微图和介绍的图片切换"是一个实现动态图像展示的常见功能,常用于网站的轮播广告(bannar图)或产品展示。这个功能使得用户可以通过缩略图来预览大图,并在点击缩略图后切换到对应的大图,...
54. jquery自动播放图片滚动漂浮式效果的示例 55. jquery贴图旋转及缩放插件下载 56. jquery门户网站首页全屏弹性伸缩至小屏的广告代码(非常实用) 57. jQuery黑色动感Ajax无刷新动态分组图片效果代码 58. jquery...
总的来说,"jQuery鼠标悬停图片手风琴自动切换代码"是一个实用且有趣的网页特效,通过使用jQuery库,结合HTML、CSS和JavaScript技术,我们可以为用户提供更加生动、互动的浏览体验。熟练掌握并应用这一代码,对于...
"jQuery等比例缩放大图片_大图片自适应页面布局"的主题聚焦于如何利用jQuery库来解决大图片超出页面边界的问题,实现图片的等比例缩放,使其自适应页面布局。下面将详细介绍这两种方法,并探讨相关技术细节。 方法...
这通常涉及到数组和索引的使用,以及适当的定时器来实现自动切换。 6. **优化性能**:为了提高性能,可以使用`.on()`方法绑定事件,减少DOM遍历,并考虑使用事件委托。同时,合理地利用缓存和预加载图片,避免因...
由于Flash逐渐被淘汰,这款插件使用jQuery实现了类似Flash的大横幅图片播放效果,支持自动播放、过渡动画和导航控制,为网站的首页添加动态视觉元素。 5. **jQuery 相册(图像切换技术,点小图无刷新显大图)...