网站导航
:
免费论文
原创论文
论文搜索
原创论文
网学软件
学术大家
资料中心
会员中心
问题解答
原创论文
论文素材
设计下载
最新论文
下载排行
论文上传
在线投稿
联系我们
最新论文
推荐专题
热门论文
素材专题
网站首页
设计下载
关于网学
程序设计
设计资源
论文模板
网学软件
网页素材
网页模板
精品课件
游戏频道
网学资料
原创论文
网站设计
交易代码
PSD素材
高清图片
C++
VB
ASP
VF
DELPHI
JSP
电气
计算机
经济
打包下载
查询工具
设计案例
教授专家
实用代码
网页配色
便捷工具
表单美化
免费论文
可用论文
论文培训
时间与效率
DIV技术
JS代码
百宝箱
设计师
AJAX代码
GIF素材
背景图片
网页图标
QQ表情
png图标
动画素材
PPT模板
DIVCSS模板
企业模板
韩国模板
日本模板
欧美模板
个人模板
节庆模板
实用工具
Psd素材
QQ专栏
CAJ文档
游戏评论
游戏攻略
游戏赏析
游戏前瞻
游戏新闻
游戏帮助
游戏秘籍
游戏补丁
国外课件
本科课件
网络课件
原创设计
原创下载
原创论文
网站维护(新)
虚拟实验,在线实验系统
口才培训
驾照考试
酒后代驾
设计定作
设计专题
计算机原创
网络教育
收录查询
ASP,网站,C/S,设计等定作
栏目导航:
网站设计界面-界面设计、后台界面
Psd素材
QQ专栏
矢量素材
PS笔刷
打包下载
设计师介绍
AJAX代码
GIF素材
背景图片
当前位置:
网学
>
网页素材
>
AJAX代码
> 正文
jQuery实现按比例缩放图片
来源:
Http://myeducs.cn
联系QQ:
作者:
用户投稿
来源:
网络
发布时间:
11/01/18
在网站中通常要显示各种尺寸的图片,但图片的尺寸不一定符合显示的要求。如果直接指定img的width和height属性的话图片又很可能会被挤压的变形。下面这个代码可以把图片放进一个imgBox,并根据imgBox的大小来按比例缩放图片以适应他,同时图片会在imgBox中居中显示。来看代码:
首先是HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/uploadfile/201101/18/B5102324858.jpg" onload="DrawImg(500,400);" />
</div>
</body>
</html>
再是JavaScript:
function DrawImg(boxWidth,boxHeight)
{
var imgWidth=$("#img1").width();
var imgHeight=$("#img1").height();
//比较imgBox的长宽比与img的长宽比大小
if((boxWidth/boxHeight)>=(imgWidth/imgHeight))
{
//重新设置img的width和height
$("#img1").width((boxHeight*imgWidth)/imgHeight);
$("#img1").height(boxHeight);
//让
图片
居中显示
var margin=(boxWidth-$("#img1").width())/2;
$("#img1").css("margin-left",margin);
}
else
{
//重新设置img的width和height
$("#img1").width(boxWidth);
$("#img1").height((boxWidth*imgHeight)/imgWidth);
//让
图片
居中显示
var margin=(boxHeight-$("#img1").height())/2;
$("#img1").css("margin-top",margin);
}
}
点击进入论坛和大家一起交流设计,分享设计素材,结交设计朋友
上一篇资讯:
AjaxPro实现机制探讨——Ajax是如何调用服务器端C#方法的?
下一篇资讯:
使用ASP.Net 3.5 的Ajax与Web服务开发实例
相关资讯
相关文章
使用ASP.Net 3.5 的Ajax与Web服务开发实例
JavaScript实现颜色梯度和渐变效果详解
56个AJAX图片展示框架(Galleries, Slideshows and L
jQuery操作数据库实现treeview
40个轻量级JS库(一)
相关专题
ext 2.2
ajax经典源代码 下载查看
ajax使用必知readyState五种状态说明
AJAX验证表单下载
onBlur
网学推荐
免费论文
原创论文
文章排行榜
·
ext 2.2
·
ajax经典源代码 下载查看
·
ajax使用必知readyState五种状态说
·
AJAX验证表单下载
·
onBlur
·
Ajax学习笔记
·
使用JSON 进行数据传输
·
088-setAttribute-style
·
088-setAttribute-onmouseover-IE2
·
32009 种风格的AJAX左右切换内容
·
了解XMLHTTPRequest的属性及方法
·
ajax
·
ASPAJAXCTP.msi下载
·
Most beautiful websites of 2008(
·
AJAX留言本简易版 下载
·
2009-AJAX弹出提示信息效果
·
ymPrompt消息提示组件 2.0
·
用Ajax读写操作Session()
浏览:
设为首页
|
加入收藏
|
论文首页
|
论文专题
|
设计下载
|
网学软件
|
论文模板
|
论文资源
|
程序设计
|
关于网学
|
站内搜索
|
网学留言
|
友情链接
|
资料中心
版权所有 电话:013574892963 QQ:3710167 邮箱:
Educs@163.com
网学网 [
Myeducs.cn
] 您电脑的分辨率是
像素
Copyright 2008-2015
Www.myeducs.Cn
All Rights Reserved
湘ICP备09003080号