Форум АНТИЧАТ - Пульсация картинки (Java Script) (как зациклить ?)

Пульсация картинки (Java Script) (как зациклить ?)

01.08.2009, 21:15

ufalog

Участник форума

Регистрация: 28.07.2007

Сообщений: 177

Провел на форуме:
274360

Репутация: 5

Отправить сообщение для ufalog с помощью ICQ

Пульсация картинки (Java Script) (как зациклить ?)

как сделать чтобы картинка пульсировала?

PHP код:


		
			
<html>

<head>

<!-- Устанавливаем изначальную прозрачность картинок -->

<style type="text/css">

  img {

    filter:alpha(opacity=30);

    -moz-opacity: 0.3;

    -khtml-opacity: 0.3;

    opacity: 0.3;

  }

</style>



<!-- Подключаем библиотеку -->

<script type="text/javascript" src="opacity.js"></script>



<script type="text/javascript">

// Создаем правило изменения прозрачности: задаем имя правила, начальную и конечную прозрачность, а также необязательный параметр задержки влияющий на скорость смены прозрачности

  fadeOpacity.addRule('oR1', .3, 1, 50);

</script>



</head>

<body>



<img id="fImg1" onMouseOver="fadeOpacity(this.id, 'oR1')"  onmouseout="fadeOpacity.back(this.id)" src="http://tigir.com/images/articles/strawberry.jpg"

width="100" height="80" />



<img id="fImg2" onMouseOver="fadeOpacity(this.id, 'oR1')"  onmouseout="fadeOpacity.back(this.id)" src="img/tomato.jpg" width="82" height="100" />



<img id="fImg3" onMouseOver="fadeOpacity(this.id, 'oR1')"  onmouseout="fadeOpacity.back(this.id)" src="img/sweet_cherry.jpg" width="98" height="97" />





</body>

</html>

opacity.js

PHP код:


		
			


/*

wwww.tigir.com - 06.07.2006



Source: http://www.tigir.com/js/opacity.js



Библиотека opacity.js к статье "CSS прозрачность (css opacity, javascript opacity)" - http://www.tigir.com/opacity.htm



setElementOpacity - установка прозрачности

getOpacityProperty - проверка, есть ли возможность менять прозрачность

fadeOpacity - плавное изменение прозрачности

*/



/* Функция кроссбраузерной установки прозрачности



Пример: setElementOpacity(document.body, 0.5); //сделать документ прозрачным на половину

*/

function setElementOpacity(oElem, nOpacity)

{

        var p = getOpacityProperty();

        (setElementOpacity = p=="filter"?new Function('oElem', 'nOpacity', 'nOpacity *= 100;    var oAlpha = oElem.filters["DXImageTransform.Microsoft.alpha"] || oElem.filters.alpha;  if (oAlpha) oAlpha.opacity = nOpacity; else oElem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")";'):p?new Function('oElem', 'nOpacity', 'oElem.style.'+p+' = nOpacity;'):new Function)(oElem, nOpacity);

}



// Функция getOpacityProperty() возвращает свойство которое используется для смены прозрачности или undefined, и может использоваться для проверки возможности изменения прозрачности

function getOpacityProperty()

{

        var p;

        if (typeof document.body.style.opacity == 'string') p = 'opacity';

        else if (typeof document.body.style.MozOpacity == 'string') p =  'MozOpacity';

        else if (typeof document.body.style.KhtmlOpacity == 'string') p =  'KhtmlOpacity';

        else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)[1]>=5.5) p =  'filter';

        

        return (getOpacityProperty = new Function("return '"+p+"';"))();

}



/* Функции для плавного изменения прозрачности:



1) fadeOpacity.addRule('opacityRule1', 1, 0.5, 30); //вначале создаем правило, задаем имя правила, начальную прозрачность и конечную, необязательный параметр задержки, влийяющий на скорость смены прозрачности

2) fadeOpacity('elemID', 'opacityRule1'); // выполнить плавную смену прозрачности элемента с id равным elemID, по правилу opacityRule1

3) fadeOpacity.back('elemID'); //вернуться в исходное сотояние прозрачности

*/

function fadeOpacity(sElemId, sRuleName, bBackward)

{

        var elem = document.getElementById(sElemId);

        if (!elem || !getOpacityProperty() || !fadeOpacity.aRules[sRuleName]) return;

        

        var rule = fadeOpacity.aRules[sRuleName];

        var nOpacity = rule.nStartOpacity;

        

        if (fadeOpacity.aProc[sElemId]) {clearInterval(fadeOpacity.aProc[sElemId].tId); nOpacity = fadeOpacity.aProc[sElemId].nOpacity;}

        if ((nOpacity==rule.nStartOpacity && bBackward) || (nOpacity==rule.nFinishOpacity && !bBackward)) return;



        fadeOpacity.aProc[sElemId] = {'nOpacity':nOpacity, 'tId':setInterval('fadeOpacity.run("'+sElemId+'")', fadeOpacity.aRules[sRuleName].nDalay), 'sRuleName':sRuleName, 'bBackward':Boolean(bBackward)};

}



fadeOpacity.addRule = function(sRuleName, nStartOpacity, nFinishOpacity, nDalay){fadeOpacity.aRules[sRuleName]={'nStartOpacity':nStartOpacity, 'nFinishOpacity':nFinishOpacity, 'nDalay':(nDalay || 30),'nDSign':(nFinishOpacity-nStartOpacity > 0?1:-1)};};



fadeOpacity.back = function(sElemId){fadeOpacity(sElemId,fadeOpacity.aProc[sElemId].sRuleName,true);};



fadeOpacity.run = function(sElemId)

{

        var proc = fadeOpacity.aProc[sElemId];

        var rule = fadeOpacity.aRules[proc.sRuleName];

        

        proc.nOpacity = Math.round(( proc.nOpacity + .1*rule.nDSign*(proc.bBackward?-1:1) )*10)/10;

        setElementOpacity(document.getElementById(sElemId), proc.nOpacity);

        

        if (proc.nOpacity==rule.nStartOpacity || proc.nOpacity==rule.nFinishOpacity) clearInterval(fadeOpacity.aProc[sElemId].tId);

}

fadeOpacity.aProc = {};

fadeOpacity.aRules = {};

счас при наведении мышкой изображение становиться ярче

Какой параметр изменить чтоб картинка сама вспыхивалат.е была то ярче то бледнее... как бы эффект пульсации чтоб был?