建站
咨詢
售后
建站咨詢
新聞中心
js獲取分辨率和縮放頁面的方法
var screen = window.screen;//獲取分辨率
成都網(wǎng)絡(luò)公司-成都網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站10多年經(jīng)驗(yàn)成就非凡，專業(yè)從事網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)，成都網(wǎng)頁設(shè)計(jì)，成都網(wǎng)頁制作，軟文營銷，一元廣告等。10多年來已成功提供全面的成都網(wǎng)站建設(shè)方案，打造行業(yè)特色的成都網(wǎng)站建設(shè)案例，建站熱線：18980820575，我們期待您的來電！
screen.width；//獲取分辨率的寬度
screen.height；//獲取分辨率的高度
//頁面縮放比例設(shè)置方法
document.getElementsByTagName('body')[0].style.zoom=0.67 //該方法將頁面設(shè)置比例調(diào)整為67%
怎樣通過javascript使圖片絕對縮放
一般來說，實(shí)現(xiàn)圖片的放大縮小功能都用到了比較大的封裝插件，特別是以jQuery插件居多，而實(shí)際上單純實(shí)現(xiàn)對原圖本身的放大縮小，用簡單幾行原生JS代碼就可以做到。在今天分享的這個實(shí)例中，點(diǎn)擊放大按鈕不松鼠標(biāo)，圖片會不斷的逐漸放大，當(dāng)然也可以點(diǎn)一下放大一點(diǎn)，點(diǎn)擊縮小按鈕則反之，有需要的朋友可以考慮收藏備用哦
以下為全部代碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
titlejavascript控制圖片縮小或者放大/title
/head
body
script type="text/javascript"
var oTime;
function changeSize(id,action){
var obj=document.getElementById(id);
obj.style.zoom=parseInt(obj.style.zoom)+(action=='+'?+10:-10)+'%';
oTime=window.setTimeout('changeSize(\''+id+'\',\''+action+'\')',100);
}
document.onmouseup=function(){
window.clearTimeout(oTime);
}
/script
div style="height:350px; overflow: auto;"
img id="headImg" src="
button onmousedown="changeSize('headImg','+');" onmouseup="window.clearTimeout(oTime);"放大/button
button onmousedown="changeSize('headImg','-');" onmouseup="window.clearTimeout(oTime);"縮小/button
/body
/html
JS中canvas畫布繪制中如何實(shí)現(xiàn)縮放，位移，旋轉(zhuǎn)
cxt.scale(2,2);
縮放的是整個畫布，縮放后，繼續(xù)繪制的圖形會被放大或縮小。
ctx.translate(x,y) 方法重新映射畫布上的 (0,0) 位置
x： 添加到水平坐標(biāo)（x）上的值
y： 添加到垂直坐標(biāo)（y）上的值
發(fā)生位移后，相當(dāng)于把畫布的0,0坐標(biāo) 更換到新的x,y的位置，所有繪制的新元素都被影響。
位移畫布一般配合縮放和旋轉(zhuǎn)等。
context.rotate(angle); 方法旋轉(zhuǎn)當(dāng)前的繪圖
注意參數(shù)是弧度（PI）
如需將角度轉(zhuǎn)換為弧度，請使用 degrees*Math.PI/180 公式進(jìn)行計(jì)算。
JavaScript 拖動和縮放
不知道你是怎么放在一起的，一個img就可以了哇。這兩段代碼很好，也學(xué)習(xí)了。
html
head
title/title /head
script type="text/javascript"
var drag=0;
var clickleft=0;
var clicktop=0;
var dragobj=null;
function load(oEvent)
{
oEvent=oEvent||window.event;
dragobj=oEvent.srcElement||oEvent.target;
dragobj.onmousedown=mousedown;
dragobj.onmouseup=mouseup;
dragobj.onmousemove=mousemove;
dragobj.ondragstart=dragstart;
}
function mousedown(oEvent)
{
drag=1;
clickleft=event.clientX-dragobj.offsetLeft
clicktop=event.clientY-dragobj.offsetTop
}
function dragstart()
{
window.event.returnValue=false;
}
function mousemove()
{
if(drag==1)
{
dragobj.style.left=event.clientX-clickleft;
dragobj.style.top=event.clientY-clicktop;
}
}
function mouseup()
{
drag=0;
}
function zoomOut(){
var zoom = parseFloat(document.getElementById("img1").style.zoom);
zoom = zoom + 0.1;
document.getElementById("img1").style.zoom = zoom;
asd.value=zoom;
}
function zoomIn(){
var zoom = parseFloat(document.getElementById("img1").style.zoom);
zoom = zoom - 0.1;
document.getElementById("img1").style.zoom = zoom;
asd.value=zoom;
}
/script
body
input type="button" value="+" onclick="zoomOut()"
input type="button" value="-" onclick="zoomIn()"
input type="text" id="asd"
img id="img1" onload="load();" style="POSITION: absolute; left: 93px; top: 32px; zoom:1.0;" src="mm.jpg" width="681" height="450" /
/body
/html
名稱欄目：javascript縮放,javascript網(wǎng)頁強(qiáng)制縮放
文章鏈接：http://www.dlmjj.cn/article/dsgeopj.html
