Полезное:
Как сделать разговор полезным и приятным
Как сделать объемную звезду своими руками
Как сделать то, что делать не хочется?
Как сделать погремушку
Как сделать так чтобы женщины сами знакомились с вами
Как сделать идею коммерческой
Как сделать хорошую растяжку ног?
Как сделать наш разум здоровым?
Как сделать, чтобы люди обманывали меньше
Вопрос 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. назва властивості елемента Переміщення · навколо нерухомої Землі (позначено коричневим кругом) з певною кутовою частотою ω рухається певна точка 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>Керування прозорістю Цей приклад отримано за допомогою такого коду. <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 лише таким чином. Для пізніших версій цей недолік виправлено.
|