Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Здесь нужно купить рекламу за 25 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 13.12.2018, 13:39   #1
s88s
Форумчанин
 
Регистрация: 02.01.2014
Сообщений: 361
По умолчанию Управление прозрачностью с помощью ползунка

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

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

Код:

<!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 я не силен помогите с выводом пожалуйста.
"Я не волшебник, я только учусь"
s88s вне форума   Ответить с цитированием
Старый 13.12.2018, 13:46   #2
Alex11223
Модератор
Заслуженный модератор
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,449
По умолчанию

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

А зачем использовать версию jQuery 2010 года? Взяли б хоть самую свежую 1.*
Alex11223 вне форума   Ответить с цитированием
Старый 13.12.2018, 13:56   #3
s88s
Форумчанин
 
Регистрация: 02.01.2014
Сообщений: 361
По умолчанию

Цитата:
Сообщение от Alex11223 Посмотреть сообщение
Ну так и выводите в slide куда угодно.

А зачем использовать версию jQuery 2010 года? Взяли б хоть самую свежую 1.*
я вот как есть скопировал и не чего не делал особого только фон сменил для теста и всё. а как правильно вывести я не понимаю
"Я не волшебник, я только учусь"
s88s вне форума   Ответить с цитированием
Старый 13.12.2018, 14:02   #4
Alex11223
Модератор
Заслуженный модератор
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,449
По умолчанию

https://learn.javascript.ru/
https://learn.javascript.ru/function-basics
https://learn.javascript.ru/function...ion-expression
https://learn.javascript.ru/object-methods
Alex11223 вне форума   Ответить с цитированием
Старый 13.12.2018, 14:24   #5
s88s
Форумчанин
 
Регистрация: 02.01.2014
Сообщений: 361
По умолчанию

Цитата:
Сообщение от Alex11223 Посмотреть сообщение
Ну так и выводите в slide куда угодно.

А зачем использовать версию jQuery 2010 года? Взяли б хоть самую свежую 1.*
а 2010 года это вот этот jquery/1.4.2/jquery.min.js или все три???
"Я не волшебник, я только учусь"
s88s вне форума   Ответить с цитированием
Старый 13.12.2018, 17:53   #6
s88s
Форумчанин
 
Регистрация: 02.01.2014
Сообщений: 361
По умолчанию

вопрос решен
"Я не волшебник, я только учусь"
s88s вне форума   Ответить с цитированием
Старый 16.12.2018, 18:24   #7
s88s
Форумчанин
 
Регистрация: 02.01.2014
Сообщений: 361
По умолчанию

Вопрос: а можно ли цифры которые выводятся в 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>
"Я не волшебник, я только учусь"
s88s вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

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


21:59.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.