recherche

Maison >interface Web >js tutoriel >Exemple d'affichage de code pour afficher une partie d'une page Web masquée

Exemple d'affichage de code pour afficher une partie d'une page Web masquée

伊谢尔伦
伊谢尔伦original
2017-06-16 10:49:242797parcourir

L'effet spécial de la page Web consistant à afficher une partie du contenu d'une page Web masquée est entièrement obtenu à l'aide de CSS. Le principe est d'afficher et de masquer les DIV. C'est très simple, mais l'effet est bon, j'espère que vous l'aimerez tous. 

<html>
<head>
<title>div动画显示cnn6.net??网页特效代码</title>
<style>
* { margin:0; padding:0;}
body { text-align:center; font:75% Verdana, Arial, Helvetica, sans-serif;}
h1 { font:125% Arial, Helvetica, sans-serif; text-align:left; font-weight:bolder; background:#333;  padding:3px; display:block; color:#99CC00}
.class1 { width:40%; background:#CCC; position:relative; margin:0 auto; padding:5px;}
span { position:absolute; right:10px; top:8px; cursor:pointer; color:yellow;}
p { text-align:left; line-height:20px; background:#333; padding:3px; margin-top:5px; color:#99CC00}
#class1content { height:300px;overflow:hidden}
</style>
<script>
function $(element){
return element = document.getElementById(element);
}
function $D(){
var d=$(&#39;class1content&#39;);
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h+=50; //设置层展开的速度cnn6.net??
if(h>=maxh){
d.style.height=&#39;300px&#39;;
clearInterval(iIntervalId);
}else{
d.style.display=&#39;block&#39;;
d.style.height=h+&#39;px&#39;;
}
}
iIntervalId=setInterval(dmove,2);
}
function $D2(){
var d=$(&#39;class1content&#39;);
var h=d.offsetHeight;
var maxh=300;
function dmove(){
h-=50;//设置层收缩的速度cnn6.net??
if(h<=0){
d.style.display=&#39;none&#39;;
clearInterval(iIntervalId);
}else{
d.style.height=h+&#39;px&#39;;
}
}
iIntervalId=setInterval(dmove,2);
}
function $use(){
var d=$(&#39;class1content&#39;);
var sb=$(&#39;stateBut&#39;);
if(d.style.display==&#39;none&#39;){
$D();
sb.innerHTML=&#39;展开&#39;;
}else{
$D2();
sb.innerHTML=&#39;收缩&#39;;
}
}
</script>
</head>
<body>
<div class="class1">
<h1>Alone展开隐藏效果</h1>
<span id="stateBut" onclick="$use()">展开</span>
<p id="class1content">小蜗牛问妈妈：为什么我们从生下来，就要背负这个又硬又重的壳呢？<br />
妈妈：因为我们的身体没有骨cnn6.net??骼的支撑，只能爬，又爬不快。所以要这个壳的保护！<br />
小蜗牛：毛虫姊姊没有骨头，也爬不快，为什么她却不用背这个又硬又重的壳呢？ <br />
妈妈：因为毛虫姊姊能变成蝴蝶，cnn6.net??天空会保护她啊。 <br />
小蜗牛：可是蚯蚓弟弟也没骨头爬不快，也不会变成蝴蝶他什么不背这个又硬又重的壳呢？ <br />
妈妈：因为蚯蚓弟弟会钻土, 大地会保护他啊。 <br />
小蜗牛哭了起来：cnn6.net??我们好可怜，天空不保护，大地也不保护。 <br />
蜗牛妈妈安慰他：所以我们有壳啊！我们不靠天，也不靠地，我们靠自己。</p>
</div>
</body>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Résumé des expressions régulières js et jquery couramment utiliséesArticle suivant：Résumé des expressions régulières js et jquery couramment utilisées

Articles Liés

Voir plus