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圖片放大縮小功能




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章