Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <meta charset="utf-8">
- <title>lente</title>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
- <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
- <script src="http://davetayls.me/bower_components/jquery.kinetic/jquery.kinetic.js"></script>
- <script type="text/javascript">
- $(document).ready(function() {
- $('#contenedor').kinetic();
- //$("#imagen").draggable()
- $("#sniper").draggable();
- $("#sniper").offset({left:0,top:0});
- $("#slider").slider({
- orientation: "horizontal",
- min: 50,
- max: 350,
- value: 50,
- slide: cambioSlider,
- change: cambioSlider
- });
- $("#imagen").width($("#contenedor").width());
- });
- function cambioSlider(){
- var milimetros = $("#slider").slider("value");
- $("#mm").val(milimetros+"mm");
- var alfa = milimetros/50;
- var normal = $("#contenedor").width();
- var resultado = normal * alfa;
- $("#imagen").width(resultado);
- }
- function cargarImagen(){
- $("#imagen").attr("src",$("#cargar").val())
- $("#slider").slider("value",50);
- $("#imagen").offset({left:9, top:9});
- cambioSlider();
- };
- </script>
- </head>
- <body style="width: 100%; height: 90%; margin 0; overflow:hidden">
- <div id="contenedor" style="width:90%; height: 600px; margin 50px; overflow:hidden" class="ui-widget-content">
- <img id="imagen" src="http://followmetoaustralia.files.wordpress.com/2012/05/2-km-long-jetty.jpg" >
- </div>
- <br><br>
- <div id="slider" style="margin: 15px; width:600px;"></div>
- <input type="text" id="mm" value="50mm" />
- <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();"/>
- <img id="sniper" style="position:absolute" src="http://1.bp.blogspot.com/-GIYmvWWqf0s/TyrLxj4KfjI/AAAAAAAAAW8/a-LviFsG1Us/s1600/SniperReticle.png" />
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement