在Javascript中剪辑 [英] Clipping in Javascript
问题描述
我想在网页上显示一张照片的剪辑部分,并且
将其移到页面上和/或更改剪裁到另一个部分
的图片。我在页面正文中显示图片
使用
< div id = div1 style =" position:absolute;顶部:200;左:400;宽度:200;
身高:200;的z-index:1; background-image:url(ole01.jpg);
clip:rect(0,150,50,100)">< / div>
显示图片的正确剪裁部分位于正确的
位置。我尝试在脑袋中使用以下Javascript代码
更改图片剪辑的位置:
< script language =" JavaScript"> ;
<! -
函数Dochange(ident){
var ref = document.getElementById(ident);
ref.style.left = 300;
}
- >
< / script>}
以及表格中的以下按钮:
< input type =" submit"名称= QUOT;变化与QUOT;值= QUOT;变化与QUOT; size = 20
onClick =" Dochange(''div1'')">
单击按钮时会访问代码(I使用警报
检查此项),但截断的
图片的位置没有任何反应,也没有出现错误信息。有人可以帮助我吗?
当我开始工作时,我想在Javascript中添加任何必要的声明
来更改剪辑区域。会不会像
那样
ref.style.clip:rect(0,50,50,0);
或什么?
谢谢。
Doug van Vianen
co ***** @ shaw.ca
推荐答案
< br $>
Doug van Vianen写道:
Doug van Vianen wrote:
< div id = div1 style =" position:absolute;顶部:200;左:400;宽度:200;
高度:200;的z-index:1; background-image:url(ole01.jpg);
剪辑:rect(0,150,50,100)">< / div>
尝试使用
top:200px;
left:400px;
依此类推有适当的CSS,然后尝试
ref.style.left = 300;
ref.style.left =''300px'';
这里和
<输入类型= [提交"名称= QUOT;变化与QUOT;值= QUOT;变化与QUOT; size = 20
onClick =" Dochange(''div1'')">
<div id=div1 style="position:absolute; top:200; left:400; width:200;
height:200; z-index:1; background-image:url(ole01.jpg);
clip:rect(0,150,50,100)"></div>
Try with
top: 200px;
left: 400px;
and so on to have proper CSS and then try
ref.style.left=300;
ref.style.left = ''300px'';
here and
<input type="submit" name="Change" value="Change" size=20
onClick="Dochange(''div1'')">
< input type =" button" onClick =" Dochange(''div1'')"
这里
-
Martin Honnen
http://JavaScript.FAQTs.com/
Doug van Vianen写道:
Doug van Vianen wrote:
我试图在网页上显示图片的剪裁部分并且
在页面上移动它和/或将剪辑更改为图片的另一部分。我用
< div id = div1 style =" position:absolute;来显示页面正文中的图片。顶部:200;左:400;宽度:200;
高度:200;的z-index:1; background-image:url(ole01.jpg);
剪辑:rect(0,150,50,100)">< / div>
这显示了图片的相应剪裁部分正确的位置。我尝试在头部使用以下Javascript代码来改变图片剪辑的位置:
< script language =" JavaScript">
<! -
function Dochange(ident){
var ref = document.getElementById(ident);
ref.style.left = 300;
}
- > ;
< / script>}
和表格中的以下按钮:
< input type =" submit"名称= QUOT;变化与QUOT;值= QUOT;变化与QUOT; size = 20
onClick =" Dochange(''div1'')">
单击按钮时会访问代码(我使用了警告
检查这个),但截图的
图片的位置没有任何反应,也没有出现错误信息。有人可以帮助我吗?
当我开始工作时,我想在Javascript中添加任何必要的声明来改变剪辑区域。它会是什么样的
ref.style.clip:rect(0,50,50,0);
或者是什么?
<谢谢。
Doug van Vianen
co*****@shaw.ca
这是一个CSS属性,就像其他任何一样,虽然它的操纵
可能会有点粘组合四个剪辑值。
1)获取元素参考
2)指定style.clip属性
3 )以组合格式为其分配一个新的字符串值
var el;
if(el = document.getElementById(''div1''))
el.style.clip =''rect(40px,auto,auto,40px)'';
使用''auto''返回特定的剪辑值完全显示
(未剪辑)。
关于Netscape 4的少数几个可爱的东西之一是它正在解析
将单独的剪辑值转换为读/写属性。 IE为每个剪辑公开
单独的.currentStyle属性,但它们是只读的。
< script type =" text / javascript"> ["语言"属性已弃用]
It''s a CSS property, like any other, although the manipulation of it
can get a bit sticky as the four clip values are combined.
1) Get the element reference
2) Specify the style.clip property
3) Assign it a new string value in the combined format
var el;
if (el = document.getElementById(''div1''))
el.style.clip = ''rect(40px,auto,auto,40px)'';
Use ''auto'' to return that specific clip value to fully revealed
(unclipped).
One of the few lovable things about Netscape 4 is it''s parsing out of
the separate clip values into read/write properties. IE exposes
separate .currentStyle properties for each clip, but they''re read-only.
<script type="text/javascript"> ["language" attribute deprecated]
您好,
谢谢。它现在很棒!
Doug van Vianen
co ***** @ shaw.ca
" Doug van Vianen" <共***** @ shaw.ca>在消息中写道
news:Z4dHd.112937
Hi,
Thanks. It now works great!
Doug van Vianen
co*****@shaw.ca
"Doug van Vianen" <co*****@shaw.ca> wrote in message
news:Z4dHd.112937
这篇关于在Javascript中剪辑的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!