16.11.2014, 15:25
|
|
Интересующийся
|
|
Регистрация: 14.11.2014
Сообщений: 14
|
|
Сообщение от рони
|
|
там имена функций а где сами функции?
|
я добавил:
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
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
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>
Последний раз редактировалось рони, 16.11.2014 в 15:31.
|
|
16.11.2014, 15:30
|
 |
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Если кликнуть несколько раз подряд - получается стробоскоп ))
__________________
В личку только с интересными предложениями 
|
|
16.11.2014, 15:32
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Сообщение от mr_virtus
|
|
спасибо, сейчас попробую написать функции и посмотреть что получиться!
|
Ага. Ты так говоришь будто это маловажная деталь, и возможно дело даже не в ней ))
__________________
В личку только с интересными предложениями
|
|
16.11.2014, 15:34
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
<script>makeAwesomeApplication()</script>
Чет не работает. По идее функция должна на пустой странице создать офигенную аппликуху навроде GMail. Возможно придется разместить на странице саму функцию, на несколько мегабайт, но думаю, это может не помочь))
__________________
В личку только с интересными предложениями
|
|
16.11.2014, 15:40
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
Сообщение от danik.js
|
|
Если кликнуть несколько раз подряд - получается стробоскоп ))
|
угу нет обработки и повтора и по умолчанию ... просто макет анимации |
|
16.11.2014, 15:42
|
|
Интересующийся
|
|
Регистрация: 14.11.2014
Сообщений: 14
|
|
|
Сообщение от рони
|
|
там имена функций а где сами функции?
|
|
Сообщение от рони
|
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.
не знаете как поправить?
|
|
16.11.2014, 15:47
|
|
Интересующийся
|
|
Регистрация: 14.11.2014
Сообщений: 14
|
|
|
и вообще, возможно ли связать чистый js с технологией razor?
|
|
16.11.2014, 15:53
|
|
Профессор
|
|
Регистрация: 11.09.2010
Сообщений: 8,804
|
|
|
Сообщение от mr_virtus
|
|
это задача не реальная связать чистый js с технологией razor?
|
Они в параллельных мирах находятся: js на клиенте работает, а razor на серваке крутится. Им плевать друг на друга.
__________________
В личку только с интересными предложениями
|
|
|
|
