Guest User

lente

a guest
Sep 8th, 2014
454
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.     <head>
  3.         <meta charset="utf-8">
  4.         <title>lente</title>
  5.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  6.         <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
  7.         <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
  8.         <script src="http://davetayls.me/bower_components/jquery.kinetic/jquery.kinetic.js"></script>
  9.         <script type="text/javascript">
  10.         $(document).ready(function() {
  11.             $('#contenedor').kinetic();
  12.             //$("#imagen").draggable()
  13.             $("#sniper").draggable();
  14.             $("#sniper").offset({left:0,top:0});
  15.             $("#slider").slider({
  16.               orientation: "horizontal",
  17.               min: 50,
  18.               max: 350,
  19.               value: 50,
  20.               slide: cambioSlider,
  21.               change: cambioSlider
  22.             });
  23.             $("#imagen").width($("#contenedor").width());
  24.         });
  25.         function cambioSlider(){
  26.             var milimetros = $("#slider").slider("value");
  27.             $("#mm").val(milimetros+"mm");
  28.             var alfa = milimetros/50;
  29.             var normal = $("#contenedor").width();
  30.             var resultado = normal * alfa;
  31.             $("#imagen").width(resultado);
  32.         }
  33.         function cargarImagen(){
  34.             $("#imagen").attr("src",$("#cargar").val())
  35.             $("#slider").slider("value",50);
  36.             $("#imagen").offset({left:9, top:9});
  37.             cambioSlider();
  38.         };
  39.         </script>
  40.     </head>
  41.     <body style="width: 100%; height: 90%; margin 0; overflow:hidden">
  42.         <div id="contenedor" style="width:90%; height: 600px; margin 50px; overflow:hidden" class="ui-widget-content"> 
  43.             <img id="imagen" src="http://followmetoaustralia.files.wordpress.com/2012/05/2-km-long-jetty.jpg" >
  44.         </div>
  45.         <br><br>
  46.             <div id="slider" style="margin: 15px; width:600px;"></div>
  47.             <input type="text" id="mm" value="50mm" />
  48.             <input type="text" id="cargar" value="http://followmetoaustralia.files.wordpress.com/2012/05/2-km-long-jetty.jpg" /><input type="button" id="boton" value="cargar imagen" onclick="cargarImagen();"/>
  49.     <img id="sniper" style="position:absolute" src="http://1.bp.blogspot.com/-GIYmvWWqf0s/TyrLxj4KfjI/AAAAAAAAAW8/a-LviFsG1Us/s1600/SniperReticle.png" />
  50.     </body>
  51. </html>
RAW Paste Data