zoukankan      html  css  js  c++  java
  • html设置滑动条

    https://www.runoob.com/try/try.php?filename=jqueryui-example-slider-colorpicker

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery UI 滑块(Slider) - 颜色选择器</title>
      <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
      <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
      <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
      <link rel="stylesheet" href="jqueryui/style.css">
      <style>
      #red, #green, #blue {
        float: left;
        clear: left;
         300px;
        margin: 15px;
      }
      #swatch {
         120px;
        height: 100px;
        margin-top: 18px;
        margin-left: 350px;
        background-image: none;
      }
      #red .ui-slider-range { background: #ef2929; }
      #red .ui-slider-handle { border-color: #ef2929; }
      #green .ui-slider-range { background: #8ae234; }
      #green .ui-slider-handle { border-color: #8ae234; }
      #blue .ui-slider-range { background: #729fcf; }
      #blue .ui-slider-handle { border-color: #729fcf; }
      </style>
      <script>
      function hexFromRGB(r, g, b) {
        var hex = [
          r.toString( 16 ),
          g.toString( 16 ),
          b.toString( 16 )
        ];
        $.each( hex, function( nr, val ) {
          if ( val.length === 1 ) {
            hex[ nr ] = "0" + val;
          }
        });
        return hex.join( "" ).toUpperCase();
      }
      function refreshSwatch() {
        var red = $( "#red" ).slider( "value" ),
          green = $( "#green" ).slider( "value" ),
          blue = $( "#blue" ).slider( "value" ),
          hex = hexFromRGB( red, green, blue );
        $( "#swatch" ).css( "background-color", "#" + hex );
      }
      $(function() {
        $( "#red, #green, #blue" ).slider({
          orientation: "horizontal",
          range: "min",
          max: 255,
          value: 127,
          slide: refreshSwatch,
          change: refreshSwatch
        });
        $( "#red" ).slider( "value", 255 );
        $( "#green" ).slider( "value", 140 );
        $( "#blue" ).slider( "value", 60 );
      });
      </script>
    </head>
    <body class="ui-widget-content" style="border:0;">
     
    <p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
      <span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
      简单的颜色选择器
    </p>
     
    <div id="red"></div>
    <div id="green"></div>
    <div id="blue"></div>
     
    <div id="swatch" class="ui-widget-content ui-corner-all"></div>
     
     
    </body>
    </html>
    

      

  • 相关阅读:
    弹性盒布局(Flexbox布局)
    CSS子元素在父元素中水平垂直居中的几种方法
    Vue中watch用法详解
    深入理解vue中的slot与slot-scope
    Spring 源码学习 03:创建 IoC 容器的几种方式
    Spring 源码学习 02:关于 Spring IoC 和 Bean 的概念
    Spring 源码阅读环境的搭建
    DocView 现在支持自定义 Markdown 模版了!
    Dubbo 接口,导出 Markdown ,这些功能 DocView 现在都有了!
    线程池 ThreadPoolExecutor 原理及源码笔记
  • 原文地址:https://www.cnblogs.com/kekeoutlook/p/14100634.html
Copyright © 2011-2022 走看看