js如何设置 DIV层中的图片部分区域显示

song1650 2007-04-19 04:55:36

js如何设置 DIV层中的图片部分区域显示
其余部分显示下层内容 ,但点击非显示区域,获得的对象仍是 div层对象

...全文

2797 29 打赏收藏转发到动态举报

写回复

用AI写文章

29 条回复

切换为时间正序

请发表友善的回复…

发表回复

zhaoting736488387 2011-11-21

打赏
举报

div拖动的图片的那一部分，就把图片的那一部分显示出来
要怎样实现？

song1650 2007-04-30

打赏
举报

谢谢　　楼上的兄弟　呵呵　问题解决了
其实就是在上传的图片层上覆盖个含ＰＮＧ产品图的层
再在ＰＮＧ产品图的层上建立一个和上传的图片层相对应的　空的ＤＩＶ层
使两个层是映射的关系哈哈无论移动那个　都是两个一起移动

haishui1650 2007-04-30

打赏
举报

学习　哈哈

song1650 2007-04-23

打赏
举报

顶下
大家来指导下

BlueDestiny 2007-04-23

打赏
举报

以前写的，不用filter css实现filter，还没有写完，用样式1可用:D，图片下载完成后有效。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> - http://www.never-online.net </title>
<meta http-equiv="ImageToolbar" content="no" />
<meta name="author" content="never-online, BlueDestiny"/>
<meta name="keywords" content="never modules, Mozilla CSS, C#, .net, Reference, BlueDestiny, never-online"/>
<meta name="description" content="javascript reference, c sharp artilces"/>
<meta name="creator.name" content="never-online, BlueDestiny" />
<style type="text/css" media="all" title="Default">
.myFilterWrap { position:relative; border:1px solid #555; }
.myFiltercss { position:absolute; clip:rect(0 0 0 0); }
</style>
<script type="text/javascript">
//<![CDATA[
// http://www.never-online.net
// by never-online
var mysrc = "http://zi.csdn.net/2007.04/windows%20internal4.16.gif";

function myFilter (src, dir, isfilterin) {

if (!document.body) return false;
var cachep = new Image(); cachep.src = src;
var nDelay = 10; var strFt = "";

var wrap = document.createElement("DIV");
var image = document.createElement("IMG");
wrap.className = "myFilter";
document.body.appendChild(wrap);

image.height = cachep.height; image.width = cachep.width;
image.src = cachep.src; image.className = "myFiltercss";
wrap.appendChild(image);

function fnFt (dir) {
if (1==dir) {
return "rect("+(cnt++)+" auto auto auto)";
} else if (2==dir) {
return "rect(auto "+(cnt++)+" auto auto)";
} else if (3==dir) {
return "rect(auto auto "+(cnt++)+" auto)";
} else if (4==dir) {
return "rect(auto auto auto "+(cnt++)+")";
} else {
return "rect("+(cnt++)+" "+(cnt++)+" "+(cnt++)+" "+(cnt++)+")";
}
};

var cnt = 0; cachep.onload = function Fn () {
image.style.clip = fnFt(1);
if (cnt<=100) this._timeout=window.setTimeout(Fn, nDelay);
else window.clearTimeout(this._timeout);
};

}
//]]>
</script>
</head>

<body id="www.never-online.net">
<script type="text/javascript">
//<![CDATA[
myFilter.call(this, mysrc);
//]]>
</script>
</body>
</html>

song1650 2007-04-23

打赏
举报

帮忙啊

vxinfo 2007-04-21

打赏
举报

不会这个。

song1650 2007-04-20

打赏
举报

不要沉啊
高手帮看看

song1650 2007-04-20

打赏
举报

我现在想实现的功能是同他的
移动图片时候,
部分在编辑区域,显示图片
部分在非编辑区域,透视到底图
但是研究了好久不知道
他的编辑区域是怎么设定的?透明的层?
怎么实现图片的半边透明半边显示?

还有他能在编辑区域外选中被移出的图层对象,
那么我们添加的图片层就应当是在他的底图(产品图)的上方
添加图片层层中有我上传的图片透明度为0
不知道这个推论是不是正确的

hbhbhbhbhb1021 2007-04-20

打赏
举报

的确是哦，挺好玩的。

song1650 2007-04-20

打赏
举报

我的ＱＱ是４４７１４７７３
邮箱是 haishuizheng01@163.com

song1650 2007-04-20

打赏
举报

＂在图片上面在放了一个position为absolute的DIV＂
是不是　比如图片１.jpg做为底图，上面再在特定的区域设置一个position为absolute的DIV
能不能给个　具体的设置　示例
通过这个position为absolute的DIV　就能透视到下一个图层吗？？

song1650 2007-04-20

打赏
举报

了解了　但是以下部分不知道　怎么设计
只要图片移动到部分在编辑区域,显示图片
部分在非编辑区域,透视到底图
就是这个功能
帮我讲解下原理谢谢
新手学习中呵呵

song1650 2007-04-20

打赏
举报

我的ＱＱ是４４７１４７７３
邮箱是 haishuizheng01@163.com
msn同上
希望大家给我讲解下原理
大家共同研究学习哈哈~~~
先谢谢大家

song1650 2007-04-20

打赏
举报

对啊再请问下 div中 css或filter有没有能实现
一半透明一半显示
图片可以使用shadow滤镜吗

hbhbhbhbhb1021 2007-04-20

打赏
举报

多个的话也不会特别复杂，每添加一个生成一个组，而每个组之间是相对独立的。只是这么做的确感觉不是很好

song1650 2007-04-20

打赏
举报

你这样的图层动态处理就会很复杂啊
同时如果有多个图片添加层那逻辑就是很混乱的了
我认为他一个添加图片就是一个层

hbhbhbhbhb1021 2007-04-20

打赏
举报

给你个例子，如果带移动的比较麻烦，差不多就是JS动态操作
<div id="progress_bg" style="position:absolute;top:0px;left:0px;width: 500px; height: 100%;width:500px;background:url(http://diy.kadang.com/kadang/ecommerce/style/default/diy/images/diy_65.png);text-align:center;z-index:3;filter:alpha(Opacity=40)"></div>
<div id="progress_fg" style="position:absolute;top:0px;left:470;width: 50px; height: 20px;z-index:4;border-left:thin solid red;border-top:thin solid red;border-bottom:thin solid red">asdasd</div>
<div style="position:absolute;top:0px;left:500px;width:50px;z-index:7;border-right:thin solid red;border-top:thin solid red;border-bottom:thin solid red"> </div>
<div style="position:absolute;top:0px;left:500px;width: 100%; height: 100%;z-index:6;background-color:white"></div>

song1650 2007-04-20