$(document).ready(function() { $('.post img').each(function() { var maxWidth = 100; // 图片最大宽度 var maxHeight = 100; // 图片最大高度 var ratio = 0; // 缩放比例 var width = $(this).width(); // 图片实际宽度 var height = $(this).height(); // 图片实际高度 // 检查图片是否超宽 if(width maxWidth){ ratio = maxWidth / width; // 计算缩放比例 $(this).css("width", maxWidth); // 设定实际显示宽度 height = height * ratio; // 计算等比例缩放后的高度 $(this).css("height", height); // 设定等比例缩放后的高度 } // 检查图片是否超高 if(height maxHeight){ ratio = maxHeight / height; // 计算缩放比例 $(this).css("height", maxHeight); // 设定实际显示高度 width = width * ratio; // 计算等比例缩放后的高度 $(this).css("width", width * ratio); // 设定等比例缩放后的高度 } }); });
成都创新互联公司专业为企业提供富拉尔基网站建设、富拉尔基做网站、富拉尔基网站设计、富拉尔基网站制作等企业网站建设、网页设计与制作、富拉尔基企业网站模板建站服务,十载富拉尔基做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
很简单啊,先把图片用css缩小,再用js滑过的时候放大就好啦,图省事我就把js直接写在图片上了,你可以自己抽出来:
img src="1.jpg" width="50" height="50" onMouseOver="this.width='300'; this.height='300';" onMouseOut="this.width='50'; this.height='50'"
或者更简单的,直接用css控制,连js都不用写了:
style
#Img1{ width:50px; height:50px;}
#Img1:hover{ width:300px; height:300px;}
/style
img src="1.png" width="50" height="50" id="Img1"
jQuery调整html对象使用css()方法即可.
$("#test img").css("width","30px")//设置test下的图片宽为30px
$("#test img").css("height","30px")//设置test下的图片高为30px
定义和用法:
css() 方法返回或设置匹配的元素的一个或多个样式属性.
设置 CSS 属性
设置所有匹配元素的指定 CSS 属性.
$(selector).css(name,value)
通俗的解释为如果设置第二个参数为修改css属性,如果未设置第二个参数为获取css属性.