Javascript-форум - функция подсветки ссылки

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - функция подсветки ссылки (https://javascript.ru/forum/dom-window/51647-funkciya-podsvetki-ssylki.html)

Цитата:

Сообщение от рони (Сообщение 341150)

там имена функций а где сами функции?

я добавил:

function animate(opts) {
    var start = new Date; //сохранить время начала

    var timer = setInterval(function() {
        
        // вычислить сколько времени прошло
        var progress = (new Date - start) / opts.duration;
        if (progress > 1) progress = 1;

        //отрисовать анимацию
        opts.step(progress);

        if (progress == 1) clearInterval(timer); //конец
    }, opts.delay || 10); // по умолчанию кадр каждые 10мс
}

function linear(progress) {
    return progress;
}

function highlight(elem) {
    var from = [255, 0, 0];
    var to = [255, 255, 255];
    animate({
        delay: 10,
        duration: 1000,
        delta: linear,
        step: function (delta) {
            elem.style.backgroundColor = 'rgb(' + 
                Math.max(Math.min(parseInt((delta * (to[0]-from[0])) + from[0], 10), 255),
                0) + ',' + 
                Math.max(Math.min(parseInt((delta * (to[1]-from[1])) + from[1], 10), 255),
                0) + ',' + 
                Math.max(Math.min(parseInt((delta * (to[2]-from[2])) + from[2], 10), 255),
                0) + ')'
        }
    })
}

но ничего не поменялось.

при наведении и щелчке цвет текста ссылки меняется быстро на красный и происходит переход на другую страницу.

вот вызов функции:

<td>
                    @Html.ActionLink("Testing", "Testing", new { id = item.ID }, new { onclick = "hightlight(this);" })
                </td>

что ещё добавить/изменить, чтоб медленно изменялась подсветка фона ссылки при наведении.

спасибо.

mr_virtus,
:(

<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        a {
            font: 48px Verdana, Arial, Helvetica, sans-serif;
 padding: 5px 15px;
            border-radius: 8px;
            border: rgb(255, 0, 0) 1px solid;
        }
    </style>

    <script>
        window.onload = function() {

            function linear(progress) {
                return progress;
            }

            function animate(opts) {

                var start = new Date;
                var delta = opts.delta || linear;

                var timer = setInterval(function() {

                    var progress = (new Date - start) / opts.duration;
                    if (progress > 1) progress = 1;

                    opts.step(delta(progress));

                    if (progress == 1) {
                        clearInterval(timer);
                        opts.complete && opts.complete();
                    }
                }, opts.delay || 13);

                return timer;
            }

            function highlight(elem, delta) {
                var from = [102, 51, 255],
                    to = [255, 255, 51];
                animate({
                    delay: 10,
                    duration: 5000,
                    delta: delta,
                    step: function(delta) {
                        var r, g, b;
                        elem.style.backgroundColor = 'rgb(' +
                            (r = Math.max(Math.min(parseInt((delta * (to[0] - from[0])) + from[0], 10), 255), 0)) + ',' +
                            (g = Math.max(Math.min(parseInt((delta * (to[1] - from[1])) + from[1], 10), 255), 0)) + ',' +
                            (b = Math.max(Math.min(parseInt((delta * (to[2] - from[2])) + from[2], 10), 255), 0)) + ')';
                        elem.style.color = 'rgb(' +
                            (255 - r) + ',' +
                            (255 - g) + ',' +
                            (255 - b) + ')';

                    }
                })
            }

            [].forEach.call(document.querySelectorAll('a'), function(el) {
                el.onclick = function() {
                    highlight(el, linear);
                }
            });

        };
    </script>
</head>

<body> <a>Test click</a>
</body>
</html>

Если кликнуть несколько раз подряд - получается стробоскоп ))

Цитата:

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

спасибо, сейчас попробую написать функции и посмотреть что получиться!

Ага. Ты так говоришь будто это маловажная деталь, и возможно дело даже не в ней ))

<script>makeAwesomeApplication()</script>

Чет не работает. По идее функция должна на пустой странице создать офигенную аппликуху навроде GMail. Возможно придется разместить на странице саму функцию, на несколько мегабайт, но думаю, это может не помочь))

Цитата:

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

при наведении

onmouseover
http://learn.javascript.ru/events

Цитата:

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

происходит переход на другую страницу.

там же
http://learn.javascript.ru/default-b...раузера

Цитата:

Сообщение от danik.js

Если кликнуть несколько раз подряд - получается стробоскоп ))

угу нет обработки и повтора и по умолчанию ... просто макет анимации

Цитата:

Сообщение от рони (Сообщение 341150)

там имена функций а где сами функции?

Цитата:

Сообщение от рони (Сообщение 341167)

mr_virtus,
:(

<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        a {
            font: 48px Verdana, Arial, Helvetica, sans-serif;
 padding: 5px 15px;
            border-radius: 8px;
            border: rgb(255, 0, 0) 1px solid;
        }
    </style>

    <script>
        window.onload = function() {

            function linear(progress) {
                return progress;
            }

            function animate(opts) {

                var start = new Date;
                var delta = opts.delta || linear;

                var timer = setInterval(function() {

                    var progress = (new Date - start) / opts.duration;
                    if (progress > 1) progress = 1;

                    opts.step(delta(progress));

                    if (progress == 1) {
                        clearInterval(timer);
                        opts.complete && opts.complete();
                    }
                }, opts.delay || 13);

                return timer;
            }

            function highlight(elem, delta) {
                var from = [102, 51, 255],
                    to = [255, 255, 51];
                animate({
                    delay: 10,
                    duration: 5000,
                    delta: delta,
                    step: function(delta) {
                        var r, g, b;
                        elem.style.backgroundColor = 'rgb(' +
                            (r = Math.max(Math.min(parseInt((delta * (to[0] - from[0])) + from[0], 10), 255), 0)) + ',' +
                            (g = Math.max(Math.min(parseInt((delta * (to[1] - from[1])) + from[1], 10), 255), 0)) + ',' +
                            (b = Math.max(Math.min(parseInt((delta * (to[2] - from[2])) + from[2], 10), 255), 0)) + ')';
                        elem.style.color = 'rgb(' +
                            (255 - r) + ',' +
                            (255 - g) + ',' +
                            (255 - b) + ')';

                    }
                })
            }

            [].forEach.call(document.querySelectorAll('a'), function(el) {
                el.onclick = function() {
                    highlight(el, linear);
                }
            });

        };
    </script>
</head>

<body> <a>Test click</a>
</body>
</html>

спасибо, но у меня не работает. я этот код поместил в Index.js

и потом его вызываю:

@*Displays a range of tests*@

@model IEnumerable<Questionnaire.Models.Test>

@{
    Layout = null;
}

@section scripts {
    <script src="~/Scripts/Home/Index.js"></script> //вызов
}


<html>
<head>
    <title>Index</title>
</head>
<body>
    <table>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.ActionLink("Testing", "Testing", new { id = item.ID })
                </td>
            </tr>
        }
    </table>
</body>
</html>

так не работает.

это приложение на asp.net, использует razor.

не знаете как поправить?

и вообще, возможно ли связать чистый js с технологией razor?

Цитата:

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

это задача не реальная связать чистый js с технологией razor?

Они в параллельных мирах находятся: js на клиенте работает, а razor на серваке крутится. Им плевать друг на друга.