怎样实现下面效果? - 编程论坛

5 回复

zsl55662007-09-28 09:32

用FLASH做，就比较简单。。

qyf8341002007-09-28 09:33

但是我要动态连接数据库图片

hmhz2007-09-28 09:34

<!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>Map Image</title>
<style type="text/css">
* {margin:0px auto;padding:0px;text-align:center;}
* {font-size:9pt;font-family:Arial;}
body {margin-top:20px;}
body{-moz-user-select: none;-khtml-user-select: none;user-select: none;}
div {position:relative;width:400px;height:400px;}
font {cursor:default;color:red;font-weight:bold;line-height:16px;border:solid 1px red;}
/* Img Show Zone */
#imgShow {border:solid 1px red;width:400px;height:400px;overflow:hidden;}
#imgShow img {border:none;}
/* Control Bar Style */
#ctlBar {position:absolute;bottom:0px;right:0px;width:140px;height:140px;border:solid 1px red;overflow:hidden;}
#ctlBar[id] {bottom:-2px;right:-2px;}
.ctlTop {width:100%;height:15%;overflow:hidden;cursor:default;color:snow;}
.ctlBottom {width:100%;height:15%;clear:both;overflow:hidden;}
.ctlLeft {width:15%;height:70%;float:left;overflow:hidden;color:orange;cursor:default;font-weight:bold;}
.ctlRight {width:15%;height:70%;float:right;overflow:hidden;}
#ctlBar img {border:none;display:block;}
.ctlBottom a {color:snow;text-decoration:none;float:left;font-size:7pt;margin-top:5px;margin-left:2px;margin-right:2px;}
* html .ctlBottom a {margin-left:0px;margin-right:0px;}
.ctlBottom a:hover {color:#3cf;}
#arrUp {position:absolute;left:0px;margin:2px;width:16px;height:16px;}
#arrDown {position:absolute;bottom:0px;left:0px;margin:2px;width:16px;height:16px;}
#arrLeft {float:left;margin:2px;width:16px;height:16px;}
#arrRight {float:right;margin:2px;width:16px;height:16px;}
.ctlTop span {font-weight:bold;font-family:Arial;color:red;float:right;padding:1px 3px 1px 3px;cursor:pointer;}
#ctlCenter {width:70%;height:70%;float:left;overflow:hidden;}
#dragDiv {position:absolute;border:solid 1px blue;height:80px;width:80px;opacity:0.5;background:orange;}
* html #dragDiv {filter: progid:DXImageTransform.Microsoft.Alpha (opacity=50);}
#pre {position:relative;}
/* top:0px;left:0px; */
/* Hide ctl bar */
#ctlHide {position:absolute;right:-1px;bottom:-1px;padding:1px 3px 1px 3px;background-color:red;color:snow;cursor:pointer;display:none;font-weight:bold;}
* html #ctlHide {right:0px;bottom:0px;}
/* Test Other Parts */
#test {margin-top:10px;}
#test img{width:120px;height:120px;margin:5px 5px;padding:0px;border:solid 1px dodgerblue;cursor:pointer;}
</style>
<script type="text/javascript">
var p=1;
var prep;
var imgp;
var px;
var py;
var msx;
var msy;
var tmpx;
var tmpy;
var dx=0;
var dy=0;
var dragfg=false;
function pDrag(e){
if(dragfg){
var pcon=document.getElementById("ctlCenter");
var pdiv=document.getElementById("dragDiv");
var pimg=document.getElementById("pre");
var dltx=e.clientX-tmpx;
var dlty=e.clientY-tmpy;
var marl=(pcon.clientWidth-pimg.width)/2;
var marr=marl+pimg.width-pdiv.clientWidth;
var mart=(pcon.clientHeight-pimg.height)/2;
var marb=mart+pimg.height-pdiv.clientHeight;
var divt=parseInt(pdiv.style.top);
var divl=parseInt(pdiv.style.left);
var demox=divl+dltx;
var demoy=divt+dlty;
if((demox>=marl) && (demox<=marr)) pdiv.style.left=demox+"px";
if((demoy>=mart) && (demoy<=marb)) pdiv.style.top=demoy+"px";
tmpx=e.clientX;
tmpy=e.clientY;
//return false;
}
}
function sDrag(e)
{
var temp = (typeof e.target != "undefined")?e.target:e.srcElement;
dx=0;
dy=0;
if(!dragfg) {
msx=e.clientX;
msy=e.clientY;
}
if(temp.id=="dragDiv"){
dragfg=true;
px=(typeof(e.offsetX)=="undefined")?e.layerX-2:e.offsetX;
py=(typeof(e.offsetY)=="undefined")?e.layerY-2:e.offsetY;
tmpx=e.clientX;
tmpy=e.clientY;
}
}
function eDrag(e){
dragfg=false;
var scrLeft=parseInt(document.getElementById("dragDiv").style.left)-(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2;
var scrTop=parseInt(document.getElementById("dragDiv").style.top)-(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2;
var ppp=document.getElementById("imgShow").clientWidth/document.getElementById("dragDiv").clientWidth;
o.scrollTop=scrTop*ppp;
o.scrollLeft=scrLeft*ppp;
}
</script>
</head>
<body>
<div>
<div id="imgShow">
<img id="pic" src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" alt="Oops" />
</div>
<div id="ctlBar">
<div class="ctlTop"><span onclick="document.getElementById('ctlBar').style.display='none';document.getElementById('ctlHide').style.display='block';">Hide</span>Design by saxon</div>
<div class="ctlLeft"><br />T<br/>O<br/>O<br/>L<br/>S</div>
<div class="ctlRight">
<font id="arrUp" onmouseover="imgScroll('up');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">↑</font>
<font id="arrDown" onmouseover="imgScroll('down');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">↓</font>
</div>
<div id="ctlCenter"><img id="pre" src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" alt="Oops" />
<div id="dragDiv" onmousedown="sDrag(event);" onmousemove="pDrag(event);" onmouseup="eDrag(event);" onmouseout="eDrag(event);"></div>
</div>
<div class="ctlBottom">
<font id="arrLeft" onmouseover="imgScroll('left');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">←</font>
<a href="mailto:sjx.saxon@gmail.com">sjx.saxon@gmail.com</a>
<font id="arrRight" onmouseover="imgScroll('right');" onmouseout="mvStop();" onmousedown="sp=sp*2;" onmouseup="sp=sp/2;">→</font>
</div>
</div>
<span id="ctlHide" onclick="document.getElementById('ctlBar').style.display='block';document.getElementById('ctlHide').style.display='none';">Display</span>
</div>
<p id="test">
<img src="http://img.ea3w.com/article/0/420/likNolm87uUbI.jpg" alt="Oops" onclick="imgChg(this.src)" />
<img src="http://www.yczhang.com/upload/200606021857377727.jpg" alt="Oops" onclick="imgChg(this.src)" />
<img src="http://desktop.yesky.com/picupload/20040624/1641151.jpg" alt="Oops" onclick="imgChg(this.src)" />
<img src="http://image2.sina.com.cn/gm/o/n/2005-03-23/U508P115T9D91113F168DT20050323104505.JPG" alt="Oops" onclick="imgChg(this.src)" />
</p>
<p>本地浏览IE下有效<input type="file" id="viewLocal" /><input type="button" value="Change Pic" onclick="chkValue('viewLocal');" /></p>
<p>URL图片地址浏览<input type="text" id="viewOnline" /><input type="button" value="Change Pic" onclick="chkValue('viewOnline');" /></p>
<script type="text/javascript">
function imgChg(s){
if(document.getElementById('ctlBar').style.display=="none"){
document.getElementById('ctlBar').style.display="block";
document.getElementById('ctlHide').style.display="none";
var flag=true;
}
var newImg=document.createElement("img");
newImg.id="pre";
newImg.alt="Oops";
newImg.onmouseout="eDrag(event);"
newImg.src=s;
document.getElementById("pic").src=s;
document.getElementById("ctlCenter").replaceChild(newImg,document.getElementById("pre"));
preImgInit();
if(flag){
document.getElementById('ctlBar').style.display="none";
document.getElementById('ctlHide').style.display="block";
}
o.scrollTop=0;
o.scrollLeft=0;
}
function chkValue(ob)
{
var str=document.getElementById(ob).value.split('.')[document.getElementById(ob).value.split('.').length-1].toLowerCase();
if(/^jpg$|^gif$|^ico$|^png$|^bmp$/.test(str)) imgChg(document.getElementById(ob).value);
}
document.getElementById("viewOnline").value="http://image2.sina.com.cn/gm/o/n/2005-03-22/U508P115T9D90812F168DT20050322105759.jpg";
</script>
<script type="text/javascript">
var sp=5;
var tc;
function imgScroll(d){
var ptx=o.scrollLeft;
var pty=o.scrollTop;
if(tc) clearInterval(tc);
if(d=="up"){
tc=setInterval("up()",30);
}
else if(d=="down"){
tc=setInterval("down()",30);
}
else if(d=="left"){
tc=setInterval("left()",30);
}
else if(d=="right"){
tc=setInterval("right()",30);
}
else{
return alert("There must be something wrong...");
}
}
function up() {o.scrollTop -= sp;
document.getElementById("dragDiv").style.top =(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+o.scrollTop*prep+"px";}
function down() {o.scrollTop += sp;
document.getElementById("dragDiv").style.top =(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+o.scrollTop*prep+"px";}
function left() {o.scrollLeft -= sp;
document.getElementById("dragDiv").style.left =(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2+o.scrollLeft*prep+"px";}
function right() {o.scrollLeft += sp;
document.getElementById("dragDiv").style.left =(document.getElementById("ctlCenter").clientWidth-document.getElementById("pre").width)/2+o.scrollLeft*prep+"px";}
function mvStop()
{
if(tc) clearInterval(tc);
}
</script>
<script type="text/javascript">
function preImgInit(){
var imgx=document.getElementById("pre").width;
var imgy=document.getElementById("pre").height;
if(imgx==imgy)
{
document.getElementById("pre").style.width="100%";
document.getElementById("pre").style.height="100%";
prep=document.getElementById("pre").clientHeight/imgy;
imgp=document.getElementById("imgShow").clientHeight/imgy;
document.getElementById("dragDiv").style.width=imgp*document.getElementById("pre").clientHeight+"px";
document.getElementById("dragDiv").style.height=imgp*document.getElementById("pre").clientHeight+"px";
document.getElementById("dragDiv").style.left="0px";
document.getElementById("dragDiv").style.top="0px";
}
else if(imgx>imgy)
{
document.getElementById("pre").style.width="100%";
document.getElementById("pre").style.height=imgy/imgx*100+"%";
prep=document.getElementById("pre").clientWidth/imgx;
imgp=document.getElementById("imgShow").clientWidth/imgx;
document.getElementById("dragDiv").style.width=imgp*document.getElementById("pre").clientWidth+"px";
document.getElementById("dragDiv").style.height=imgp*document.getElementById("pre").clientWidth+"px";
document.getElementById("dragDiv").style.left="0px";
document.getElementById("dragDiv").style.top=(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+"px";
document.getElementById("pre").style.top=(document.getElementById("ctlCenter").clientHeight-document.getElementById("pre").height)/2+"px";
}
else
{
document.getElementById("pre").style.height="100%";
document.getElementById("pre").style.width=imgx/imgy*100+"%";
prep=document.getElementById("pre").clientHeight/imgy;
imgp=document.getElementById("imgShow").clientHeight/imgy;
document.getElementById("dragDiv").style.width=imgp*document.getElementById("pre").clientHeight+"px";
document.getElementById("dragDiv").style.height=imgp*document.getElementById("pre").clientHeight+"px";
document.getElementById("dragDiv").style.top="0px";
document.getElementById("dragDiv").style.left=(document.getElementById("pre").offsetLeft-1)+"px";
}
}
document.body.onselectstart=function(){return false};
preImgInit();
var o=document.getElementById("imgShow");
</script>
</body>
</html>

[此贴子已经被作者于2007-9-28 9:37:25编辑过]

hmhz2007-09-28 10:00

还有一种是使用 CSS 制作的，效果不错

[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test div</title>
<style>
body{ margin:0; padding:0; font-size:12px; background: #333333; line-height:1.7; font-family:Verdana, "宋体"; overflow:hidden }
#info{ width:600px; background: #666666; margin-left:auto; margin-right:auto; text-align:center; border:1px solid #FFFFFF; height:450px; margin-top:20px;}
h3{ margin:30px 0 0 0; color:#CC0000; font-size:12px;color:#FFF}
span{visibility:hidden; position:absolute; overflow:hidden;}
ul,li{ list-style:none; margin:0; padding:0;}
a:active,a:hover{ cursor:pointer}
a:hover span,a:active span{position:absolute; top:90px; z-index:20px; visibility: visible; margin-left:-500px;}
#info img{ width:400px; height:280px; border:7px solid #FFFFFF}
#zs{ height:450px; overflow: auto; width:140px; float:right; margin-top:20px; margin-bottom:50px;}
.z{ width:80px; height:56px;display:block; border:1px solid #FFFFFF; margin:4px 0 4px 25px;color:#FFF}
.b1{ background:url(http://www.zishu.cn/images/b1.jpg)}
.b2{ background:url(http://www.zishu.cn/images/b2.jpg)}
.b3{ background:url(http://www.zishu.cn/images/b3.jpg)}
.b4{ background:url(http://www.zishu.cn/images/b4.jpg)}
.b5{ background:url(http://www.zishu.cn/images/b5.jpg)}
.b6{ background:url(http://www.zishu.cn/images/b6.jpg)}
</style>
</head>
<body>
<div id="info">
<div id="zs">
<ul>
<li><a href="#" class="b1 z" target="_blank"><span><img src="http://www.zishu.cn/images/a1.jpg" /></span></a></li>
<li><a href="#" class="b2 z" target="_blank"><span><img src="http://www.zishu.cn/images/a2.jpg" /></span></a></li>
<li><a href="#" class="b3 z" target="_blank"><span><img src="http://www.zishu.cn/images/a3.jpg" /></span></a></li>
<li><a href="#" class="b4 z" target="_blank"><span><img src="http://www.zishu.cn/images/a4.jpg" /></span></a></li>
<li><a href="#" class="b5 z" target="_blank"><span><img src="http://www.zishu.cn/images/a5.jpg" /></span></a></li>
<li><a href="#" class="b6 z" target="_blank"><span><img src="http://www.zishu.cn/images/a6.jpg" /></span></a></li>
</ul>
</div>
</div>
</body>
</html>[/CODE]

piaoxue2007-09-28 10:09

以前我问过这个问题，也是来自于这个网站上的答案呵呵不是我的原创呀！！！贴出来学习，希望不会侵权吧嘿嘿！！
<form method="POST" name="from" action="">
<a style='CURSOR:hand' onmouseover='showmenu(event,"<img name=LogoPic onload=\"javascript:if(this.width>200)this.style.width=200;\">");document.images.LogoPic.src=document.from.Logo.value;' onmouseout='delayhidemenu()' >[预览]</a>
<div class="menuskin" id="popmenu" onmouseover="clearhidemenu();highlightmenu(event,'on')" onmouseout="highlightmenu(event,'off');dynamichide(event)" style="Z-index:100"></div>
<style>.menuskin {Border: #666666 1px solid; Visibility: hidden; Position: absolute; Font: 12px Verdana; Background-Color:#EFEFEF; background-repeat : repeat-y;}</style>
<input type="hidden" name="Logo" value="https://bbs.bc-cn.net/UploadFace/27761.jpg"></form><script language="javascript">
var menuOffX=0 //菜单距连接文字最左端距离
var menuOffY=18 //菜单距连接文字顶端距离
var fo_shadows=new Array()
var linkset=new Array()
////No need to edit beyond here
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var ns6=document.getElementById&&!document.all
var ns4=document.layers
function openScript(url, width, height){
var Win = window.open(url,"openScript",'width=' + width + ',height=' + height + ',resizable=1,scrollbars=yes,menubar=no,status=no' );
}
function showmenu(e,vmenu,mod){
if (!document.all&&!document.getElementById&&!document.layers)
return
which=vmenu
clearhidemenu()
ie_clearshadow()
menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""
menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj

if (ie4||ns6)
menuobj.innerHTML=which
else{
menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=165 onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+which+'</layer>')
menuobj.document.close()
}
menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height

eventX=ie4? event.clientX : ns6? e.clientX : e.x
eventY=ie4? event.clientY : ns6? e.clientY : e.y

var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY
if (rightedge<menuobj.contentwidth)
menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth+menuOffX : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
else
menuobj.thestyle.left=ie4? ie_x(event.srcElement)+menuOffX : ns6? window.pageXOffset+eventX : eventX

if (bottomedge<menuobj.contentheight&&mod!=0)
menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight-event.offsetY+menuOffY-23 : ns6? window.pageYOffset+eventY-menuobj.contentheight-10 : eventY-menuobj.contentheight
else
menuobj.thestyle.top=ie4? ie_y(event.srcElement)+menuOffY : ns6? window.pageYOffset+eventY+10 : eventY
menuobj.thestyle.visibility="visible"
ie_dropshadow(menuobj,"#999999",3)
return false
}
function ie_y(e){
var t=e.offsetTop;
while(e=e.offsetParent){
t+=e.offsetTop;
}
return t;
}
function ie_x(e){
var l=e.offsetLeft;
while(e=e.offsetParent){
l+=e.offsetLeft;
}
return l;
}
function ie_dropshadow(el, color, size)
{
var i;
for (i=size; i>0; i--)
{
var rect = document.createElement('div');
var rs = rect.style
rs.position = 'absolute';
rs.left = (el.style.posLeft + i) + 'px';
rs.top = (el.style.posTop + i) + 'px';
rs.width = el.offsetWidth + 'px';
rs.height = el.offsetHeight + 'px';
rs.zIndex = el.style.zIndex - i;
rs.backgroundColor = color;
var opacity = 1 - i / (i + 1);
rs.filter = 'alpha(opacity=' + (100 * opacity) + ')';
//el.insertAdjacentElement('afterEnd', rect);
fo_shadows[fo_shadows.length] = rect;
}
}
function ie_clearshadow()
{
for(var i=0;i<fo_shadows.length;i++)
{
if (fo_shadows[i])
fo_shadows[i].style.display="none"
}
fo_shadows=new Array();
}function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function hidemenu(){
if (window.menuobj)
menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"
ie_clearshadow()
}
function dynamichide(e){
if (ie4&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}
function delayhidemenu(){
if (ie4||ns6||ns4)
delayhide=setTimeout("hidemenu()",500)
}
function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}
function highlightmenu(e,state){
if (document.all)
source_el=event.srcElement
else if (document.getElementById)
source_el=e.target
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
else{
while(source_el.id!="popmenu"){
source_el=document.getElementById? source_el.parentNode : source_el.parentElement
if (source_el.className=="menuitems"){
source_el.id=(state=="on")? "mouseoverstyle" : ""
}
}
}
}
</script>