Суть вот в чем. Есть скрипт который делает "снег" на странице. При попытке поменять итем скрипт ломается и не хочет работать.
собственно рабочий код. и библиотеки для его работы
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
$(document).ready(documentReady);
function documentReady()
{
var MAX_SNOW = 200;
var MAX_SNOW_SIZE = 7;
var MAX_SNOW_SPEED = 1;
snowStart();
function snowStart() {
console.log("// Snow animation start");
createSnows();
}
function createSnows() {
var container = $("#snow-animation-container");
for (var i = 0; i < MAX_SNOW; i++) {
var appendItem = getRandomItem(i);
container.append(appendItem);
var animateItem = $(".snow" + String(i));
var randomTime = Math.random() * MAX_SNOW_SPEED;
goAnimate(animateItem, i, randomTime);
goAnimate2(animateItem);
};
введите сюда код
console.log("// Create snows");
}
function goAnimate(item, id, randomTime) {
TweenMax.to(item, randomTime, {css:{marginTop:"+=100"}, ease:Linear.easeNone, onComplete:function() {
var topPosition = item.css("margin-top").replace("px","");
if (topPosition > $(window).height()) {
changePosition(item);
randomTime = Math.random() * MAX_SNOW_SPEED;
goAnimate(item, id, randomTime);
}
else {
goAnimate(item, id, randomTime);
}
}});
}
function goAnimate2(item) {
var directionTime = 1 + Math.floor( Math.random() * 5 );
var randomDirection = 1 + Math.floor( Math.random() * 4 );
var delayTime = 1 + Math.floor( Math.random() * 3 );
if (randomDirection == 1){
TweenMax.to(item, directionTime, {css:{marginLeft:"+=100"}, ease:Linear.easeOut, onComplete:function() {
TweenMax.to(item, directionTime, {css:{marginLeft:"-=100"}, delay:delayTime, ease:Linear.easeOut, onComplete:function() {
goAnimate2(item);
}});
}});
}
else if(randomDirection == 2)
{
TweenMax.to(item, directionTime, {css:{marginLeft:"-=100"}, ease:Linear.easeOut, onComplete:function() {
TweenMax.to(item, directionTime, {css:{marginLeft:"+=100"}, delay:delayTime, ease:Linear.easeOut, onComplete:function() {
goAnimate2(item);
}});
}});
}
else if(randomDirection == 3)
{
TweenMax.to(item, directionTime, {css:{marginLeft:"+=100"}, ease:Linear.easeOut, onComplete:function() {
goAnimate2(item);
}});
}
else if(randomDirection == 4)
{
TweenMax.to(item, directionTime, {css:{marginLeft:"-=100"}, ease:Linear.easeOut, onComplete:function() {
goAnimate2(item);
}});
}
}
function changePosition(item) {
var _width = Math.floor( Math.random() * MAX_SNOW_SIZE );
var _height = _width;
var _blur = Math.floor( Math.random() * 2 );
var _left = Math.floor( Math.random() * ($(window).width() - _width) );
var _top = -$(window).height() + Math.floor( Math.random() * ($(window).height() - _height) );
item.css("width", _width);
item.css("height", _height);
item.css("margin-left", _left);
item.css("margin-top", _top);
item.css("-webkit-filter", "blur(" + String(_blur) + "px)");
item.css("-moz-filter", "blur(" + String(_blur) + "px)");
item.css("-o-filter", "blur(" + String(_blur) + "px)");
item.css("-ms-filter", "blur(" + String(_blur) + "px)");
item.css("filter", "blur(" + String(_blur) + "px)");
}
function getRandomItem(id) {
var _width = Math.floor( Math.random() * MAX_SNOW_SIZE );
var _height = _width;
var _blur = Math.floor( Math.random() * 2 );
var _left = Math.floor( Math.random() * ($(window).width() - _width) );
var _top = -$(window).height() + Math.floor( Math.random() * ($(window).height() - _height) );
var _id = id;
return getSmallSnow(_width, _height, _blur, _left, _top, _id);
}
function getSmallSnow(width, height, blur, left, top, id) {
var item = "<div class='snow" + id + "' style='position:absolute; margin-left: " + left + "px; margin-top: " + top + "px; width: " + width + "px; height: " + height + "px; border-radius: 50%; background-color: white; -webkit-filter: blur(" + blur +"px); -moz-filter: blur(" + blur + "px); -o-filter: blur(" + blur + "px); -ms-filter: blur(" + blur + "px); filter: blur(" + blur + "px);'></div>"
return item;
}
}
но как только я меняю итем весь скрипт перестает работать. Итем img или с бекграундом.
Текст ошибки. Uncaught TypeError: Cannot read property 'replace' of undefined at f.onComplete итем который я хочу поставить
var item2= "<img class='fall fallen" + "src="+'img/layers/1.png'+"' style='position:absolute; margin-left: " + left + "px; margin-top: " + top + "px; width: " + width + "px; height: " + height + "px;/>"
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Всплывает окно сохранения пароля, но ни в отладчике фаерфокса, ни в адресной строке ничего не меняется
Есть у меня VSIX-расширение, которое в процессе работы может генерировать файлы с пользовательским контентом
Всем здравствуйте, Есть у меня приложение на wpf, на форме есть ListBox, если в нем я выделил строку, то как мне эту строку автоматически заставить...
Я формирую видео поток с помощью ffmpeg и отправляю по сетиПринимаю и воспроизвожу видео на другой стороне с помощью ffplay