Пятница, 2024-03-29, 0:08 AM

Поиск
Меню
Категории раздела
PHP [40]
Cкриптовый язык программирования общего назначения
MySQL [1]
Cвободная система управления базами данных (СУБД)
jQuery [8]
Библиотека JavaScript, фокусирующаяся на взаимодействии JavaScript и HTML
CSS [60]
Cредство описания, оформления внешнего вида веб-страниц
JavaScript [161]
Прототипно-ориентированный скриптовый язык программирования
Веб-дизайн [2]
Проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений
RegExp [1]
Регулярные выражения
SEO [2]
Продвижение и раскрутка сайтов. Заработок в сети.
C/C++ [3]
Компилируемый статически типизированный язык программирования общего назначения
Windows [4]
Программистам под ОС MS Windows
HGE [2]
Игровой движок HGE (Haaf's Game Engine)
Игровой дизайн [8]
Психология дизайна игр
Разработка игр [2]
Общие моменты, относящиеся к геймдеву
wxWidgets [2]
Библиотека инструментов для разработки кроссплатформенных приложений
PureBasic [10]
Кроссплатформенный компилятор и IDE для быстрой разработки
VST [6]
Steinberg's Virtual Studio Technology (VST)
iOS [1]
Mобильная операционная система, разрабатываемая и выпускаемая американской компанией Apple
Пиксельная графика [9]
Pixel art и все, что с ним связано
libGDX [2]
Кроссплатформенный открытый движок на Java, позволяющий создавать 2D и 3D игры под различные платформы, среди которых: Android, HTML5, Windows, Linux, iOS.
Поддержи проект!
Рекомендуем


Блог разработчика

Главная » 2013 » Июнь » 30 » Линк показа блока или слова с мерцающим фоном, затем возврат страницы вверх
11:17 PM
Линк показа блока или слова с мерцающим фоном, затем возврат страницы вверх
Cмотреть пример
<html>
 <head>
 <title>
 Линк показа блока или слова с мерцающим фоном, затем возврат страницы вверх
 </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <script type="text/javascript">
 <!--
 // Realised by apacheJeff
 // www.huntingground.freeserve.co.uk
 flashme=""
 step=5
 pause=3000
 flashrate=250
 timer=""

 function hlite_Init(){ // get page height and set top and bottom limit positions, prevent over-run
 Top_Limit=16
 Bottom_Limit=document.body.scrollHeight-(document.body.clientHeight+Top_Limit)
 }

 function whichway(callerID,targetID,dir,col){
 clearTimeout(timer)
 if(dir=="down"){
 CallerID=callerID
 TargetID=targetID
 Dir=dir
 Col=col
 scrolldown(CallerID,TargetID,Dir,Col) 
 }
 else{
 CallerID=targetID
 TargetID=callerID
 Dir=dir
 Col=col
 scrollup(CallerID,TargetID,Dir,Col)
 }
 }

 function scrolldown(callerID,targetID,dir,col){ //scroll down
 caller_pos=document.getElementById(callerID).offsetTop-(document.body.clientHeight/2) // calling elements position - half window height
 target_pos=document.getElementById(targetID).offsetTop-(document.body.clientHeight/2) // target elements position - half window height
 if(caller_pos<5){caller_pos=Top_Limit} // prevent scrolling past page top
 if(target_pos>document.body.scrollHeight-document.body.clientHeight){target_pos=Bottom_Limit} // prevent scrolling past page bottom
 clearInterval(flashme)
 flash(targetID,col)

 /*
 while(document.body.scrollTop >-5&&document.body.scrollTop<target_pos){ // scroll to target element
 window.scrollBy(0,step)
 }

 */
 timer=setTimeout(function(){scrolldown(callerID,targetID,dir,col)},10)
 if(document.body.scrollTop >-5&&document.body.scrollTop<target_pos){
 window.scrollBy(0,step)
 done=0
 return
 }
 else{
 clearTimeout(timer)
 done=1
 }

 if(done==1){

 if(dir=="down"){
 Dir=dir
 CallerID=callerID
 TargetID=targetID
 setTimeout("document.getElementById(TargetID).style.backgroundColor='';clearInterval(flashme);scrollup(CallerID,TargetID,Dir)",pause)
 }

 }

 }

 function scrollup(callerID,targetID,dir,col){ //scroll up
 caller_pos=document.getElementById(callerID).offsetTop-(document.body.clientHeight/2)
 target_pos=document.getElementById(targetID).offsetTop-(document.body.clientHeight/2)
 if(caller_pos<5){caller_pos=Top_Limit} // prevent scrolling past top of page
 if(target_pos>document.body.scrollHeight-document.body.clientHeight){target_pos=Bottom_Limit} // stop scrolling past page bottom
 clearInterval(flashme)
 flash(callerID,col)

 /*
 while(document.body.scrollTop >= caller_pos+5){
 window.scrollBy(0,-step)
 }
 */

 timer=setTimeout(function(){scrollup(callerID,targetID,dir,col)},10)
 if(document.body.scrollTop >= caller_pos+5){
 window.scrollBy(0,-step)
 done=0
 return
 }
 else{
 clearTimeout(timer)
 done=1
 }

 if(done==1){

 if(dir=="up"){
 Dir=dir
 CallerID=callerID
 TargetID=targetID
 setTimeout("document.getElementById(CallerID).style.backgroundColor='';clearInterval(flashme);scrolldown(CallerID,TargetID,Dir)",pause)
 }

 }

 }

 flashme=""
 function flash(whichID,col){
 clearTimeout(flashme)
 if(document.getElementById(whichID).style.backgroundColor==""){
 document.getElementById(whichID).style.backgroundColor=col
 }
 else{
 document.getElementById(whichID).style.backgroundColor=""
 }
 WhichID=whichID
 Col=col
 flashme=setTimeout("flash(WhichID,Col)",flashrate)
 }

 // -->
 </script>
 </head>
 <body onload="hlite_Init()">
 <a id="caller9" href="#null" onclick="whichway('caller9','target9','down','gold')">проверка</a> When you have a large amount of text on your page so that your reader has to scroll down the page
 and you explain something at the top of the page that is refering to something further down the page (out of view), sometimes it would be better if you could actually point out what you are
 referencing.
 <p>
 Example 1:
 </p>
 <p>
 I want to make sure you read the 3<sup>rd</sup> <a id="caller1" href="#null" onclick="whichway('caller1','target1','down','gold')"><font color="blue"><b>paragraph</b></font></a> that I am
 referring to now, but which you cannot see because it is lower down the page<br>
 So ... I create a keyword by emphasising the word paragraph, in bold, and make it a link.
 </p>
 <p>
 When you click the link the page scrolls down to bring the paragraph into view, the background of the paragraph flashes, and the page scrolls back up.
 </p>
 <p>
 Example 2:
 </p>
 <p>
 I want to point out a specific <span id="target3"><a id="caller2" href="#null" onclick="whichway('caller2','target2','down','red')"><font color="blue"><b>word</b></font></a></span> in that
 paragraph<br>
 </p>
 <hr>
 Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
 Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
 Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
 Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
 Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
 <div style="margin-left: 2em">
 Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
 Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
 Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
 Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
 </div>
 <div id="target1">
 Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
 Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
 Dummy Text Dummy Text Dummy Text Dummy <span id="target2">This Word!</span> Text Dummy Text Dummy Text<br>
 Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
 Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
 </div>
 <div style="margin-left: 2em">
 Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
 Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
 Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
 Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text Dummy Text<br>
 </div>
 <p>
 <a id="caller3" href="#null" onclick="whichway('caller3','target3','up','gold')"><font color="blue"><b>Try Me</b></font></a>
 </p>
 <hr>
 To create a <font color="blue">keyword</font> place it in a link, and give the link a unique <font color="red">ID</font>, include the onclick event which will pass the relevant arguments to
 function whichway('caller_ID','target_ID','direction','colour').
 <div style="margin-left: 2em">
 <a id="<font color=">caller1" href="#null" onclick="whichway('<font color="red">caller1</font>','target1','down','gold')"><font color="blue">Keyword</font></a>
 </div>
 <p>
 The target is simply:<br>
 <span id="target1">Highlighted Text</span>
 </p>
 <p>
 Each separate caller and individual target must have its own unique identity, but you can call the <span id="tar">same target</span> with more than one caller.
 </p>
 <p>
 IE:<br>
 Caller1 - Target1, Caller2 - Target1
 </p>
 <p>
 <a id="caller4" href="#null" onclick="whichway('caller4','tar','up','#000000')"><font color="blue"><b>Try Me</b></font></a> and <a id="caller5" href="#null" onclick=
 "whichway('caller4','tar','up','white')"><font color="blue"><b>Me</b></font></a>
 </p>
 <div class="copy">
 <pre>
<script type="text/javascript">

<!--
// Realised by apacheJeff
// www.huntingground.freeserve.co.uk
flashme=""
step=5
pause=3000
flashrate=250

function hlite_Init(){ // get page height and set top and bottom limit positions, prevent over-run
Top_Limit=10
Bottom_Limit=document.body.scrollHeight-(document.body.clientHeight+Top_Limit)
}

function whichway(callerID,targetID,dir,col){
if(dir=="down"){
CallerID=callerID
TargetID=targetID
Dir=dir
Col=col
scrolldown(CallerID,TargetID,Dir,Col)
}
else{
CallerID=targetID
TargetID=callerID
Dir=dir
Col=col
scrollup(CallerID,TargetID,Dir,Col)
}
}
<\/pre>
function scrolldown(callerID,targetID,dir,col){ //scroll down<br>
caller_pos=document.getElementById(callerID).offsetTop-(document.body.clientHeight/2) // calling elements position - half window height<br>
target_pos=document.getElementById(targetID).offsetTop-(document.body.clientHeight/2) // target elements position - half window height<br>
if(caller_pos<5){caller_pos=Top_Limit} // prevent scrolling past page top<br>
if(target_pos>document.body.scrollHeight-document.body.clientHeight){target_pos=Bottom_Limit}<br>
clearInterval(flashme)<br>
flash(targetID,col)<br>
<pre>
while(document.body.scrollTop >-5&&document.body.scrollTop<target_pos){ // scroll to target element
window.scrollBy(0,step)
}

if(dir=="down"){
Dir=dir
CallerID=callerID
TargetID=targetID
<\/pre>
setTimeout("document.getElementById(TargetID).style.backgroundColor='';clearInterval(flashme); scrollup(CallerID,TargetID,Dir)",pause)
<pre>
}
}

function scrollup(callerID,targetID,dir,col){ //scroll up
caller_pos=document.getElementById(callerID).offsetTop-(document.body.clientHeight/2)
target_pos=document.getElementById(targetID).offsetTop-(document.body.clientHeight/2)
if(caller_pos<5){caller_pos=Top_Limit} // prevent scrolling past top of page
if(target_pos>document.body.scrollHeight-document.body.clientHeight){target_pos=Bottom_Limit} // stop at page bottom
clearInterval(flashme)
flash(callerID,col)

while(document.body.scrollTop >= caller_pos+5){
window.scrollBy(0,-step)
}
if(dir=="up"){
Dir=dir
CallerID=callerID
TargetID=targetID
<\/pre>
setTimeout("document.getElementById(callerID).style.backgroundColor='';clearInterval(flashme); scrolldown(CallerID,TargetID,Dir)",pause)
<pre>
}
}

function flash(whichID,col){
if(document.getElementById(whichID).style.backgroundColor==""){
document.getElementById(whichID).style.backgroundColor=col
}
else{
document.getElementById(whichID).style.backgroundColor=""
}
WhichID=whichID
Col=col
flashme=setTimeout("flash(WhichID,Col)",flashrate)
}

// add onload="hlite_Init()" to the opening BODY tag

// -->
<b>
</script>

<a id="caller1" href="#null" onclick="whichway('caller1','target1','down','gold')">Keyword</a> 

<span id="target1">Highlighted text</span> 

<a id="caller2" href="#null" onclick="whichway('caller2','target1','up','blue')">Keyword</a>
</pre>
 </div>
 <p>
 Note:<br>
 In order to test the script yourself, once you have copied the above into your page you need to make your page long enough to scroll. To do this add about 20 line breaks<br>
 between caller1, target1, and caller2.
 </p>
 <p>
 The script ended up longer than anticipated because I had to include some preventative measures to stop the browser locking up.<br>
 This happened because I am using the <i><b>while</b></i> statement, and through experimental mishaps (positioning the caller and/or target at the extreme top or bottom of the page) I found that
 if the scroll went over the upper and lower limits of the page the <i><b>while</b></i> loop would not terminate, hence a lockup.<br>
 Function <b>Init</b> and two if statements in each function prevent this from happening.
 </p>
 <p>
 If you use this script and should have the misfortune to experience a lockup just increase the variable <b>Top_Limit</b> value <span id="target9" width="200"><img src="00001.jpg" width="150"
 id="caller9"></span>
 </p>
 </body>
</html>
Категория: JavaScript | Просмотров: 657 | Добавил: poster | Теги: пример, js, Код, JavaScript | Рейтинг: 0.0/0

Поблагодарить автора



Комментарии