发个js图片放大效果啊 参考:http://topic.csdn.net/u/20080330/11/17b4e878-9be7-469d-9e21-70b65821889d.html 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 把style 属性,改到用className 可以,就是闪来闪去的 给你个现成的<html><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>JS网页图片查看器-可控制图片放大缩小还原移动效果</title><META HTTP-EQUIV="imagetoolbar" CONTENT="no"><style type="text/css">body { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; line-height: 180%; }td { font-size: 12px; line-height: 150%; }</style><SCRIPT language=JavaScript>drag = 0move = 0// 拖拽对象// 参见:http://blog.sina.com.cn/u/4702ecbe010007pevar ie=document.all;var nn6=document.getElementById&&!document.all;var isdrag=false;var y,x;var oDragObj;function moveMouse(e) {if (isdrag) {oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";return false;}}function initDrag(e) {var oDragHandle = nn6 ? e.target : event.srcElement;var topElement = "HTML";while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;}if (oDragHandle.className=="dragAble") {isdrag = true;oDragObj = oDragHandle;nTY = parseInt(oDragObj.style.top+0);y = nn6 ? e.clientY : event.clientY;nTX = parseInt(oDragObj.style.left+0);x = nn6 ? e.clientX : event.clientX;document.onmousemove=moveMouse;return false;}}document.onmousedown=initDrag;document.onmouseup=new Function("isdrag=false");function clickMove(s){if(s=="up"){dragObj.style.top = parseInt(dragObj.style.top) + 100;}else if(s=="down"){dragObj.style.top = parseInt(dragObj.style.top) - 100;}else if(s=="left"){dragObj.style.left = parseInt(dragObj.style.left) + 100;}else if(s=="right"){dragObj.style.left = parseInt(dragObj.style.left) - 100;}}function smallit(){ var height1=images1.height; var width1=images1.width; images1.height=height1/1.2; images1.width=width1/1.2; } function bigit(){ var height1=images1.height; var width1=images1.width; images1.height=height1*1.2; images1.width=width1*1.2; } function realsize(){images1.height=images2.height; images1.width=images2.width;block1.style.left = 0;block1.style.top = 0;}function featsize(){var width1=images2.width; var height1=images2.height; var width2=360; var height2=200; var h=height1/height2;var w=width1/width2;if(height1<height2&&width1<width2){images1.height=height1; images1.width=width1; }else{if(h>w){ images1.height=height2; images1.width=width1*height2/height1; }else{ images1.width=width2; images1.height=height1*width2/width1; }}block1.style.left = 0;block1.style.top = 0;}</SCRIPT><script language="JavaScript" type="text/JavaScript"><!--function MM_reloadPage(init) { //reloads the window if Nav4 resizedif (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();}MM_reloadPage(true);//--></script><style type="text/css"><!--td, a { font-size:12px; color:#000000 }#Layer1 { position:absolute; z-index:100; top: 18px; left: 19px;}#Layer2 { position:absolute; z-index:1; }--></style></head><body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="init();" oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false"onmouseup="document.selection.empty()" style="overflow-y:hidden;overflow-x:hidden;"><div id="Layer1"><table border="0" cellspacing="2" cellpadding="0"> <tr> <td> </td> <td><img src="/comic/images/up.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('up')" title="向上"></td> <td> </td> </tr> <tr> <td><img src="/comic/images/left1.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('left')" title="向左"></td> <td><img src="images/zoom.gif" width="20" height="20" style="cursor:hand" onClick="realsize();" title="实际大小"></td> <td><img src="/comic/images/right1.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('right')" title="向右"></td> </tr> <tr> <td> </td> <td><img src="/comic/images/down.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('down')" title="向下"></td> <td> </td> </tr> <tr> <td> </td> <td><img src="images/zoom_in.gif" width="20" height="20" style="cursor:hand" onClick="bigit();" title="放大"></td> <td> </td> </tr> <tr> <td> </td> <td><img src="images/zoom_out.gif" width="20" height="20" style="cursor:hand" onClick="smallit();" title="缩小"></td> <td> </td> </tr></table></div><p><br><div id='hiddenPic' style='position:absolute; left:0px; top:0px; width:0px; height:0px; z-index:1; visibility: hidden;'><img name='images2' src='imagesview/images/rs4a.jpg' border='0'></div><div id='block1' onmouseout='drag=0' onmouseover='dragObj=block1; drag=1;' style='z-index:10; height: 0; left: 0px; position: absolute; top: 0px; width: 0' class="dragAble"> <img src="imagesview/images/rs4a.jpg" name='images1' width="990" border='0' ></div></body></html> 对AJAX有兴趣的朋友,欢迎加入群78514534对ASP.NET和C#有兴趣的朋友,欢迎加入67226009 100分,继续求解此难题~~~w3c声明引发错误,如何解决~~ 像360这种级别的网站把数据从后台读取到前台用的是什么方法 日历的转换的问题 一个log效果的问题(不很了解脚本,想找人帮我下) 怎么能阻止表单提交? 关于三维数组的长度 <input type="checkbox">的alt属性怎么没有效果! 怎么样控制时间的问题(欢迎高手进入) 留一个400分的问题,,高手快来那 分 在javascript中用什么函数来去掉首尾的空格 setInterval和setTimeout的区别 select控件的横向滚动条
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS网页图片查看器-可控制图片放大缩小还原移动效果</title>
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">
<style type="text/css">
body { font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; line-height: 180%; }
td { font-size: 12px; line-height: 150%; }
</style>
<SCRIPT language=JavaScript>
drag = 0
move = 0// 拖拽对象
// 参见:http://blog.sina.com.cn/u/4702ecbe010007pe
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var isdrag=false;
var y,x;
var oDragObj;function moveMouse(e) {
if (isdrag) {
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+"px";
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+"px";
return false;
}
}function initDrag(e) {
var oDragHandle = nn6 ? e.target : event.srcElement;
var topElement = "HTML";
while (oDragHandle.tagName != topElement && oDragHandle.className != "dragAble") {
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;
}
if (oDragHandle.className=="dragAble") {
isdrag = true;
oDragObj = oDragHandle;
nTY = parseInt(oDragObj.style.top+0);
y = nn6 ? e.clientY : event.clientY;
nTX = parseInt(oDragObj.style.left+0);
x = nn6 ? e.clientX : event.clientX;
document.onmousemove=moveMouse;
return false;
}
}
document.onmousedown=initDrag;
document.onmouseup=new Function("isdrag=false");function clickMove(s){
if(s=="up"){
dragObj.style.top = parseInt(dragObj.style.top) + 100;
}else if(s=="down"){
dragObj.style.top = parseInt(dragObj.style.top) - 100;
}else if(s=="left"){
dragObj.style.left = parseInt(dragObj.style.left) + 100;
}else if(s=="right"){
dragObj.style.left = parseInt(dragObj.style.left) - 100;
}}function smallit(){
var height1=images1.height;
var width1=images1.width;
images1.height=height1/1.2;
images1.width=width1/1.2;
}
function bigit(){
var height1=images1.height;
var width1=images1.width;
images1.height=height1*1.2;
images1.width=width1*1.2;
}
function realsize()
{
images1.height=images2.height;
images1.width=images2.width;block1.style.left = 0;
block1.style.top = 0;}
function featsize()
{
var width1=images2.width;
var height1=images2.height;
var width2=360;
var height2=200;
var h=height1/height2;
var w=width1/width2;
if(height1<height2&&width1<width2)
{
images1.height=height1;
images1.width=width1;
}
else
{
if(h>w)
{
images1.height=height2;
images1.width=width1*height2/height1;
}
else
{
images1.width=width2;
images1.height=height1*width2/width1;
}
}
block1.style.left = 0;
block1.style.top = 0;
}</SCRIPT>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
td, a { font-size:12px; color:#000000 }
#Layer1 {
position:absolute;
z-index:100;
top: 18px;
left: 19px;
}
#Layer2 { position:absolute; z-index:1; }
-->
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="init();" oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false"onmouseup="document.selection.empty()" style="overflow-y:hidden;overflow-x:hidden;">
<div id="Layer1">
<table border="0" cellspacing="2" cellpadding="0">
<tr>
<td> </td>
<td><img src="/comic/images/up.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('up')" title="向上"></td>
<td> </td>
</tr>
<tr>
<td><img src="/comic/images/left1.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('left')" title="向左"></td>
<td><img src="images/zoom.gif" width="20" height="20" style="cursor:hand" onClick="realsize();" title="实际大小"></td>
<td><img src="/comic/images/right1.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('right')" title="向右"></td>
</tr>
<tr>
<td> </td>
<td><img src="/comic/images/down.gif" width="20" height="20" style="cursor:hand" onClick="clickMove('down')" title="向下"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><img src="images/zoom_in.gif" width="20" height="20" style="cursor:hand" onClick="bigit();" title="放大"></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td><img src="images/zoom_out.gif" width="20" height="20" style="cursor:hand" onClick="smallit();" title="缩小"></td>
<td> </td>
</tr>
</table>
</div>
<p><br>
<div id='hiddenPic' style='position:absolute; left:0px; top:0px; width:0px; height:0px; z-index:1; visibility: hidden;'><img name='images2' src='imagesview/images/rs4a.jpg' border='0'></div>
<div id='block1' onmouseout='drag=0' onmouseover='dragObj=block1; drag=1;' style='z-index:10; height: 0; left: 0px; position: absolute; top: 0px; width: 0' class="dragAble"> <img src="imagesview/images/rs4a.jpg" name='images1' width="990" border='0' ></div>
</body>
</html>
对ASP.NET和C#有兴趣的朋友,欢迎加入67226009