Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Другие темы раздела
JavaScript Поиск текста на странице с шрифтом красный и НЕ красный https://www.cyberforum.ru/ javascript/ thread2767362.html
здравствуйте, подскажите как сделать, вверху странички поле ввода и две кнопки Поиск 1-чтобы искало текст на странице шрифт у которого красный 2-чтобы искало текст на странице шрифт у которого НЕ...
JavaScript Как узнать статус XMLHttpRequest на сайте?
Пишу парсер, контент на сайте постоянно обновляется через XMLHttpRequest, из-за чего периодически возникают трудности с анализом текста когда контент прогружается лишь частично. Возможно ли отследить...
JavaScript Как загрузить видео?
Добрый вечер, подскажите поэалуйста У меня на сайте есть стандартные видео HTML <video></video> можно ли как нибудь к ним применить ленивую загрузку, то есть чтобы они загружались только тогда...
JavaScript Юнит-тесты для фронтэнда Добрый день, подскажите плииз. Такое вообще существует??? Здача - записать что-то вроде "макросов для мышки и клавиатуры" и проигрывать их в страницах в ожидании проверенного/ожидаемого... https://www.cyberforum.ru/ javascript/ thread2766049.html
JavaScript Бесконечная лента на сайте https://www.cyberforum.ru/ javascript/ thread2765836.html
Здравствуйте всем! Столкнулся с задачей, как сделать на сайте бесконечную ленту? (аля одноклассники) может есть готовые решения?
JavaScript Поменять местами цвета кнопок
Возникла проблема в написании функции. Есть поле с кнопками 11x11, каждая из которых имеет свой цвет и мы так видим рисунок 11x11 пикселей. Мне нужно написать функцию поворота этого рисунка на 90...
неправильно работает математическое уравнение JavaScript
Я что-то недогоняю, объясните мне пожалуйста. Я вычисляю процент от числа, и прибавляю и вычитаю этот процент к этому числу. Допустим, от числа 100 ищу 1 процент, в одно поле вставляю результат...
JavaScript Динамически создать кнопку с картинкой Здраствуйте, етот код создает кнопку с картинкой и текстом, <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <body> <button class="myButton"... https://www.cyberforum.ru/ javascript/ thread2764796.html
JavaScript Получить клас-родителя, обратное :nth-child(n) https://www.cyberforum.ru/ javascript/ thread2764787.html
Здраствуйте, скажите пожалуйста как можно обратится к класу родителя без id, тоесть зделать обратное :nth-child() К примеру зделать здесь так чтоб красился бек-граунд контейнера а не кнопок ...
JavaScript d3js не рисует path Сообщений о исключениях нет. Данные в массиве есть. Не могу понять что этой скотине не хватает. Может кто то сможет подсказать ? function Chart(id, data) { var chartData =... https://www.cyberforum.ru/ javascript/ thread2764775.html
JavaScript Работа с базой данных из UserJS https://www.cyberforum.ru/ javascript/ thread2764740.html
Никак не найду способа делать запросы из UserJS (JavaScript, подключаемый к неродному сайту менеджером скриптов) скрипта в базу данных Microsoft SQL Server. Мне нужно подключиться к БД, прочитать...
JavaScript Узнать задан ли color Добрый день, подскажите плиииз. Пытаюсь создать "мигание" для любого элемента "с восстановлением". Для этого задаю цвет на едко-красный, а потом восстанавливаю "на прошлый". Прошлый color... https://www.cyberforum.ru/ javascript/ thread2764492.html
0 / 0 / 0
Регистрация: 28.06.2017
Сообщений: 33
0

Слайдер с круговой диаграммой

11.01.2021, 14:36. Просмотров 788. Ответов 0
Метки (Все метки)


Добрый день.
Сейчас есть слайдер с круговой диаграммой. Код:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
                <div class="slider-section--slider">
                    <div class="iphone">
                        <div style="display: flex; justify-content: center; position:relative;"> 
                            <img style="position: absolute;z-index: 1;" src="../img/iPhone-X-new-2.png">
                            <svg class="radial-progress" data-percentage="82" viewBox="0 0 80 80">
                                <circle class="incomplete" cx="40" cy="40" r="35"></circle>
                                <circle class="complete" cx="40" cy="40" r="35"></circle>
                                <text class="percentage" x="50%" y="57%" transform="matrix(0, 1, -1, 0, 80, 0)">82%</text>
                            </svg> 
                        </div>
                    </div>
                    <section class="regular slider">
                        <div>
                            <img src="../img/slider/image.jpg">
                        </div>
                        <div>
                            <img src="../img/slider/image.jpg">
                        </div>
                        <div>
                            <img src="../img/slider/image.jpg">
                        </div>
                        <div>
                            <img src="../img/slider/image.jpg">
                        </div>
                        <div>
                            <img src="../img/slider/image.jpg">
                        </div>
                        <div>
                            <img src="../img/slider/image.jpg">
                        </div>
                      </section>
                </div>
Работа диаграммы на js:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(function(){
 
    // Remove svg.radial-progress .complete inline styling
    $('svg.radial-progress').each(function( index, value ) { 
        $(this).find($('circle.complete')).removeAttr( 'style' );
    });
 
    // Activate progress animation on scroll
    $(window).scroll(function(){
        $('svg.radial-progress').each(function( index, value ) { 
            // If svg.radial-progress is approximately 25% vertically into the window when scrolling from the top or the bottom
            if ( 
                $(window).scrollTop() > $(this).offset().top - ($(window).height() * 0.75) &&
                $(window).scrollTop() < $(this).offset().top + $(this).height() - ($(window).height() * 0.25)
            ) {
                // Get percentage of progress
                percent = $(value).data('percentage');
                // Get radius of the svg's circle.complete
                radius = $(this).find($('circle.complete')).attr('r');
                // Get circumference (2πr)
                circumference = 2 * Math.PI * radius;
                // Get stroke-dashoffset value based on the percentage of the circumference
                strokeDashOffset = circumference - ((percent * circumference) / 100);
                // Transition progress for 1.25 seconds
                $(this).find($('circle.complete')).animate({'stroke-dashoffset': strokeDashOffset}, 1250);
            }
        });
    }).trigger('scroll');
 
});
Сейчас диаграмма одна для всех слайдов и срабатывает она при скролле. Как сделать так, чтобы круг с диаграммой остался на прежнем месте, а сами проценты в text были у каждого слайда свои и при смене слайдов диаграмма меняла значение?
Скрин слайдера прикрепляю ниже.

Вернуться к обсуждению:
Слайдер с круговой диаграммой
0
Миниатюры
Слайдер с круговой диаграммой  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
11.01.2021, 14:36
Готовые ответы и решения:

слайдер по круговой, реально ли написать?
во общем пришел ко мнения что нужно писать круговую функцию на основе прямой работы со стилями...

Построение отчета с круговой диаграммой в БД без нормализации
Всем добрый день! Столкнулась с проблемой, по форуму подобной проблемы не нашла. Есть БД. Схема: ...

Круговой слайдер
Необходимо добавить на круговой слайдер изображения в формате пнг, вместо красных блоков. По идеи...

Какая разница между диаграммой классов и Entity Relationship диаграммой?
Какая разница между диаграммой классов и диаграммой сущность-связь?

0
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.