js實(shí)現(xiàn)固定顯示區(qū)域內(nèi)自動縮放圖片的方法
更新時(shí)間：2015年07月18日 10:37:18 作者：qq123
這篇文章主要介紹了js實(shí)現(xiàn)固定顯示區(qū)域內(nèi)自動縮放圖片的方法,實(shí)例分析了javascript操作頁面元素及屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)固定顯示區(qū)域內(nèi)自動縮放圖片的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style type="text/css">
#img{ width:600px; height:400px; position:relative; overflow:hidden; background:#996699;}
</style>
</head>
<body>
<div id="img"><img src="dsds.JPG" onload="resize_img(this,600,400)" /></div>
</body>
</html>
<script type="text/javascript">
function resize_img(pic,w,h){
var re_new_size=function(r){
//根據(jù)比率重新計(jì)算寬度
return {w:pic.width/r,h:pic.height/r};
};
var re_offset=function(n){
//根據(jù)新的寬高度返回偏移量
return {off_l:(n.w-w)*0.5,off_t:(n.h-h)*0.5};
};
var re_position=function(o,n){
//重新定位圖片
pic.style.cssText="position:absolute;top:"+-o.off_t+"px;left:"+-o.off_l+"px;width:"+n.w+"px;height:"+n.h+"px;";
};
var execute=function(rate){
var new_size=re_new_size(rate),
offset_new=re_offset(new_size);
re_position(offset_new,new_size);
};
var rate_of_w=pic.width/w,
rate_of_h=pic.height/h,
rate;
if(rate_of_w>=1){
//圖片寬度大于顯示區(qū)域?qū)挾?
if(rate_of_h>=1){
//且圖片高度大于顯示區(qū)域高度
rate=Math.min(rate_of_w,rate_of_h);
}else{
//圖片高度小于顯示區(qū)域
rate=pic.height/h;
}
}else{
//圖片寬度小于顯示區(qū)域?qū)挾?
if(rate_of_h>=1){
//且圖片高度大于顯示區(qū)域高度
rate=pic.width/w;
}else{
//圖片高度小于顯示區(qū)域高度
rate=Math.min(rate_of_w,rate_of_h);
}
}
execute(rate);
//執(zhí)行入口
}
</script>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
小程序animate動畫實(shí)現(xiàn)直播間點(diǎn)贊
這篇文章主要為大家詳細(xì)介紹了小程序animate動畫實(shí)現(xiàn)直播間點(diǎn)贊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
最精簡的JavaScript實(shí)現(xiàn)鼠標(biāo)拖動效果的方法
這篇文章主要介紹了最精簡的JavaScript實(shí)現(xiàn)鼠標(biāo)拖動效果的方法,可實(shí)現(xiàn)javascript控制鼠標(biāo)拖動div層效果的方法,需要的朋友可以參考下2015-05-05
void(0)用于執(zhí)行某些處理，但是不整體刷新頁面的情況下，下面小編就給大家詳細(xì)介紹js中 javascript:void(0)的含義 ，需要的朋友可以參考下2015-08-08
本篇文章主要介紹了js綁定事件和解綁事件的相關(guān)知識。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-04-04
這篇文章主要介紹了JavaScript獲取一個范圍內(nèi)日期的方法,涉及javascript操作日期的相關(guān)技巧,需要的朋友可以參考下2015-04-04
js中checkbox的使用教程(取值、賦值、判斷是否選中)
在checkbox的使用中,我們經(jīng)常遇到需要全選或者單選的情況,下面這篇文章主要給大家介紹了關(guān)于js中checkbox使用(取值、賦值、判斷是否選中)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
js 針對html DOM元素操作等經(jīng)驗(yàn)累積
這篇文章主要介紹了js 針對html DOM元素操作等經(jīng)驗(yàn)累積,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了微信小程序使用image組件顯示圖片的方法,結(jié)合實(shí)例形式簡單分析了微信小程序附image組件的相關(guān)使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2017-12-12
使用Javascript在HTML中顯示實(shí)時(shí)時(shí)間
這篇文章主要為大家詳細(xì)介紹了使用Javascript在HTML中顯示實(shí)時(shí)時(shí)間，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
uni-app打開外部鏈接方式總結(jié)(h5和app)
uni-app在app和h5中跳轉(zhuǎn)至外部鏈接的方式有所不同,需要進(jìn)行條件編譯,下面這篇文章主要給大家介紹了關(guān)于uni-app打開外部鏈接方式(h5和app)的相關(guān)資料,文章通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02