VSEpodrad.ru

<script src="/js/jquery-1.4.2.min.js" type="text/javascript"> </script>  
  <script src="/js/jquery.magnify.min.js" type="text/javascript"> </script>  
  <script type="text/javascript">  
  $(function(){  
  $(".Magnify div").magnify(  
  /**  
  * basic parameters, you can skip any of them  
  */  
  {  
  /**  
  * max sensivity distance from mouse pointer in px  
  * values: integer  
  * default: 100  
  */  
  distance:200,  
  /**  
  * distance calculation method  
  * values: 'closest', 'center', function(){}  
  * default: 'closest'  
  */  
  distanceTo:'closest',  
  /**  
  * distance axis (skipping axis means any distance on it)  
  * values: 'x','y','xy'  
  * default: 'xy'  
  */  
  axis:'xy',  
  /**  
  * you may skip some mouse events to balance smoothness/performance  
  * value: integer  
  * default: 0  
  */  
  skipEvents:0,  
  /**  
  * do trigger magnifybefore, magnifyafter events  
  * values: boolean  
  * default: false  
  */  
  triggerEvent:true,  
  /**  
  * magnifybefore callback (triggerEvent doesn't metter)  
  * values: function(){}  
  * default: null  
  */  
  before:null,  
  /**  
  * magnifyafter callback (triggerEvent doesn't metter)  
  * values: function(){}  
  * default: null  
  */  
  after:null,  
  /**  
  * ditance to delta translator  
  * values: 'linear','sin','cos',function(){}  
  * default: 'linear'  
  */  
  delta:'linear'  
  },  
  /**  
  * style properties  
  * values: hash object like for jQuery.css()  
  * default: {width:'200%',height:'200%'}  
  * you also can pass any value as an array of stops:  
  * full form: [{0.25:'#CC0'},{0.5:'#FF0'},{0.75:'#F00'},{1:'#F0F'}]  
  * where 0.5 = 50% distance, 100% = 0px distance, 0% = max distance,  
  * an equivalent short form: ['#CC0','#FF0','#F00','#F0F']  
  * where stop=(indexOfTheStop+1)/stops.length,  
  * or any mix of them  
  */  
  {  
  backgroundColor:[{0.9:"#FF0"},"#F00"],  
  width:'200%',  
  height:'200%',  
  fontSize:'200%',  
  borderTopColor:"#FFF",  
  borderRightColor:"#FFF",  
  borderBottomColor:"#FFF",  
  borderLeftColor:"#FFF"  
  }  
  );  
  $(".Magnify img").magnify({  
  distance:200  
  },{  
  width:'200%',  
  height:'200%',  
  fontSize:'200%',  
  backgroundColor:"#FFFFFF",  
  borderColor:"#000000"  
  });  
  });  
  </script>  
  <style type="text/css">  
  .Cloud div{  
  margin: auto;  
  }  
  .Area{  
  border: dotted 1px #C0C0C0;  
  width: 480px;  
  height: 500px;  
  }  
  .Magnify div{  
  background-color: #CC0;  
  border: solid 1px #000000;  
  width: 50px;  
  height: 50px;  
  text-align: center;  
  }  
  .Magnify img{  
  background-color: #000000;  
  border: solid 1px #FFFFFF;  
  }  
  </style>

<div class="Area">  
  <table class="Magnify Cloud">  
  <tr><td><div/></td><td><div/></td><td><div/></td></tr>  
  <tr><td><div/></td><td><div/></td><td><div/></td></tr>  
  <tr><td><div/></td><td><div/></td><td><div/></td></tr>  
  </table>  
  </div>

<div class="Area">  
  <table class="Magnify Image">  
  <tr>  
  <td></td>  
  <td><div>jQuery</div></td>  
  <td><div>jQuery</div></td>  
  <td><div>jQuery</div></td>  
  </tr>  
  <tr><td><img src="Ссылка на картинку" width="100" height="100"/></td></tr>  
  <tr><td><img src="Ссылка на картинку" width="100" height="100"/></td></tr>  
  <tr><td><img src="Ссылка на картинку" width="100" height="100"/></td></tr>  
  </table>  
  </div>