2015-06-25 4 views
-1

Я создаю информационный киоск для отображения информации о продукции. Экран будет постоянно включен. Хотя информация, содержащаяся в большой таблице, будет периодически обновляться, я хочу периодически проходить линию через экран, чтобы уменьшить эффект ожога экрана. Я нашел этот код, и это именно то, что я хочу сделать, но я не могу заставить его работать:Предотвращение ожога экрана javascript program

JSFiddle

Я создал очень простой HTML page.When я проверить консоль разработчика, я получаю следующее error: ReferenceError: $ не определен.

Я новичок в JavaScript, и я пытался выяснить, как включить код в мою страницу.

var $burnGuard = $('<div>').attr('id','burnGuard').css({ 

Для этого бита кода выше, я должен указать либо «DIV» или сделать DIV в моей страницы и дать идентификатор? Должна ли страница также включать ссылку на jQuery? Любая помощь будет оценена по достоинству.

+4

Он использует что-то под названием «jQuery». Вы должны включить библиотеку jQuery поверх своего HTML, чтобы это работало. –

+0

'jquery' - это библиотека javascript ... вам нужно, чтобы ваш код работал, потому что код использует материал из библиотеки' jquery' ... – brso05

ответ

3

Вам не хватает ссылки на jquery. Вот код, который вам нужен. Также просто знайте, что вы всегда можете добавить /show в конец URL-адреса jsfiddle, а затем щелкните правой кнопкой мыши, чтобы выбрать View Frame source, чтобы увидеть код позади результата!

<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title> - jsFiddle demo by bradchristie</title> 

    <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script> 



    <style type='text/css'> 


    </style> 



<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
var $burnGuard = $('<div>').attr('id','burnGuard').css({ 
    'background-color':'#FF00FF', 
    'width':'1px', 
    'height':$(document).height()+'px', 
    'position':'absolute', 
    'top':'0px', 
    'left':'0px', 
    'display':'none' 
}).appendTo('body'); 

var colors = ['#FF0000','#00FF00','#0000FF'], color = 0, delay = 5000, scrollDelay = 1000; 
function burnGuardAnimate() 
{ 
    color = ++color % 3; 
    var rColor = colors[color]; 
    $burnGuard.css({ 
     'left':'0px', 
     'background-color':rColor, 
    }).show().animate({ 
     'left':$(window).width()+'px' 
    },scrollDelay,function(){ 
     $(this).hide(); 
    }); 
    setTimeout(burnGuardAnimate,delay); 
} 
setTimeout(burnGuardAnimate,delay); 

});//]]> 

</script> 


</head> 
<body> 



</body> 


</html> 
+0

Большое вам спасибо. Это сделал трюк. Я изменил «left»: $ (window) .width() + 'px' на 'left': $ (window) .width() - (ширина бара) + 'px', чтобы экран не перескакивал обновить. Я пошел с 5px-баром, и он работает хорошо. Мои экраны благодарю вас. – FoodEng24

4

Как вы можете видеть в скрипке, которую вы предоставили, включен jQuery. Вам нужно включить jQuery в свой файл, чтобы использовать его.

jQuery прикрепляется к знаку $, так вот откуда исходит ваша ошибка.

Смежные вопросы