图片缩放,比例的特效收集

最新推荐文章于 2020-11-29 02:50:16 发布

xo_tobacoo

最新推荐文章于 2020-11-29 02:50:16 发布

阅读量2.3k

点赞数

分类专栏： javascript 文章标签： function javascript html generator div input

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1)显示图片缩放,比例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

　　<HTML>
　　<HEAD>
　　<TITLE>动态获取缩放图片的长度、宽度和显示比例</TITLE>
　　<META NAME="Generator" CONTENT="EditPlus">
　　<META NAME="Author" CONTENT="PurpleEndurer">

<SCRIPT LANGUAGE="JavaScript">
　　<!--
　　//缩放对象. 调用方式: zoomObj(this)
　　function zoomObj(o)
　　{
　　var zoom = parseInt(o.style.zoom, 10)||100;
　　zoom += event.wheelDelta/12;
　　if (zoom>0)
　　{
　　o.style.zoom=zoom+'%';
　　}
　　return false;
　　}
　　var iOriginalWidth, iOriginalHeight; //存放图片原始长度、宽度

　　//动态显示图片的长度、宽度和显示比例
　　function dispCurrentSize()
　　{
　　var zoom = document.all.idImg.style.zoom;
　　zoom = eval(zoom.substring(0, zoom.length-1));
　　var iWidth = zoom * document.all.idImg.width;
　　var iHeight = zoom * document.all.idImg.height;
　　document.all.idPicCurrentSize.innerHTML = "图片当前大小长：" + Math.ceil(iWidth/100)
+ " 高：" + Math.ceil(iHeight/100) + "　　显示比例：" + Math.ceil((iWidth
/ iOriginalWidth)) + "%";

　　}
　　//显示图片原始长度、宽度

　　function dispOriginalSize(oImg)
　　{
　　iOriginalWidth = oImg.width;
　　iOriginalHeight = oImg.height;
　　document.all.idPicOriginalSize.innerHTML = "图片原始大小长：" + iOriginalWidth
+ " 高：" + iOriginalHeight;
　　document.all.idImg.style.zoom = "100%";
　　dispCurrentSize();
　　}
　　//-->
　　</SCRIPT>

　　</HEAD>
　　<BODY>
　　<img src="http://www.hcny.gov.cn/images/logo.gif" ID="idImg"
onLoad="dispOriginalSize(this);" onMouseWheel="zoomObj(this);dispCurrentSize();">

　　</BODY>

　　</HTML>

2)鼠标滚动缩放图片

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用滚轮实现图片缩放</title>
</head>
<script language="JavaScript">
function zoomimg(img){
//img.style.zoom获取img对象的缩放比例，并转为十进制整数
var zoom = parseInt(img.style.zoom,10);
if (isNaN(zoom)){ //当zoom非数字时zoom默认为100％
zoom = 100;
}
//event.wheelDelta滚轮移动量上移＋120，下移－120；显示比例每次增减10％
zoom += event.wheelDelta / 12;
//当zoom大于10％时重新设置显示比例
if (zoom>10) img.style.zoom = zoom + "%";
return false;
}
</script>
<body>
<br>

<img src="1.jpg" onmousewheel="return zoomimg(this);">
</body>
</html>

3)滑块控制缩放(为了保持思路,修改没完全)

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Prozent  255</title>
</head>

<body>
<style>.drag {
CURSOR: hand; POSITION: relative
}
</style>
<script language=JavaScript1.2>
// Slider script by Ronald H. Jankowsky (http://rj-edv-beratung.de), parts of
//code (draglayer, movelayer) by DynamicDrive.com
// This script is free for use, please leave this notice intact
var sPosition;
var showPerc=100;
document.οnmοusedοwn=dragLayer;
document.οnmοuseup=new Function("dragMe=false")
var Color= new Array();
Color[0] = "00";
Color[1] = "11";
Color[2] = "22";
Color[3] = "33";
Color[4] = "44";
Color[5] = "55";
Color[6] = "66";
Color[7] = "77";
Color[8] = "88";
Color[9] = "99";
Color[10] = "100";
Color[11] = "110";
Color[12] = "120";
Color[13] = "130";
Color[14] = "140";
Color[15] = "150";
// 通过滑块改变背景颜色
var rVal,gVal,bVal, cCol
function chgBg() {
cCol = document.bgColor;
rVal=cCol.substr(1,2); gVal=cCol.substr(3,2); bVal=cCol.substr(5,2);
ind = Math.round(showPerc/16); if (ind < 0) ind = 0; if (ind > 15) ind=15;
// 假如有更多的手柄需要添更多
if (kObj.id =="knobImg2") document.all.cao.width=Color[ind];//就是这里了
}
//拖动引擎
// explicitely indicated
var dragMe=false, kObj, yPos,direction

function moveLayer() {
if (event.button==1 && dragMe) {
oldY = kObj.style.pixelTop; kObj.style.pixelTop=temp2+event.clientY-yPos;
// 限制拖动的范围
if (kObj.style.pixelTop > oldY) direction="dn"; else direction="up";
if (kObj.style.pixelTop < 2 && direction=="up") {kObj.style.pixelTop=2;
direction="dn";}
if (kObj.style.pixelTop > 102 && direction=="dn") {kObj.style.pixelTop=102;
direction="up";}
// Set working variable 'showPerc' depending on 100 or 250 scaling
sPosition=kObj.style.pixelTop; showPerc = (perCent[0].checked) ? sPosition-2
: (sPosition-2)/2*5;
// The following line should be replaced by the function-call with the actual
//task to perform
chgBg();
return false; }
}

function dragLayer() {
if (!document.all) return;
if (event.srcElement.className=="drag") {dragMe=true; kObj=event.srcElement;
temp2=kObj.style.pixelTop; yPos=event.clientY; document.οnmοusemοve=moveLayer;
}
}
</script>
<img border="0" src="logo01.gif" width="778" height="120" id="cao"></p>
<div id=outerLyr2
style="Z-INDEX: 1; LEFT: 300px; WIDTH: 23px; POSITION: absolute; TOP: 111px;
HEIGHT: 120px; BACKGROUND-COLOR: #000000"><img
class=drag id=knobImg2
style="Z-INDEX: 3; LEFT: 2px; WIDTH: 20px; TOP: 100px; HEIGHT: 17px"

src="../tempimgs/js/knob.jpeg">
<div id=innerLyr2
style="Z-INDEX: 2; LEFT: 2px; WIDTH: 20px; POSITION: absolute; TOP: 2px;
HEIGHT: 117px; BACKGROUND-COLOR: #777777">
<div id=barLyr2
style="Z-INDEX: 1; LEFT: 9px; WIDTH: 2px; POSITION: absolute; TOP: 5px;
HEIGHT: 110px; BACKGROUND-COLOR: #000000"></div>
</div>

</div>
<p>
<input
type=radio value=false name=perCent>
Prozent
<input type=radio CHECKED value=true
name=perCent>
255
</body>