javascript学習ノート(1)スローモーション効果表示隠しdiv
8055 ワード
もっと読む
javascriptを勉強して、二つの機能を実現します.
隠しdivを表示する. は、Tweenアルゴリズムによりdiv表示および非表示の緩和効果を実現する.
参照リンク:緩動効果参考文章:JavaScript)js Tweenタイプ
htmlコード
javascriptを勉強して、二つの機能を実現します.
参照リンク:緩動効果参考文章:JavaScript)js Tweenタイプ
htmlコード
<link rel="stylesheet" type="text/css" href="css/hidden.css" media="all"/>
<script src="js/hidden.js" type="text/javascript"/>
<div id="wrapper">
<div class="contents">
<div class="content">
<h1>Structuring our XHTML</h1>
<p>There are plenty of reasons why you might feel the urge to wax verbose on your website's front page: to prevent your users from having to click through to a new page to find your information, to avoid having to reload the page, or even to improve your front page's SEO. But just because your front page is text-heavy doesn't mean it all needs to be visible at once.Today's tutorial will show you how to hide away extra bits of content using CSS and JavaScript, to be revealed at the click of a button. This is a great technique, because displaying the additional content doesn't require a refresh or navigation to a new page and all your content is still visible to search engine bots that don't pay any attention to CSS or JavaScript.</p>
<p>We'll start with structuring our XHTML appropriately:</p>
<div class="show">show more.</div>
<div class="hidden" style="display:none">
<p>There are three things of importance here: the "show" anchor, the "hide" anchor, and our "hidden" div. Each has been given an ID and a class. The IDs are used by our JavaScript to locate and style the items appropriately. I'm then using the classes to set our "default" CSS. Technically you could just use the IDs the set that CSS as well, but if you wanted more than one hidden section on your page, that could get messy.</p>
<p>You'll notice in the code above that all of our IDs are fairly similar. This is a trick I'm using to simplify our JavaScript, as you'll see later on down the road, so I suggest doing something similar. The class names have no relationship to the JavaScript whatsoever, and could really be whatever you wanted them to be.</p>
</div>
</div>
<div class="content">
<h1>Structuring our XHTML</h1>
<p>There are plenty of reasons why you might feel the urge to wax verbose on your website's front page: to prevent your users from having to click through to a new page to find your information, to avoid having to reload the page, or even to improve your front page's SEO. But just because your front page is text-heavy doesn't mean it all needs to be visible at once.Today's tutorial will show you how to hide away extra bits of content using CSS and JavaScript, to be revealed at the click of a button. This is a great technique, because displaying the additional content doesn't require a refresh or navigation to a new page and all your content is still visible to search engine bots that don't pay any attention to CSS or JavaScript.</p>
<p>We'll start with structuring our XHTML appropriately:</p>
<div class="show">show more.</div>
<div class="hidden" style="display:none">
<p>There are three things of importance here: the "show" anchor, the "hide" anchor, and our "hidden" div. Each has been given an ID and a class. The IDs are used by our JavaScript to locate and style the items appropriately. I'm then using the classes to set our "default" CSS. Technically you could just use the IDs the set that CSS as well, but if you wanted more than one hidden section on your page, that could get messy.</p>
<p>You'll notice in the code above that all of our IDs are fairly similar. This is a trick I'm using to simplify our JavaScript, as you'll see later on down the road, so I suggest doing something similar. The class names have no relationship to the JavaScript whatsoever, and could really be whatever you wanted them to be.</p>
</div>
</div>
</div>
</div>
</code></pre>
<p> </p>
<h3> javascript </h3>
<p> </p>
<pre><code name="code">document.onclick = click;
function click(ev) {
ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.className=="show") {
/* div.show and div.hidden are brothers, their parent is div.content*/
var hid = target.nextSibling;
/* Clear the space between two div tags. Why could this happen?
* Because we type a space between two div tags for looking indently.*/
if(hid.nodeName=="#text" && /\s/.test(hid.nodeValue)){
hid = hid.nextSibling; /* Get the div#hidtext */
}
if(hid.style.display=='none') {
hid.style.display = "block";
swithcer("block", target);
open(hid);
}
else if(hid.style.display == 'block') {
close(hid);
swithcer("none", target);
}
}
}
var Tween = {
Quad: {
easeOut: function(t,b,c,d) {
return -c*(t/=d)*(t-2) + b;
}
},
Back: {
easeOut: function(t,b,c,d,s){
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
}
}
}
function open(hid) {
var t=0, b=0, c=150, d=75;
function run() {
hid.style.height = Math.ceil(Tween.Back.easeOut(t,b,c,d)) + "px";
if(t<d t="" settimeout="" run="" function="" close="" var="" b="0," c="150," d="75," invald="10;" hid.style.height="Math.ceil(Math.abs(150" tween.quad.easeout="" if="" none="" hid.style.display="none" swithcer="" target="" the="" hidden="" area="" becomes="" visable.="" switch="" button="" to="" target.innerhtml="hidden it." target.style.background="url(\" img="" no-repeat="" scroll="" else="">
<p> </p>
<h3> css </h3>
<p> </p>
<pre><code name="code">p, span {
margin:0;
}
#wrapper {
width:960px;
margin:30px auto;
padding:20px 0;
background:#ececec;
}
.contents {
margin:0 15px;
padding:5px 10px;
border:#feb800 dotted 2px;
}
.content p {
text-indent:20px;
line-height:120%;
margin-top:5px;
}
.show {
width:200px;
padding-left:25px;
margin-top:5px;
font-weight:bold;
background:#E4F9F8 url(../img/show_hidden.png) 0 0 no-repeat;
border:#000 dotted 1px;
cursor:pointer;
}
.hidden {
display:none;
background:#f0c8a0;
margin:5px 10px;
padding:0 5px;
overflow:hidden;
border:black dotted 1px;
}</code></pre>
<div class="attachments">
<ul>
<li>hidden.zip (7.7 KB)</li>
<li> : 15</li>
</ul>
</div>
</d></code></pre></div>
</div>
</div>