js图片九宫格拉伸_jS控制图片的放大和缩小

㈠ javascript 实现图片自动适应DIV的大小并进行拉伸,使图片不重复显示

楼主，这个我接触多了你试试我的.可以的话求采纳。
css:
.div1{width:100px;}//这个随意设置
.div1 img{width:100%;}
html:
<div class="div1"><img src="我的图片" /></div>

㈡怎么用js实现图片的变形

这个用css就可以解决，当然css能解决的js基本都能解决。
首先css：

左边图片设置关键属性（其他属性你自己补充）：
①透明度：filter: Alpha(Opacity=50);opacity:0.5;兼容火狐和IE，
②Z轴顺序（要小于右边图像）：z-index: 1;也可以不设置；
③定位，固定大小：position: relative(或absolute); left: 100px; top:100px;width:100px;height:80px;

右边图片设置关键css属性（其他属性你自己补充）：
①Z轴顺序（要保证大于左边图像的Z轴顺序）：z-index: 2;
②定位，固定大小：position: relative(或absolute);left: 40px; top:100px;width:100px;height:80px;

js实现的话就稍微复杂一点，如果你懂jQuery也许还能容易点，所以就不写了，太多代码，
因为css就可以解决，那么你就用css实现吧。

至于你是否要实现矩形图像变成梯形图片，我肯定的说也是可以做到的，
就比如：flip.js，这是个翻牌效果，他在翻牌的时候就是矩形到梯形，梯形回矩形。

㈢如何用js实现图片逐渐拉远的效果

<!DOCTYPEHTML>
<htmllang="en">
<head>
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1"/>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>test</title>
<linkrel="stylesheet"href="css.css"type="text/css"media="screen">
</head>
<body>
<styletype="text/css">
.top{border:1pxsolidred;overflow:hidden;float:left;text-align:center;position:relative;width:500px;height:300px;}
.topimg{width:550px;height:350px;position:absolute;top:50%;margin-top:-175px;left:50%;margin-left:-275px;animation:gogogo5sinfinite;/*SafariandChrome*/-webkit-animation:gogogo5sinfinite;-webkit-animation-timing-function:linear;}
/*css3animation,*/
@keyframesgogogo
{
from{width:550px;height:350px;position:absolute;top:50%;margin-top:-175px;left:50%;margin-left:-275px;}
to{width:500px;height:300px;position:absolute;top:50%;margin-top:-150px;left:50%;margin-left:-250px;}
}
/**上面所有css中，margin-top=height/2,margin-left=width/2**/
</style>
<div></div>
<divclass='top'><imgsrc='http://lifestore.nero-hair.jp/wp-content/themes/neroHairAndLifeStore/assets/images/top/top-vi-image2.jpg'></div>
<div>上面代码中css的animation放在.topimg{}中，切换图片可以考虑修改=top形式</div>
<div>仅供参考</div>
</body>
</html>

㈣原生JS，实现图片可拖拽，并且移动四个角和四条变能够自由变换图片大小

见证奇迹的时刻到了：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<style>
*{
margin:0;
padding:0
}

.box{
position:absolute;
top:100px;
left:100px;
}

/*四边*/
.box.t,
.box.b,
.box.l,
.box.r{
position:absolute;
z-index:1;
background:#666;
}

.box.l,
.box.r{
width:10px;
height:100%;
cursor:col-resize;
}

.box.t,
.box.b{
width:100%;
height:10px;
cursor:row-resize;
}

.box.t{
top:0;
}

.box.b{
bottom:0;
}

.box.l{
left:0;
}

.box.r{
right:0;
}

/*四角*/
.box.tl,
.box.bl,
.box.br,
.box.tr{
width:20px;
height:20px;
position:absolute;
background:#CCC;
z-index:2;
cursor:nwse-resize
}

.box.tl,
.box.bl{
left:-5px;
}

.box.tr,
.box.br{
right:-5px;
}

.box.br,
.box.bl{
bottom:-5px;
}

.box.tl,
.box.tr{
top:-5px;
}

.box.tr,
.box.bl{
cursor:nesw-resize;
}

/*图片*/
img{
width:100%;
height:100%;
}
</style>
<script>

window.onload=function(){
varoDiv=document.getElementsByTagName('div')[0];
oDiv.style.width='500px';
varaSpan=oDiv.getElementsByTagName('span');
for(vari=0;i<aSpan.length;i++){
dragFn(aSpan[i]);
}

functiondragFn(obj){
obj.onmousedown=function(ev){
varoEv=ev||event;

varoldWidth=oDiv.offsetWidth;
varoldHeight=oDiv.offsetHeight;
varoldX=oEv.clientX;
varoldY=oEv.clientY;
varoldLeft=oDiv.offsetLeft;
varoldTop=oDiv.offsetTop;

document.onmousemove=function(ev){
varoEv=ev||event;

if(obj.className=='tl'){
oDiv.style.width=oldWidth-(oEv.clientX-oldX)+'px';
oDiv.style.height=oldHeight-(oEv.clientY-oldY)+'px';
oDiv.style.left=oldLeft+(oEv.clientX-oldX)+'px';
oDiv.style.top=oldTop+(oEv.clientY-oldY)+'px';
}
elseif(obj.className=='bl'){
oDiv.style.width=oldWidth-(oEv.clientX-oldX)+'px';
oDiv.style.height=oldHeight+(oEv.clientY-oldY)+'px';
oDiv.style.left=oldLeft+(oEv.clientX-oldX)+'px';
oDiv.style.bottom=oldTop+(oEv.clientY+oldY)+'px';
}
elseif(obj.className=='tr'){
oDiv.style.width=oldWidth+(oEv.clientX-oldX)+'px';
oDiv.style.height=oldHeight-(oEv.clientY-oldY)+'px';
oDiv.style.right=oldLeft-(oEv.clientX-oldX)+'px';
oDiv.style.top=oldTop+(oEv.clientY-oldY)+'px';
}
elseif(obj.className=='br'){
oDiv.style.width=oldWidth+(oEv.clientX-oldX)+'px';
oDiv.style.height=oldHeight+(oEv.clientY-oldY)+'px';
oDiv.style.right=oldLeft-(oEv.clientX-oldX)+'px';
oDiv.style.bottom=oldTop+(oEv.clientY+oldY)+'px';
}
elseif(obj.className=='t'){
oDiv.style.height=oldHeight-(oEv.clientY-oldY)+'px';
oDiv.style.top=oldTop+(oEv.clientY-oldY)+'px';
}
elseif(obj.className=='b'){
oDiv.style.height=oldHeight+(oEv.clientY-oldY)+'px';
oDiv.style.bottom=oldTop-(oEv.clientY+oldY)+'px';
}
elseif(obj.className=='l'){
oDiv.style.height=oldHeight+'px';
oDiv.style.width=oldWidth-(oEv.clientX-oldX)+'px';
oDiv.style.left=oldLeft+(oEv.clientX-oldX)+'px';
}
elseif(obj.className=='r'){
oDiv.style.height=oldHeight+'px';
oDiv.style.width=oldWidth+(oEv.clientX-oldX)+'px';
oDiv.style.right=oldLeft-(oEv.clientX-oldX)+'px';
}
};

document.onmouseup=function(){
document.onmousemove=null;
};
returnfalse;
};
}

};
</script>
</head>

<body>
<divclass="box">
<spanclass="r"></span>
<spanclass="l"></span>
<spanclass="t"></span>
<spanclass="b"></span>
<spanclass="br"></span>
<spanclass="bl"></span>
<spanclass="tr"></span>
<spanclass="tl"></span>
<imgsrc="https://gss0.bdstatic.com/70cFsjip0QIZ8tyhnq/img/iknow/730-350-0.jpg">
</div>
</body>
</html>

㈤ jS控制图片的放大和缩小

用js控制图片额大小。主要是修改图片的宽度和高度。下面是简单的代码实专现：

HTML 代码：

<imgsrc='../1.jgp'id='img'/>

这个时候img的图属片自身是多大，就会显示多大。100px*100px的图。

js代码：

varoImg=document.getElementById('img');
oImg.width='50px';//当给img标签的宽度设置为50px后，高度会自动按比例缩小。
oImg.width='200px'//当给img标签的宽度设置为200px后，高度会自动按比例扩大。

导航:首页 > 编程语言 > js图片九宫格拉伸

js图片九宫格拉伸

与js图片九宫格拉伸相关的资料

友情链接