2009-09-28 2 views
0

Я создаю слайд-шоу с использованием javascript, который затухает изображениями. В то же время я обнаружил, что для изменения непрозрачности изображения я должен использовать другой API, в зависимости от того, просматривается ли страница в Firefox или IE.Как Google Chrome игнорировать IE Javascript

Firefox:

img.style.opacity = [value 0 to 1]; 

IE:

img.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity= [value 0 to 100])"; 

Таким образом, в настоящее время, я использую <script LANGUAGE="JScript"> для кода, который предназначен для IE. Это было suggested in the Mozilla docs.

Проблема: Chrome считает, что мой код <script LANGUAGE="JScript"> действителен, когда его нет.

Как заставить Chrome игнорировать код внутри <script LANGUAGE="JScript">? Или как сделать кросс-браузер кода непрозрачности?

ответ

8

Если вы не хотите использовать библиотеку, такие как JQuery, вы должны использовать условные комментарии для IE цель:

<script type="text/javascript" src="scripts.js"></script> 
<!--[if IE]> 
    <script type="text/javascript" src="ie-only-scripts.js"></script> 
<![endif]--> 

Затем определим функцию setOpacity в scripts.js:

function setOpacity(element, value) { 
    element.style.opacity = value; 
} 

Наконец , перепишите это определение функции в файле ie-only-scripts.js:

function setOpacity(element, value) { 
    element.style.filter="progid:DXImageTransform.Microsoft.Alpha(opacity=" + (value * 100) + ")"; 
} 

Поскольку IE является единственным браузером для загрузки второго файла сценария, у него есть своя специальная версия функции, в то время как другие браузеры делают что-то правильно ;-)

+0

Это именно то, что я просил. Благодаря! – swajak

2

Используйте библиотеку, такую ​​как jQuery или scriptaculous. Они имеют кросс-браузерную анимацию и встроенный CSS.

+0

Хотя кажется излишним добавить 50 или 60 КБ накладных расходов для простой анимации непрозрачности, я повышаю это, потому что раньше я использовал jQuery, и это грандиозно. Благодаря! – swajak

+0

Я согласен, что это слишком много для этой штуки. По-моему, использование библиотеки в любом случае - хорошая вещь. Он сделает все зацепление событий и так далее и т. Д. Намного чище. Но опять же, если у вас не так много javascripts на вашем сайте .. Зависит от ситуации :) –

0

Другая возможность - проверить внутри функции javascript, определенные свойства, используемые IE или Firefox, затем установите соответствующий. Например:

function setOpacity(element, value) { 
    if (typeof (element.style.opacity) != "undefined") { 
     // This is for Firefox, Safari, Chrome, etc. 
     element.style.opacity = value; 
    } 
    else if (typeof (element.style.filter) != "undefined") { 
     // This is for IE. 
     element.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + (value * 100) + ")"; 
    } 
} 

Вы должны знать, есть ли у определенного браузера оба свойства. В этом случае у Google Chrome есть свойство фильтра, а также свойство непрозрачности, но у IE нет свойства непрозрачности. Таким образом, порядок вышеприведенных предложений if будет работать для обоих браузеров.

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