图片右键菜单

　<html>
　<head>
　<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
　<meta http-equiv="imagetoolbar" content="no">
　<title>图片显示</title>
　<script language="JavaScript">
　<!--
　var width0;
　var height0;
　function initsize() {
　width0=sample.offsetWidth;
　height0=sample.offsetHeight;
　recalcposition();
　sample.style.visibility='visible';
　}
　function recalcposition()
　{
　    if ((document.body.offsetWidth-sample.offsetWidth)/2<0) {imglayer.style.left=0;}
　    else {imglayer.style.left=(document.body.offsetWidth-sample.offsetWidth)/2;}
　    if ((document.body.offsetHeight-sample.offsetHeight)/2<0) {imglayer.style.top=0;}
　    else {imglayer.style.top=(document.body.offsetHeight-sample.offsetHeight)/2;}
　    window.scrollTo(0,0);
　}
　
　var curzoom=1;
　function down() {
　if (event.button==1 && zoomvalue!=1) {
　    curzoom*=zoomvalue;
　    sample.width=width0*curzoom;
　    recalcposition();
　    }
　}
　
　function showtool() {
　tool.style.visibility='visible';
　if (document.body.scrollLeft+event.clientX+tool.offsetWidth<document.body.offsetWidth)
　    tool.style.left=document.body.scrollLeft+event.clientX;
　else
　    tool.style.left=document.body.scrollLeft+event.clientX-tool.offsetWidth;
　if (document.body.scrollTop+event.clientY+tool.offsetHeight<document.body.offsetHeight)
　    tool.style.top=document.body.scrollTop+event.clientY;
　else 
　    tool.style.top=document.body.scrollTop+event.clientY-tool.offsetHeight;
　}
　
　var toolid=new Array;
　toolid[0]='fitmode';
　toolid[1]='filtermode';
　toolid[2]='url';
　toolid[3]='extend';
　toolid[4]='home';
　toolid[5]='previous';
　toolid[6]='next';
　toolid[7]='end';
　toolid[8]='alpha1';
　toolid[9]='alpha2';
　toolid[10]='alpha3';
　toolid[11]='blur1';
　toolid[12]='blur2';
　toolid[13]='light1';
　toolid[14]='light2';
　toolid[15]='light3';
　toolid[16]='light4';
　toolid[17]='wave1';
　toolid[18]='wave2';
　toolid[19]='wave3';
　toolid[20]='favourl';
　toolid[21]='importicon';
　
　function hidetool() {
　    for (i=0;i<toolid.length;i++) {
　    if (event.srcElement.id==toolid[i]) return false;
　    }
　    tool.style.visibility='hidden';
　    tool.style.left=0;
　    tool.style.top=0;
　}
　
　var zoomvalue=2;
　function zoomin() {
　sample.style.cursor='url("images/tool_img/zoom-in.cur")';
　zoomvalue=2;
　}
　
　function zoomout() {
　sample.style.cursor='url("images/tool_img/zoom-out.cur")';
　zoomvalue=1/2;
　}
　
　function move() {
　sample.style.cursor='url("images/tool_img/drag.cur")';
　zoomvalue=1;
　}
　
　var scrollcount=0;
　var dragx;
　var dragy;
　
　var scrollarrowtop;
　
　function initdrag() {
　scrollcount=1;
　dragx=document.body.scrollLeft+event.clientX;
　dragy=document.body.scrollTop+event.clientY;
　}
　
　function startdrag() {
　if (scrollcount==1 && zoomvalue==1) {
　window.scrollBy(dragx-(document.body.scrollLeft+event.clientX),dragy-(document.body.scrollTop+event.clientY));
　dragx=document.body.scrollLeft+event.clientX;
　dragy=document.body.scrollTop+event.clientY;
　}
　}
　
　function enddrag() {
　scrollcount=0;
　}
　
　var scrollcount2=0;
　var handledx;
　var width0;
　function initdrag2() {
　scrollcount2=1;
　handledx=document.body.scrollLeft+event.clientX-tool.offsetLeft-zoomhandle.offsetLeft;
　    sample.width=width0;
　    recalcposition();
　    curzoom=1;
　}
　function startdrag2() {
　if (scrollcount2==1) {
　    if ((document.body.scrollLeft+event.clientX-handledx)>(73+tool.offsetLeft) && (document.body.scrollLeft+event.clientX-handledx)<(175+tool.offsetLeft)) {zoomhandle.style.left=document.body.scrollLeft+event.clientX-handledx-tool.offsetLeft;}
　    if ((document.body.scrollLeft+event.clientX-handledx)<(74+tool.offsetLeft)) {zoomhandle.style.left=74+tool.offsetLeft-tool.offsetLeft;}
　    if ((document.body.scrollLeft+event.clientX-handledx)>(174+tool.offsetLeft)) {zoomhandle.style.left=174+tool.offsetLeft-tool.offsetLeft;}
　//recalc curzoom
　if (zoomhandle.offsetLeft-124>-1) {
　    curzoom=Math.floor(((zoomhandle.offsetLeft-124)/10+1)*100)/100;
　    sample.width=width0*curzoom;
　    recalcposition();
　    showzoomvalue.innerHTML=Math.floor(((zoomhandle.offsetLeft-124)/10+1)*100)+'%';
　    }
　else {
　    curzoom=Math.floor(((zoomhandle.offsetLeft-124)*9/500+1)*100)/100;
　    sample.width=width0*curzoom;
　    recalcposition();
　    showzoomvalue.innerHTML=Math.floor(((zoomhandle.offsetLeft-124)*9/500+1)*100)+'%';
　    }
　}
　}
　function enddrag2() {
　scrollcount2=0;
　}
　
　function autofit(selObj) {
　fitcount=selObj.options[selObj.selectedIndex].value;
　if (fitcount=="1") {
　    curzoom2=document.body.offsetWidth/width0;
　    curzoom=document.body.offsetHeight/height0;
　    if (curzoom2<curzoom) curzoom=curzoom2;
　    sample.width=width0*curzoom;
　}
　
　if (fitcount=="2") {sample.width=width0;curzoom=1;}
　
　if (fitcount=="3") {
　    curzoom=document.body.offsetWidth/width0;
　    sample.width=width0*curzoom;}
　
　if (fitcount=="4") {
　    curzoom=document.body.offsetHeight/height0;
　    sample.width=width0*curzoom;}
　
　if (fitcount=="0") return false;
　
　    recalcposition();
　    selObj.selectedIndex=0;
　    tool.style.visibility='hidden';tool.style.left=0;tool.style.top=0;
　}
　
　function changeimg(selObj) {
　if (event.keyCode==13) {
　        for (i=0;i<imglist.length;i++) {
　        if (selObj.value==imglist[i]) return false;
　        }
　        imgid=imglist.length;
　        imglist[imgid]=selObj.value;
　    showimg();
　    tool.style.visibility='hidden';
　    selObj.value='http://';
　    }
　}
　
　function showimg() {
　if (imgid>-1 && imgid<imglist.length && sample.src!=imglist[imgid]) {
　    sample.outerHTML='<img src="'+imglist[imgid]+'" id=sample onmousedown="down();initdrag()" style="cursor:url(zoom-in.cur);visibility:hidden" onmousemove="startdrag()" onmouseup="enddrag()" onreadystatechange="initsize()">';
　    showzoomvalue.innerHTML='100%';
　    zoomhandle.style.left=124;
　    curzoom=1;
　    filterparam.innerHTML=' ';
　    }
　if (imgid<0) {imgid=0;return false;}
　if (imgid>imglist.length-1) {imgid=imglist.length-1;return false;}
　}
　
　function extendit() {
　if (extendparam.style.display=='none') {extend.style.filter='flipv()';extendparam.style.display='block';}
　else {extend.style.filter='';extendparam.style.display='none';}
　}
　
　function extendit2() {
　if (slide.style.display=='none') {extend2.style.filter='flipv()';slide.style.display='block';}
　else {extend2.style.filter='';slide.style.display='none';}
　}
　
　var imgid=0;
　var imglist=new Array;
　
　function addfilter(selObj) {
　if (selObj.options[selObj.selectedIndex].value=='alpha(') {
　        filterparam.innerHTML='Opacity <input id=alpha1 type=text value=80 size=3 onkeypress="filter_alpha()" onmouseover="this.focus();this.select()"> - <input id=alpha2 type=text value=0 size=3 onkeypress="filter_alpha()" onmouseover="this.focus();this.select()"> Style <input id=alpha3 type=text value=2 size=1 onkeypress="filter_alpha()" onmouseover="this.focus();this.select()">';
　        sample.style.filter='alpha('+'opacity='+alpha1.value+',finishopacity='+alpha2.value+',style='+alpha3.value+')';
　        }
　if (selObj.options[selObj.selectedIndex].value=='blur(') {
　        filterparam.innerHTML='Direction <input id=blur1 type=text value=45 size=3 onkeypress="filter_blur()" onmouseover="this.focus();this.select()"> Strength <input id=blur2 type=text value=5 size=3 onkeypress="filter_blur()" onmouseover="this.focus();this.select()">';
　        sample.style.filter='blur('+'add=0,direction='+blur1.value+',strength='+blur2.value+')';
　        }
　if (selObj.options[selObj.selectedIndex].value=='light(') {
　        filterparam.innerHTML='RGB <input id=light1 type=text value=255 size=2 onkeypress="filter_light()" onmouseover="this.focus();this.select()"> <input id=light2 type=text value=0 size=2 onkeypress="filter_light()" onmouseover="this.focus();this.select()"> <input id=light3 type=text value=0 size=2 onkeypress="filter_light()" onmouseover="this.focus();this.select()"> Strength <input id=light4 type=text value=20 size=3 onkeypress="filter_light()" onmouseover="this.focus();this.select()">';
　        sample.style.filter='light()';
　        sample.filters[0].addCone(0,0,1,sample.offsetWidth,sample.offsetHeight,light1.value,light2.value,light3.value,light4.value,90);
　        }
　if (selObj.options[selObj.selectedIndex].value=='wave(') {
　        filterparam.innerHTML='Phase <input id=wave1 type=text value=4 size=2 onkeypress="filter_wave()" onmouseover="this.focus();this.select()"> Freq <input id=wave2 type=text value=5 size=2 onkeypress="filter_wave()" onmouseover="this.focus();this.select()"> Strength <input id=wave3 type=text value=2 size=3 onkeypress="filter_wave()" onmouseover="this.focus();this.select()">';
　        sample.style.filter='wave(Add=0, Phase='+wave1.value+',Freq='+wave2.value+',LightStrength="5",Strength='+wave3.value+')';
　        }
　if (selObj.options[selObj.selectedIndex].value=='fliph(' || selObj.options[selObj.selectedIndex].value=='flipv(' || selObj.options[selObj.selectedIndex].value=='invert(' || selObj.options[selObj.selectedIndex].value=='gray(' || selObj.options[selObj.selectedIndex].value=='xray(') {
　        filterparam.innerHTML=' ';
　        sample.style.filter=selObj.options[selObj.selectedIndex].value+')';
　        }
　if (selObj.options[selObj.selectedIndex].value=='none') {
　    sample.style.filter='';
　    filterparam.innerHTML=' ';}
　selObj.selectedIndex=0;
　}
　
　function filter_alpha() {
　if (event.keyCode==13) {
　    sample.style.filter='alpha('+'opacity='+alpha1.value+',finishopacity='+alpha2.value+',style='+alpha3.value+')';
　    }
　}
　
　function filter_blur() {
　if (event.keyCode==13) {
　    sample.style.filter='blur('+'add=0,direction='+blur1.value+',strength='+blur2.value+')';
　    }
　}
　
　function filter_light() {
　if (event.keyCode==13) {
　    sample.filters[0].clear();
　    sample.filters[0].addCone(0,0,1,sample.offsetWidth,sample.offsetHeight,light1.value,light2.value,light3.value,light4.value,90);
　    }
　}
　
　function filter_wave() {
　if (event.keyCode==13) {
　    sample.style.filter='wave(Add=0, Phase='+wave1.value+',Freq='+wave2.value+',LightStrength="5",Strength='+wave3.value+')';
　    }
　}
　
　function exportit() {
　var favorite='';
　        for (i=0;i<imglist.length;i++) {
　        DeleteCookie ('readlist'+i);
　        SetCookie ('readlist'+i, imglist[i]);
　        }
　        SetCookie ('readtotal', i);
　}
　
　function importit() {
　    for (i=0;i<GetCookie ('readtotal');i++) {
　        imglist[i]=GetCookie ('readlist'+i);
　        }
　}
　
　function GetCookie (name) {  
　    var arg = name + "=";  
　    var alen = arg.length;  
　    var clen = document.cookie.length;  
　    var i = 0;  
　    while (i < clen) {    
　        var j = i + alen;    
　        if (document.cookie.substring(i, j) == arg)    return getCookieVal (j);    
　        i = document.cookie.indexOf(" ", i) + 1;    
　        if (i == 0) break;   
　    }  
　    return null;
　}
　
　function getCookieVal (offset) {  
　    var endstr = document.cookie.indexOf (";", offset);  
　    if (endstr == -1) endstr = document.cookie.length;  
　    return unescape(document.cookie.substring(offset, endstr));
　}
　
　function SetCookie (name, value) {  
　    var exp = new Date();  
　    exp.setTime(exp.getTime() + (30*24*60*60*1000));
　    document.cookie = name + "=" + escape (value) + "; expires=" + exp.toGMTString()+";";
　}
　
　function DeleteCookie (name) {  
　    var exp = new Date();  
　    exp.setTime (exp.getTime() - 1);  
　    var cval = GetCookie (name);  
　    document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString()+";";
　}
　// -->
　</script>
　<style>
　.button { border:1px solid menu; behavior:url(images/tool_img/button.htc);}
　input,select,td {  font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 10px}
　</style>
　<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT> 
　</head>
　
　<body bgcolor="#FFFFFF" text="#000000" background="images/tool_img/icon-bk-pattern.gif" leftmargin="0" topmargin="0" scroll="no" oncontextmenu="showtool();return false;" ondragstart="return false;" onclick="hidetool()" onresize="recalcposition()">
　<div id="imglayer" style="position:absolute; width:1px; height:1px; z-index:-1; left:0; top:0"><img src="http://cimg.163.com/lady/0412/09/xiao.jpg" id=sample onmousedown="down();initdrag()" style="cursor:url(zoom-in.cur);visibility:hidden" onmousemove="startdrag()" onmouseup="enddrag()" onreadystatechange="initsize();imglist[0]=this.src;"></div>
　
　<div id="tool" style="position:absolute; width:353px; height:10px; z-index:2; left: 0px; top: 0px; visibility: hidden">
　<table width="100%" border="0" cellspacing="0" cellpadding="0">
　<tbody>
　<tr>
　<td valign="top" style="border:2px outset #ffffff;background-color:menu">
　    <table width="100%" border="0" cellspacing="3" cellpadding="0">
　    <tbody>
　    <tr>
　    <td width="20" align="center"><img src="images/tool_img/icon-zoom-in.gif" width="16" height="16" class="button" onclick="zoomin()"></td>
　    <td width="20" align="center"><img src="images/tool_img/icon-zoom-out.gif" width="16" height="16" class="button" onclick="zoomout()"></td>
　    <td width="20" align="center"><img src="images/tool_img/icon-move-up.gif" width="16" height="16" class="button" onclick="move()"></td>
　    <td width="110" style="background-repeat: no-repeat" background="images/tool_img/icon-bk-guide.gif">
　    <div id="zoomhandle" style="position:absolute; width:10px; height:16px; z-index:3;; left: 124px;top:4px"><img src="images/tool_img/spacer.gif" width="6" height="14" style="border:2px outset #ffffff;background-color:menu" onmousedown="initdrag2()" onmousemove="startdrag2()" onmouseup="enddrag2()"></div>
　    </td>
　    <td id=showzoomvalue width="35">100%</td>
　    <td width="95">
　    <select id="fitmode" onChange="autofit(this)" style="font-size:12px;">
　    <option value="0" selected>匹配模式</option>    
　    <option value="2">实际大小</option>
　    <option value="3">匹配宽</option>
　    <option value="4">匹配高</option>
　   <option value="1">匹配屏幕</option>
　    </select>
　    </td>
　    <td width="20" align="center"><img src="images/tool_img/icon-print.gif" width="16" height="16" class="button" onclick="window.print()"></td>
　    </tr>
　    </tbody>
　    
　    </table>
　    <table width="100%" border="0" cellspacing="3" cellpadding="0" id=extendparam>
　    <tbody>
　    <tr>
　    <td width="60" height="20">
　   <select id="filtermode" onChange="addfilter(this)" style="font-size:12px;">
　    <option value="" selected>特效</option>
　    <option value="none">没有</option>
　    <option value="alpha(">透明</option>
　    <option value="fliph(">左右反转</option>
　    <option value="flipv(">上下反转</option>
　    <option value="invert(">色彩反转</option>
　    <option value="gray(">黑白</option>
　    <option value="xray(">X射线</option>
　    <option value="blur(">模糊</option>
　    <option value="light(">灯光</option>
　    <option value="wave(">波纹</option>
　    </select></td>
　    <td id=filterparam align="left"> </td>
　    <td width="20" align="center"><img src="images/tool_img/icon-save.gif" width="16" height="16" class="button" onclick="document.all.WebBrowser.ExecWB(4,1)"></td>
　    </tr>
　    </tbody>
　    </table>
　</td>
　</tr>
　</tbody>
　</table>
　</div>
　</body>
　</html>
　
　

posted on 2007-01-29 09:45  mbskys  阅读(264)  评论(0)    收藏  举报
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3