Полезное:
Как сделать разговор полезным и приятным
Как сделать объемную звезду своими руками
Как сделать то, что делать не хочется?
Как сделать погремушку
Как сделать так чтобы женщины сами знакомились с вами
Как сделать идею коммерческой
Как сделать хорошую растяжку ног?
Как сделать наш разум здоровым?
Как сделать, чтобы люди обманывали меньше
Вопрос 4. Как сделать так, чтобы вас уважали и ценили?
Как сделать лучше себе и другим людям
Как сделать свидание интересным?
Категории:
АрхитектураАстрономияБиологияГеографияГеологияИнформатикаИскусствоИсторияКулинарияКультураМаркетингМатематикаМедицинаМенеджментОхрана трудаПравоПроизводствоПсихологияРелигияСоциологияСпортТехникаФизикаФилософияХимияЭкологияЭкономикаЭлектроника
Текст Текст
Код має такий вигляд.
...<style type="text/css">#bl{margin:5px 0; position:relative; height:120px}#six{ color: lime; padding: 0px; width: 160px; height: 120px; position: absolute; left: 0px; top: 0px; z-index: 1; }#seven{color: lime; visibility: hidden; padding: 0px; width: 160px; height: 120x; position: absolute; left: 0px; top: 0px; z-index: 2; }</style><script language="JavaScript">...function ShowHide() { if (document.getElementById("seven").style.visibility == "visible") document.getElementById("seven").style.visibility = "hidden" else document.getElementById("seven").style.visibility = "visible";}</script>...<div id="bl"><div id="six"><B><font size=+5>Текст Текст</font></B></div><div id="seven"> <img src=img.gif></div></div></B>...Таким чином, доступ до властивості здійснюють таким чином:
document.getElementById(" назва елемента ").style. назва властивості елемента
Переміщення
Властивості left і top визначають розташування, задаючи відстані від лівого та верхнього країв вікна. Змінюючи їх, можна пересувати блоки. Покажемо це на прикладі рухомої моделі Птолемея, у якій рух небесних тіл здійснюється в одній площині. При цьому:
· навколо нерухомої Землі (позначено коричневим кругом) з певною кутовою частотою ω рухається певна точка A (позначено синім кругом);
· навколо рухомої точки A з кутовою частотою 2ω рухається певна точка B (позначено червоним кругом);
· навколо рухомої точки B з кутовою частотою 3ω рухається небесне тіло (планета) C (позначено салатовим кругом).
Для поданої далі моделі радіуси обертання утворюють спадну геометричну прогресію з коефіцієнтом 1/2. Для справжньої моделі Птолемея радіуси обертання вибиралися з метою найточнішого опису видимого із Землі руху планет. Для сучасного математика не дивно, що таким чином вдалося доволі точно описати такий рух. Дивно, як давні греки додумалися до подання періодичних функцій рядами Фур'є (у моделі Птолемея — до третього члена).
Код поданого прикладу має такий вигляд.
<html><head> <style> own {position:absolute; left:-9; top:-9; width:0; height:0; visibility:'visible'} </style> <script> var x0 // поточна абсциса шару layer0var x1 // поточна абсциса шару layer1var x2 // поточна абсциса шару layer2var x3 // поточна абсциса шару layer3var x0 // поточна абсциса шару layer0var y1 // поточна ортината шару layer1var y2 // поточна ортината шару layer2var y3 // поточна ортината шару layer3var t // параметр-час function init () // встановлення початкових параметрів{layer0.style.left=250 layer0.style.top =250 layer1.style.left=450 layer1.style.top =250 layer2.style.left=550 layer2.style.top =250 layer3.style.left=600 layer3.style.top =250 t=0 } // Переміщення function succ() {t+=1 x0=200+50 y0=200+50 x1=x0+Math.cos(t/20)*200+50 y1=y0+Math.sin(t/20)*200+50 x2=x1+Math.cos(2*t/20)*100 y2=y1+Math.sin(2*t/20)*100 x3=x2+Math.cos(3*t/20)*50 y3=y2+Math.sin(3*t/20)*50 layer0.style.left=x0 layer0.style.top =y0 layer1.style.left=x1 layer1.style.top =y1 layer2.style.left=x2 layer2.style.top =y2 layer3.style.left=x3 layer3.style.top =y3 setTimeout("succ();",75) } </script> </head> <body onload="init()"> <form name="form1"> <input type="button" value="Почати рух" onClick="succ()"> <input type="button" value="На початок" onClick="init()"> </form> <own id="layer0"><font size=+3 color=brown>•</font></own> <own id="layer1"><font size=+3 color=blue>•</font></own><own id="layer2"><font size=+3 color=red>•</font></own> <own id="layer3"><font size=+3 color=lime>•<font></own> </body></html>Вмикання видимості
Натисніть наступну клавішу для перегляду прикладу вмикання видимості шарів.
Код поданого прикладу має такий вигляд.
<html><head><STYLE type="text/css">div {position: absolute; top: 20; left: 160; visibility: hidden; }</STYLE><SCRIPT LANGUAGE="JavaScript"><!--function show_div(d){ div1.style.visibility='hidden'; div2.style.visibility='hidden'; div3.style.visibility='hidden'; d.style.visibility='visible';} //--></SCRIPT></head><body><a href="javascript:void(0)" onClick="show_div(div1);">показати шар 1</a><br><a href="javascript:void(0)" onClick="show_div(div2);">показати шар 2</a><br><a href="javascript:void(0)" onClick="show_div(div3);">показати шар 3</a><div id="div1"><font color=red> Перший шар містить текст червоного кольору</font></div><div id="div2"><font color=green> Другий шар містить текст зеленого кольору</font></div><div id="div3"><font color=blue> Третій шар містить текст синього кольору</font></div></body></html>Керування видимістю частини зображення
Натисніть кнопку, щоб спостерігати за виведенням лише частини зображення, яка (часнина) збільшується від центру до країв.
Останній приклад отримано за допомогою такого коду.
<HTML><HEAD> <TITLE>Зміна видимої частини</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- var w // ширина зображенняvar h // висота зображенняvar mx // половина wvar my // половина hvar p; // крок зростання розмірів видимої частиниvar d= document function init() // визначення початкових параметрів {w = d.all["l1"].document.mypict.width h = d.all["l1"].document.mypict.height mx=Math.round(w/2) my=Math.round(h/2) p=0 } function anim () // розкриття зображення від центру до країв { p += 3 var t=d.all["l1"].style mpym = my-p mpyp = my+p mpxm = mx-p mpxp = mx+p t.clip=eval('"rect("+mpym+" "+mpxp+" "+mpyp+" "+ mpxm+")"') if (!((p > mx) && (p > my))) setTimeout("anim()",100) } //--></SCRIPT></HEAD> <BODY> <FORM><input type="button" value=Показати onClick="init(); anim()"></FORM><div id="l1" STYLE="position: absolute; overflow: hidden; visibility: visible;"> <img id="pic" name="mypict" src="image.png"> </div></BODY></HTML>Керування прозорістю
W3C у рекомендації CSS3 означає властивість opacity для застосування ефекту прозорості до елементів сторінки. Така властивість набуває величин у межах від 0 до 1 (десятковий дріб). При величині 0 елемент стає повністю прозорим, а при величині 1 абсолютно непрозорим. Таку властивість можна застосовувати щодо будь-яких елементів сторінки. На жаль, різні проглядачі використовують по різному таку властивість. Тому для однакового ефекту потрібно передбачити у коді програми використання різних проглядачів і навіть їхніх версій. Радимо скористатися наявним у глобальній мережі прикладом розв'язання цієї проблеми, поданим бібліотекою http://www.tigir.com/js/opacity.js. Натисніть наступну клавішу для перегляду прикладу зміни прозорості шару при наведенні курсора миші.
Цей приклад отримано за допомогою такого коду.
<html><head><title>Зміна прозорості при наведенні курсору миші</title><!-- Встановлення початкової прозорості --><style type="text/css"> img{ filter:alpha(opacity=0); -moz-opacity: 0.2; -khtml-opacity: 0.2; opacity: 0.2; }</style><!-- Підключення локальної копії бібліотеки --><script type="text/javascript" src="opacity.js"> //</script> <script type="text/javascript">// Створення правила зміни прозорості: fadeOpacity.addRule('oR1', // назва .2, // початкова прозорість 1, // кінцева прозорість 100); // параметр затримки</script></head><body><img id="fImg1"onMouseOver="fadeOpacity(this.id, 'oR1')" onMouseOut="fadeOpacity.back(this.id)" src="img.gif"/></body></html>Для миттєвої зміни прозорості на повну можна скористатися псевдо-селектором :hover, який дозволяє визначити стиль для елемента у момент наведення на нього курсора миші, як це зроблено для наступного зображення
за допомогою такого коду:
...<style type="text/css">a:hover img {filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40); -moz-opacity: 0.4; -khtml-opacity: 0.4; opacity: 0.4; }</style><a href="javascript:void(0)"><img src="img.gif"></a>...Зображення розташовано всередині тега <a>...</a>, бо Internet Explorer до версії 6 включно сприймає :hover лише таким чином. Для пізніших версій цей недолік виправлено.
Date: 2015-07-24; view: 246; Нарушение авторских прав; Помощь в написании работы --> СЮДА... |