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

mr_virtus 14.11.2014 00:14
функция подсветки ссылки
 
всем привет!

подскажите, пожалуйста, хочу сделать, чтобы ссылка подсвечилась при наведении мышки. использую такую функцию:

function highlight(elem) {
    var from = [255, 0, 0], 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) + ')'
        }
    })
}


функция отсюда:

http://learn.javascript.ru/js-animation

там подсвечивается фон.

а вот как я прикрепляю к html:

$("a").each(function()
{
 $(this).click(function()
 {
   highlight(this);
 })
});


в итоге когда нажимаю ссылку её текст изменяет цвет, но нет подсветки фона.

как сделать, чтоб при наведении мышки подсвечивался фон?

спасибо.

рони 14.11.2014 00:55
а где linear и animate?

mr_virtus 16.11.2014 14:22
Цитата:
Сообщение от рони (Сообщение 340857)
а где linear и animate?
в функции hightlight

а как нужно?

danik.js 16.11.2014 14:48 
<style>
a{
    background: rgb(255, 0, 0);
    color: black;
    transition: background-color 1s 10ms linear;
}
a:hover{
    background: rgb(255, 255, 255);
}
</style>
<a href="#">Ссылка</a>

danik.js 16.11.2014 14:48
Ты опоздал со своей js-анимацией на несколько лет)

рони 16.11.2014 14:49
Цитата:
Сообщение от mr_virtus
в функции hightlight
там имена функций а где сами функции?

mr_virtus 16.11.2014 15:07
Цитата:
Сообщение от danik.js (Сообщение 341149)
Ты опоздал со своей js-анимацией на несколько лет)
это учебное задание :) я только осваиваю js :)

mr_virtus 16.11.2014 15:08
Цитата:
Сообщение от danik.js (Сообщение 341148) 
<style>
a{
    background: rgb(255, 0, 0);
    color: black;
    transition: background-color 1s 10ms linear;
}
a:hover{
    background: rgb(255, 255, 255);
}
</style>
<a href="#">Ссылка</a>
спасибо,

а это jquery?

просто мне нужно на js написать.

danik.js 16.11.2014 15:10
Цитата:
Сообщение от mr_virtus
а это jquery?
Ну разумеется.

mr_virtus 16.11.2014 15:10
Цитата:
Сообщение от рони (Сообщение 341150)
там имена функций а где сами функции?
спасибо, сейчас попробую написать функции и посмотреть что получиться!

mr_virtus 16.11.2014 15:25
Цитата:
Сообщение от рони (Сообщение 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>


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

спасибо.

рони 16.11.2014 15:26
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>

danik.js 16.11.2014 15:30
Если кликнуть несколько раз подряд - получается стробоскоп ))

danik.js 16.11.2014 15:32
Цитата:
Сообщение от mr_virtus
спасибо, сейчас попробую написать функции и посмотреть что получиться!
Ага. Ты так говоришь будто это маловажная деталь, и возможно дело даже не в ней ))

danik.js 16.11.2014 15:34 
<script>makeAwesomeApplication()</script>


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

рони 16.11.2014 15:37
Цитата:
Сообщение от mr_virtus
при наведении
onmouseover
http://learn.javascript.ru/events
Цитата:
Сообщение от mr_virtus
происходит переход на другую страницу.
там же
http://learn.javascript.ru/default-b...раузера

рони 16.11.2014 15:40
Цитата:
Сообщение от danik.js
Если кликнуть несколько раз подряд - получается стробоскоп ))
угу нет обработки и повтора и по умолчанию ... просто макет анимации

mr_virtus 16.11.2014 15:42
Цитата:
Сообщение от рони (Сообщение 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.

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

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

danik.js 16.11.2014 15:53
Цитата:
Сообщение от mr_virtus
это задача не реальная связать чистый js с технологией razor?
Они в параллельных мирах находятся: js на клиенте работает, а razor на серваке крутится. Им плевать друг на друга.

mr_virtus 16.11.2014 15:56
Цитата:
Сообщение от danik.js (Сообщение 341175)
Они в параллельных мирах находятся: js на клиенте работает, а razor на серваке крутится. Им плевать друг на друга.

понятно, спасибо.


Часовой пояс GMT +3, время: 22:12.