在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屋！
