jQuery在页面加载时动态修改图片尺寸的方法

 这篇文章主要介绍了jQuery在页面加载时动态修改图片尺寸的方法,实例分析了jQuery操作图片的技巧,非常具有实用价值,需要的朋友可以参考下

 
 

本文实例讲述了jQuery在页面加载时动态修改图片尺寸的方法。分享给大家供大家参考。具体如下:

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

$(window).bind("load", function() {
// IMAGE RESIZE
$('#product_cat_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程序设计有所帮助。

时间: 2024-12-31 13:01:55

jQuery在页面加载时动态修改图片尺寸的方法的相关文章

jQuery在页面加载时动态修改图片尺寸的方法_jquery

本文实例讲述了jQuery在页面加载时动态修改图片尺寸的方法.分享给大家供大家参考.具体如下: $(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(

jquery页面加载时鼠标移动事件

问题描述 jquery页面加载时鼠标移动事件 如何在页面首次加载进来的时候也能触发鼠标移动的这个事件 $(function(){ $(".newsbox .tab span").hover(function(){ $(this).addClass("cur").siblings().removeClass("cur"); var index = $(".newsbox .tab span").index(this); $(&q

jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较_jquery

想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> <head > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>验证加载顺序</title> <script src=

Javascript在网页页面加载时的执行顺序

javascript|加载|网页|页面|执行 一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属性制定外部的js文件 放在事件处理程序中,比如:<p >点击我</p> 作为URL的主体,这个URL使用特殊的Javascript:协议,比如:<a href="javascript:alert('我是由javascript

Javascript代码在页面加载时的执行顺序介绍_基础知识

一.在HTML中嵌入Javasript的方法1.直接在Javascript代码放在标记对<script>和</script>之间2.由<script />标记的src属性制定外部的js文件3.放在事件处理程序中,比如:<p onclick="alert('我是由onclick事件执行的Javascript')">点击我</p>4.作为URL的主体,这个URL使用特殊的Javascript:协议,比如:<a href=&q

Jquery 在页面加载后执行的几种方式

 这篇文章主要介绍了Jquery 在页面加载后执行的几种方式,需要的朋友可以参考下 方式1:   代码如下: $(function(){    initPublish();    });    说明: initPublish() 即为你要运行的JS函数:这段代码,放在页面最低端.    方式2:  代码如下: $(document).ready(function () {    // add your code here    initPublish();    $(.a).click( fun

如何让页面加载时,隐藏的图片还隐藏

问题描述 如何让页面加载时,隐藏的图片还隐藏 重新进入一个页面,由于网速原因,在进入页面时加载一会,那些隐藏的图片就会显示,如何让页面加载时,隐藏的图片还隐藏 解决方案 焦点图吗?如果是你设置好容器的宽度,高度,设置overflow:hidden就不会显示出来了,要不你放到window.onload里面用js处理的话,没有增加显示控制会导致页面变形 解决方案二: 没理解你的意思 如果是前台图片 直接用js加载就好 如果这些图片显示涉及到权限 就后台加代码 解决方案三: 我是当鼠标悬浮时显示,离开

跨域网站实现了单点登录,但各网站的每个页面继承验证类,导致页面加载时 刷新两次

问题描述 跨域网站实现了单点登录,但各网站的每个页面继承验证类,导致页面加载时刷新两次各网站加载较慢单点登录原理是各网站的用户凭证保存到验证服务器的cache中请问有什么异步方法不让每个页面都刷新一次谢谢 解决方案 解决方案二:每个页面都访问单点登录系统?什么情况?你的网站,如果没有登录信息,才需要访问单点登录网页.而如果已经登陆过,你的网页该干什么还干什么.从单点登录网页重定向回到当前网站页面之后,当前网站应该从单点登录网站(根据传来的url参数)把用户的信息取过来保存,以后在打开别的页面时就

如何在JSP页面加载时就把数据库中一张表的信息读出来

问题描述 因为是页面加载时所以不能访问servlet用bean的话只能输出一个bean,也就是表中一行数据的信息 解决方案 解决方案二:求助大神啊呜呜呜解决方案三:$(function(){ajax})解决方案四:jsp里body添加onload方法,里面ajax请求解决方案五:onload+ajax.