手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >基于jquery实现等比缩放图片
基于jquery实现等比缩放图片
摘要:基于jquery的图片尺寸调整resize.js复制代码代码如下:$(window).bind("load",function(){//IM...

基于jquery的图片尺寸调整

resize.js

复制代码 代码如下:

$(window).bind("load", function() {

// IMAGE RESIZE

$('#product_list img').each(function() {

var maxWidth = 120;

var maxHeight = 120;

var ratio = 0;

var width = $(this).width();

var height = $(this).height();

if(width > maxWidth){

ratio = maxWidth / width;

$(this).css("width", maxWidth);

$(this).css("height", height * ratio);

height = height * ratio;

}

var width = $(this).width();

var height = $(this).height();

if(height > maxHeight){

ratio = maxHeight / height;

$(this).css("height", maxHeight);

$(this).css("width", width * ratio);

width = width * ratio;

}

});

//$("#contentpage img").show();

// IMAGE RESIZE

});

代码很简洁,使用起来也很简单,小伙伴们直接使用即可

【基于jquery实现等比缩放图片】相关文章:

jQuery实现返回顶部功能

Jquery实现动态切换图片的方法

基于jQuery实现的无刷新表格分页实例

jQuery实现页面内锚点平滑跳转特效的方法总结

jQuery实现鼠标经过图片变亮其他变暗效果

jQuery插件expander实现图片翻转特效

jQuery实现文本展开收缩特效

基于JavaScript实现智能右键菜单

基于JavaScript实现图片点击弹出窗口而不是保存

基于jquery实现下拉框美化特效

精品推荐
分类导航