オリジナルJavaScriptはスライド効果を実現します。
私たちがページを作る時、特にトップページを作る時、通常はウェブサイト全体の他の主体ページにリンクできるナビゲーションバーを設計します。あるいはウェブサイトの紹介文にこのページのジャンプが含まれます。通常はtitle属性を使ってこのジャンプリンクにいくつかの説明文を追加します。しかし、私たちはスライドのデモを作ることによって、ユーザーの体験を強化することができます。ユーザーのマウスがあるリンクに移動すると、下に対応する画像のプレビューが表示されます。このようにしてページを美化し、サイト全体のインタラクティブ性を大幅に増加しました。次は綺麗なスライドスクリプトを作成しましょう。
準備：脚本を作る前に、一枚の写真を作る必要があります。この写真はすべてのプレビュー効果を示すべきです。
index.
シリアル表を作成し、ページリンクを追加します。
このナビゲーションバーにスタイルを追加します。
実現の考え方:
脚本を作る前に、まず考えを整理して、何をするかを決めます。
1.新しいノードを作成して、プレビュー画像を表示します。
2.aラベルにonmouseoverイベントを追加する
3.setTimeout()関数と、ピクチャ要素のleft、topオフセット量(設定されたleft top属性を取得するときは、整数に変換します)の移動によりアニメーション効果を達成します。
このとき、マウスを異なるリスト項目に移動すると、リストの下の画像が対応するプレビュー位置に移動します。
これで簡単なスライドデモが完成しました。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。
準備：脚本を作る前に、一枚の写真を作る必要があります。この写真はすべてのプレビュー効果を示すべきです。
index.
シリアル表を作成し、ページリンクを追加します。
<body>
<h1> </h1>
<p> </p>
<ol id="list">
<li>
<a href="list1.html" >First</a>
</li>
<li>
<a href="list2.html" >Second</a>
</li>
<li>
<a href="list3.html" >Third</a>
</li>
</ol>
<!-- >-->
<script src="script.js"></script>
</body>このナビゲーションバーにスタイルを追加します。
ol{
padding-left: 20px;
}
ol li{
display: inline;
margin-right: 10px;
}
#view{
width: 600px;
height: 200px;
position: absolute;
}
#slideShow{
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}実現の考え方:
脚本を作る前に、まず考えを整理して、何をするかを決めます。
1.新しいノードを作成して、プレビュー画像を表示します。
2.aラベルにonmouseoverイベントを追加する
3.setTimeout()関数と、ピクチャ要素のleft、topオフセット量(設定されたleft top属性を取得するときは、整数に変換します)の移動によりアニメーション効果を達成します。
/* load*/
function addLoadEvent(fun){
var oldLoad = window.onload;
if(typeof oldLoad != "function"){
window.onload = fun;
}else{
window.onload = function(){
oldLoad();
fun();
}
}
}
/*insertAfter*/
function insertAfter(newNode,oldNode){
var parent = oldNode.parentNode;
if(parent.lastChild == oldNode){
parent.appendChild(newNode);
}else{
parent.insertBefore(newNode,oldNode.nextSibling);
}
}
function show(){
/* */
if(!document.getElementById) return false;
if(!document.getElementsByTagName) return false;
if(!document.createElement) return false;
/* */
var list = document.getElementById("list");
/* */
/* div*/
var div = document.createElement("div");
div.setAttribute("id","slideShow");
/*img*/
var img = document.createElement("img");
img.setAttribute("id","view");
img.setAttribute("src","image.jpg");
img.setAttribute("alt"," ");
/* insertAfter() div list */
insertAfter(div,list);
div.appendChild(img);
/* */
var a = list.getElementsByTagName("a");
a[0].onmouseover =function(){
moveElement("view",0,0,10);
};
a[1].onmouseover = function(){
moveElement("view",-200,0,10);
};
a[2].onmouseover = function(){
moveElement("view",-400,0,10);
};
}
/*
* ： id； ； ；
*/
function moveElement(elementID,left,top,interval){
/* */
if(!document.getElementById) return false;
if(!document.getElementById(elementID)) return false;
/* */
var img = document.getElementById(elementID);
/*
*
*/
if(img.moveNow){
/* */
clearTimeout(img.moveNow);
}
/* left top*/
if(!img.style.left){
img.style.left = "0px";
}
if(!img.style.top){
img.style.top = "0px";
}
/*
* , parseInt() */
var oldLeft = parseInt(img.style.left);
var oldTop = parseInt(img.style.top);
/* */
if(oldLeft == left && oldTop == top){
return true;
}
/* ，
* ，
* , 1/10
*/
/*dist */
var dist = 0;
if(oldLeft < left){
/*ceil() 1 */
dist = Math.ceil((left-oldLeft)/10);
oldLeft = oldLeft+dist;
}
if(oldLeft > left){
dist = Math.ceil((oldLeft-left)/10);
oldLeft = oldLeft - dist;
}
if(oldTop < top){
dist = Math.ceil((top-oldTop)/10);
oldTop = oldTop+dist;
}
if(oldTop > top){
dist = Math.ceil((oldTop-top)/10);
oldTop = oldTop - dist;
}
/* */
img.style.left = oldLeft+"px";
img.style.top = oldTop+"px";
/* */
var result = "moveElement('"+elementID+"',"+left+","+top+","+interval+")";
/* ， */
img.moveNow = setTimeout(result,interval);
}
addLoadEvent(show);このとき、マウスを異なるリスト項目に移動すると、リストの下の画像が対応するプレビュー位置に移動します。
これで簡単なスライドデモが完成しました。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。