IEとFF_javascriptスキルに対応した上位層と下位層の動作をjsで実現-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

IEとFF_javascriptスキルに対応した上位層と下位層の動作をjsで実現

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:01 PM

ここで皆さんに共有するのは、プロジェクトの小さな要件です。元々は非常に単純なものでしたが、FF の互換性を得るには長い時間がかかりました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>仿265上下层的移动(上移,下移)支持IE、FF</title>
<style type="text/css">
/*<![CDATA[*/
ul{
width:400px
}
li{
border:1px solid gray;
list-style:none
}
.txt{
padding:4px;
background-color:#ffffff
}
/*]]>*/
</style>
<script language="javascript" type="text/javascript">
//<![CDATA
window.onload=function(){
ggGroup(document.getElementById('test'),5);
};
function ggGroup(ele,margin){
margin=margin||0;
var bgcolors='#b3d580,#99c9b1,#b4a1d8,#f7c480,#d5d588,#eea2bb'.split(',');
var txtUp='上移↑ ',txtDown='下移↓';
var panels=children(ele);
for(var i=0,h=0;i<panels.length;i++){
var p=panels[i];
p.style.position='absolute';
p.style.width='100%';
var b=document.createElement('div');
with(b.style){
fontSize='12px';
padding='4px';
backgroundColor=bgcolors[i%bgcolors.length];
textAlign='right';
}
b.innerHTML='<span>'+txtUp+'</span><span>'+txtDown+'</span>';
b.firstChild.onclick=moveup;
b.firstChild.style.cursor='pointer';
b.lastChild.onclick=movedown;
b.lastChild.style.cursor='pointer';
p.insertBefore(b,p.firstChild);
p.style.top=h+'px';
p.index=i;
h+=p.offsetHeight+margin;
}
ele.style.height=h+'px';
ele.style.position='relative'; 
check(0,i-1); 
function check(){
for(var i=0;i<arguments.length;i++){
var x=arguments[i];
var c=panels[x].firstChild.childNodes;
c[0].style.visibility=x==0&#63;'hidden':'visible';
c[1].style.visibility=x==panels.length-1&#63;'hidden':'visible';
panels[x].index=x;
}
}
function moveup(evt){
var p=evt&#63;evt.target:event.srcElement;
p=p.parentNode.parentNode;
swap(p,panels[p.index-1]);
}
function movedown(evt){
var p=evt&#63;evt.target:event.srcElement;
p=p.parentNode.parentNode;
swap(p,panels[p.index+1]);
}
function swap(p1,p2){
var N=10;
var INTV=200;
var arr1,arr2;
var t1=parseInt(p1.style.top),t2=parseInt(p2.style.top);
var h1=p1.offsetHeight+margin,h2=p2.offsetHeight+margin;
arr1=makeArr(t1,t1<t2&#63;h2:-h2);
arr2=makeArr(t2,t1<t2&#63;-h1:h1);
for(var i=0;i<N;i++)(function(){
var j=i;
setTimeout(function(){
p1.style.top=arr1[j]+"px";
p2.style.top=arr2[j]+"px";
if(j==N-1){
panels[p1.index]=p2;
panels[p2.index]=p1;
check(p1.index,p2.index);
}
},(j+1)*INTV/N);
})();
function makeArr(f,x){
var ret=[];
for(var i=0;i<N;i++)
ret[i]=Math.round(f+i*x/(N-1));
return ret;
}
}
function children(e){
var ret=[];
for(var i=0,c=e.childNodes;i<c.length;i++)
if(c[i].nodeType==1)
ret.push(c[i]);
return ret;
}
}
//]]>
</script>
</head>
<body>
<ul id="test">
<li> <div class="txt"><h2>Hello<br />baby</h2></div></li>
<li> <div class="txt">
显示内容1显示内容1显示内容1显示内容1
</div></li>
<li>
<div class="txt">
<i>人之初，性本善</i>
</div></li>
<li>
<div class="txt">
显示内容2<br />显示<br />...<br />显示内容2！
</div></li>
</ul>
</body>
</html>

ログイン後にコピー

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7338

Java チュートリアル

1627

CakePHP チュートリアル

1352

Laravel チュートリアル

1265

PHP チュートリアル

1210

Related knowledge

JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。驚くほど簡単です！検索をyに制限することができます

独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

それで、あなたはここで、Ajaxと呼ばれるこのことについてすべてを学ぶ準備ができています。しかし、それは正確には何ですか？ Ajaxという用語は、動的でインタラクティブなWebコンテンツを作成するために使用されるテクノロジーのゆるいグループ化を指します。 Ajaxという用語は、もともとJesse Jによって造られました

例JSONファイルの例 Mar 03, 2025 am 12:35 AM

この記事シリーズは、2017年半ばに最新の情報と新鮮な例で書き直されました。このJSONの例では、JSON形式を使用してファイルに単純な値を保存する方法について説明します。キー価値ペア表記を使用して、あらゆる種類を保存できます

8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

楽なWebページレイアウトのためにjQueryを活用する：8本質的なプラグイン jQueryは、Webページのレイアウトを大幅に簡素化します。この記事では、プロセスを合理化する8つの強力なjQueryプラグイン、特に手動のウェブサイトの作成に役立ちます

＆＃x27; this＆＃x27; JavaScriptで？ Mar 04, 2025 am 01:15 AM

コアポイントこれは通常、メソッドを「所有」するオブジェクトを指しますが、関数がどのように呼び出されるかに依存します。現在のオブジェクトがない場合、これはグローバルオブジェクトを指します。 Webブラウザでは、ウィンドウで表されます。関数を呼び出すと、これはグローバルオブジェクトを維持しますが、オブジェクトコンストラクターまたはそのメソッドを呼び出すとき、これはオブジェクトのインスタンスを指します。 call（）、apply（）、bind（）などのメソッドを使用して、このコンテキストを変更できます。これらのメソッドは、与えられたこの値とパラメーターを使用して関数を呼び出します。 JavaScriptは優れたプログラミング言語です。数年前、この文はそうでした