首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

求解.NET高手,图片局部放大有关问题

2012-03-29 
求解.NET高手,图片局部放大问题[codeHTML][/code]htmlheadtitleJS+CSS实现图片放大预览效果(js图片

求解.NET高手,图片局部放大问题
[code=HTML][/code]
<html> 
  <head>  
  <title>JS+CSS实现图片放大预览效果(js图片放大预览鼠标滑过的任意位置)_365CSS.CN </title> 
  <script language="JavaScript">  
  <!--  
  var srcX = 900; //原图大小,可以任意设置  
 var srcY = 900;  
 var bigX = 350; //预览窗大小,可以任意设置  
 var bigY = 350;  
 var smallX = 350; //缩略图宽度  
 var smallY = srcY * smallX / srcX; 
  var viewX = bigX / srcX * smallX; //预览范围  
  var viewY = bigY / srcY * smallY;  
 var bl = srcX / smallX;//缩小比例  
 var border = 1; //边框  
  window.onload=function (){  
  head.innerHTML="JS+CSS实现图片放大预览效果,鼠标可以滑动图片任意地方";  
  smallpic.width=smallX;  
  smallpic.height=smallY;  
  bigpic.width=srcX;  
  bigpic.height=srcY;  
  view.style.width=viewX;  
  view.style.height=viewY;  
  smallbox.style.borderWidth=border;  
  bigbox.style.borderWidth=border;  
  if (window.event){  
  smallbox.style.width=smallpic.offsetWidth+border*2;  
  smallbox.style.height=smallpic.offsetHeight+border*2;  
  bigbox.style.width=bigX+border*2;  
  bigbox.style.height=bigY+border*2;  
  }else{  
  smallbox.style.width=smallpic.offsetWidth;  
  smallbox.style.height=smallpic.offsetHeight;
  bigbox.style.width=bigX;  
  bigbox.style.height=bigY;  
  }  
  move(event);  
 }  
function move(e){  
  var e = window.event?window.event:e; 
  //alert(e)  
  var iebug = 0;  
  if (window.event){  
  var vX = e.offsetX - viewX/2;  
  var vY = e.offsetY - viewY/2;  
  }else{  
  var vX = e.pageX - viewX/2 - smallbox.offsetLeft - border;  
  var vY = e.pageY - viewY/2 - smallbox.offsetTop - border;  
  iebug = 2; 
  }  
  if (vX < 0) vX = 0;  
  if (vY < 0) vY = 0;  
  if (vX > smallX - viewX - iebug) vX = smallX - viewX - iebug;  
  if (vY > smallY - viewY - iebug) vY = smallY - viewY - iebug;  
  bigpico.style.marginLeft = - vX * bl  
  bigpico.style.marginTop = - vY * bl  
  view.style.left = vX + smallbox.offsetLeft + border;  
  view.style.top = vY + smallbox.offsetTop + border;  
  }  
//-->  
  </script>  
  <style type="text/css">  
 <!--  
 *{padding:0;margin:0}  
  img{display:block;}  
 #smallbox{border:1px #c33 solid;float:left;width:0;height:0;overflow:hidden}  
 #bigbox{border:1px #c33 solid;width:0px;height:0px;float:left;overflow:hidden}  
#view{border:1px #ddd solid;width:0px;height:0px;position:absolute}  
 #head{text-align:center;line-height:40px;font:bold 16px/40px;color:red}  
   
//-->  
  </style>  


  
 <body>  
  <div id="head"> </div>  
 <div id="smallbox"> <img src="images/0001.jpg" name="smallpic" width="300" height="300" border="0" id="smallpic" onMouseMove="move(event)" onMouseOver="document.getElementById('bigbox').style.display='';document.getElementById('view').style.display=''" onMouseOut="document.getElementById('bigbox').style.display='none';document.getElementById('view').style.display='none'"> </div>  
   
 <div id="bigbox" style="display:none"> <div id="bigpico"> <img src="images/0001.jpg" name="bigpic" width="300" height="300" border="0" id="bigpic"> </div>  
 </div>  
 <div id="view" onMouseMove="move(event) "style="display:none"> </div>  
   
 </body>  
  </html> 




单独放到一个aspx文件中可以使用,但是放到有其他内容的一个DIV中就显示不出来了(另外的aspx中,内容很多)。
是哪方面冲突了???
求高手解答!!!!



[解决办法]
你的div设置为浮动层了么?
[解决办法]
和页面中得其他js是不是有冲突,比如说,变量名重了什么的,
[解决办法]
用火狐慢慢调试下吧 。
什么东西冲突了 。

热点排行