Управление прозрачностью с помощью ползунка - JavaScript, Ajax

s88s · 13.12.2018, 12:39

Доброго времени суток!

Решил сделать управление прозрачностью фона при помощи ползунка нашел скрипт

Код:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Slider</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/themes/base/jquery-ui.css" type="text/css"/>

    <script type="text/javascript">
    $(document).ready(function() {
        //Step 1: set up the slider with some options. The valid values for opacity are 0 to 1
        //Step 2: Bind an event so when you slide the slider and stop, the following function gets called
        $('#slider').slider({ 
        min: 0, 
        max: 1, 
        step: 0.01, 
        value: 1,
        orientation: "vertical",
             slide: function(e,ui){
                     $('#box').css('opacity', ui.value)

             }                
        })
    });
</script>
    <style type="text/css">
        #box {width: 400px; height: 95px; background-image: url("http://www.programmersforum.ru/images/1070/misc/logo.gif"); background-repeat: no-repeat;}
        #slider {width: 2px;}
    </style>
</head>
<body>
    <div id="slider" data-wjs-element="box"></div>
    <div id="box">
       
    </div>
</body>
</html>

Всё работает вроде нормально, но возник у меня вопрос вот какой а как можно вывести на экран цифры что бы при движении ползунком они либо уменьшались либо же прибавлялись?

в JS я не силен помогите с выводом пожалуйста.

Alex11223 · 13.12.2018, 12:46

Ну так и выводите в slide куда угодно.

А зачем использовать версию jQuery 2010 года? Взяли б хоть самую свежую 1.*

s88s · 13.12.2018, 12:56

Цитата:

Сообщение от Alex11223

Ну так и выводите в slide куда угодно.

А зачем использовать версию jQuery 2010 года? Взяли б хоть самую свежую 1.*

я вот как есть скопировал и не чего не делал особого только фон сменил для теста и всё. а как правильно вывести я не понимаю

Alex11223 · 13.12.2018, 13:02

https://learn.javascript.ru/
https://learn.javascript.ru/function-basics
https://learn.javascript.ru/function...ion-expression
https://learn.javascript.ru/object-methods

s88s · 13.12.2018, 13:24

Цитата:

Сообщение от Alex11223

Ну так и выводите в slide куда угодно.

А зачем использовать версию jQuery 2010 года? Взяли б хоть самую свежую 1.*

а 2010 года это вот этот jquery/1.4.2/jquery.min.js или все три???

s88s · 13.12.2018, 16:53

вопрос решен

s88s · 16.12.2018, 17:24

Вопрос: а можно ли цифры которые выводятся в input по id "opacity"
в сам ползунок? Если можно то как это сделать?

Код:


<!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 {
    float: left;
    clear: left;
    width: 10px;
  }
  #swatch {
    width: 120px;
    height: 100px;
    margin-top: 18px;
    margin-left: 350px;
    background-image: none;
  }
  #red .ui-slider-range { background: #000; }
  #red .ui-slider-handle { border-color: blue; }
  </style>
  <script>
  function hexFromRGB(r) {
    var hex = [r.toString( 16 )];
    $.each( hex, function( nr, val ) {
      
    });
    return hex.join( "" ).toUpperCase();
  }
  function refreshSwatch() {
    var red = $( "#red" ).slider( "value" ),
      hex = hexFromRGB( red );
  }
  $(function() {
    $( "#red" ).slider({
      orientation: "vertical",
      range: "min",
      min: 0,
      max: 1,
      step: 0.01,      
      value: 0.3,
slide: function( event, ui ) {
			$( "#opacity" ).val( ui.value );
		}
    });
    $( "#red" ).slider( "value", 255 );
  });
  </script>
</head>
<body class="ui-widget-content" style="border:0;">
 
 
<div id="red"></div>
<input id="opacity">
 
<div id="swatch" class="ui-widget-content ui-corner-all"></div>
 
 
</body>
</html>

13.12.2018, 12:46	#2
Alex11223 Старожил Регистрация: 12.01.2011 Сообщений: 19,500	Ну так и выводите в slide куда угодно. А зачем использовать версию jQuery 2010 года? Взяли б хоть самую свежую 1.* Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223 ЛС отключены Аларом.

13.12.2018, 13:02	#4
Alex11223 Старожил Регистрация: 12.01.2011 Сообщений: 19,500	https://learn.javascript.ru/ https://learn.javascript.ru/function-basics https://learn.javascript.ru/function...ion-expression https://learn.javascript.ru/object-methods Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223 ЛС отключены Аларом.

13.12.2018, 16:53	#6
s88s Форумчанин Регистрация: 02.01.2014 Сообщений: 369	вопрос решен "Я не волшебник, я только учусь"

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Управление процессами с помощью семафоров	sky_diver89	Помощь студентам	0	01.12.2015 12:57
Управление excel с помощью другой программы через запросы	FranCOder	Microsoft Office Excel	0	05.06.2015 19:00
Управление windows с помощью delphi	Hallo	Обсуждение статей	6	05.09.2010 23:50
Управление печатью документов Microsoft Office с помощью Делфи	КотФиларет	Общие вопросы Delphi	0	19.01.2009 18:58
Графика в Делфи! Управление обьектами с помощью клавиш	sting	Помощь студентам	8	14.12.2008 15:59