jslider(拖动条)图片放大缩小功能(2012.4.03)

 

<%-- 

    Document   : showFigure

    Created on : Apr 2, 2013, 5:14:14 PM

    Author     : sunny

--%>



<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<html>

    <head> 

        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

        <meta name="auther" content="f7" /> 

        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">

        <style type="text/css">

            #slider { margin: 20px 10pt 30pt 40px; width: 200px }

            #inputSytle {

                position:absolute;

                height: 15px;

                width: 400px;

                left: 300px;

                top: 10px;

                font-family:Arial, Helvetica, sans-serif;

                font-size:12px;

            }

            #styleImage{

                margin: 10px 10pt 30pt 40px; 

            }

        </style>

        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

        <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

        <title>View Figure</title> 

        <%

            String imgName = request.getParameter("fileName");

        %>

        <script type="text/javascript"> 

            var PhotoSize = { 

                cpu: 0, // 当前缩放倍数值 

                elem: "", // 图片节点 

                photoWidth: 0, // 图片初始宽度记录 

                photoHeight: 0, // 图片初始高度记录 

                init: function(){ 

                    this.elem = document.getElementById("focusphoto"); 

                    this.photoWidth = this.elem.scrollWidth; 

                    this.photoHeight = this.elem.scrollHeight; 

                    this.cpu = 1; 

                }, 

                action: function(x){

                    this.cpu = x;

                    this.elem.style.width = this.photoWidth * this.cpu +"px"; 

                    this.elem.style.height = this.photoHeight * this.cpu +"px"; 

                } 

            }; 

            window.onload = function(){PhotoSize.init()}; 

        </script> 



    </head> 

    <body>

        <div id="slider" src="">

            <img src="jslib/scaler_slider_track.gif">

        </div>

        <div id="inputSytle">

            <input id="zoomVal" type="text" size="5" value="100"> %  

            <input type="button" value="Start to Zoom" id="up" />

            <input type="button" value="Default Figure" id="default"/>

        </div>

        <div id="styleImage">

            <img id="focusphoto" src="http://files.jb51.net/upload/201107/20110713233007487.jpg" />     

        </div>





        <script>

            $( "#slider" ).slider(

            { 

                axis:'horizontal',

                min: 0,

                max:200,

                step:2,

                value:100

                    

            }

        );

            var max = $( "#slider" ).slider( "option", "max" );

            var numb = 0;

            $( "#slider" ).on( "slide", function( event, ui ) {

                var value = $( "#slider" ).slider( "option", "value" );

                $("#zoomVal").val(value);

                if(value>numb){

                    PhotoSize.action(value/100.0); 

                }else{

                    PhotoSize.action(value/100.0); 

                }

                numb = value;

            } );

            $(

            function(){

                $("#up").click(function(){

                    var value = $("#zoomVal").val();

                    PhotoSize.action(value/100.0);

                });

                $("#default").click(function(){

                    $("#zoomVal").val('100');

                    PhotoSize.action(1);

                });

            }

        );

            

        </script>

    </body> 

</html>


功能描述:jquery实现jslider图片放大缩小功能

 




 

你可能感兴趣的:(slider)