<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<!-- saved from url=(0013)about:internet -->
<head>
<title>
InnerFade with jquery
</title>
<!-- //
____________________________________________
Gestaltung und XHTML-Programmierung
+49 341 2 27 96 99
www.medienfreunde.com
____________________________________________
-->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$('#news').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '1em'
});
$('ul#portfolio').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
containerheight: '220px'
});
$('.fade').innerfade({
speed: 1000,
timeout: 6000,
type: 'random_start',
containerheight: '1.5em'
});
$('.adi').innerfade({
speed: 'slow',
timeout: 5000,
type: 'random',
containerheight: '150px'
});
});
</script>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/fonts.css" type="text/css" media="all" />
<style type="text/css" media="screen, projection">
@import url(css/jq_fade.css);
</style>
</head>
<body>
<div class="limiter">
<div class="adi">
<div style="text-align: center; width: 100%;">
<script type="text/javascript"><!--
google_ad_client = "pub-8042276531249348";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as_rimg";
google_cpa_choice = "CAAQ8aaVzgEaCPJg3qtkyXM9KOm293M";
google_ad_channel = "4394743034";
//--></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div style="text-align: center; width: 100%;">
<script type="text/javascript"><!--
google_ad_client = "pub-8042276531249348";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text";
//2007-02-05: it
google_ad_channel = "0484589010";
google_color_border = "cccccc";
google_color_bg = "fffeb8";
google_color_link = "0088ce";
google_color_text = "0088ce";
google_color_url = "cccccc";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
<h1>
InnerFade with JQuery
</h1>
<h2>What is it?</h2>
<p>InnerFade is a small plugin for the <a href="http://jquery.com" title="Visit jQuery and learn more about this awesome JavaScript-Library">jQuery-JavaScript-Library</a>. It's designed to fade you any element inside a container in and out.</p>
<p>These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.</p>
<h2>The call</h2>
<code>
$('<strong>ID or class of the element containing the fading objects</strong>').innerfade({
animationtype: <strong>Type of animation 'fade' or 'slide' (Default: 'fade')</strong>,
speed: <strong>Fadingspeed in milliseconds or keywords (slow, normal or fast)(Default: 'normal')</strong>,
timeout: <strong>Time between the fades in milliseconds (Default: '2000')</strong>,
type: <strong>Type of slideshow: 'sequence', 'random' or 'random_start' (Default: 'sequence')</strong>,
containerheight: <strong>Height of the containing element in any css-height-value (Default: 'auto')</strong>
runningclass: <strong>CSS-Class which the container get’s applied (Default: 'innerfade')</strong>
});
</code>
<code>
<script type="text/javascript">
$(document).ready(
function(){
$('#news').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '1em'
});
$('#portfolio').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '220px'
});
$('.fade').innerfade({
speed: 'slow',
timeout: 1000,
type: 'sequence',
containerheight: '1.5em'
});
}
);
</script>
</code>
<h2>Examples</h2>
<h3>A newsticker (with animationtype: 'slide')</h3>
<ul id="news">
<li>
<a href="#n1">1 Lorem ipsum dolor</a>
</li>
<li>
<a href="#n2">2 Sit amet, consectetuer</a>
</li>
<li>
<a href="#n3">3 Sdipiscing elit,</a>
</li>
<li>
<a href="#n4">4 sed diam nonummy nibh euismod tincidunt ut</a>
</li>
<li>
<a href="#n5">5 Nec Lorem.</a>
</li>
<li>
<a href="#n6">6 Et eget.</a>
</li>
<li>
<a href="#n7">7 Leo orci pede.</a>
</li>
<li>
<a href="#n8">8 Ratio randorus wil.</a>
</li>
</ul>
<code>
<ul id="news">
<li>
<a href="#n1">1 Lorem ipsum dolor</a>
</li>
<li>
<a href="#n2">2 Sit amet, consectetuer</a>
</li>
<li>
<a href="#n3">3 Sdipiscing elit,</a>
</li>
<li>
<a href="#n4">4 sed diam nonummy nibh euismod tincidunt ut</a>
</li>
<li>
<a href="#n5">5 Nec Lorem.</a>
</li>
<li>
<a href="#n6">6 Et eget.</a>
</li>
<li>
<a href="#n7">7 Leo orci pede.</a>
</li>
<li>
<a href="#n8">8 Ratio randorus wil.</a>
</li>
</ul>
</code>
<h3>A list with images and links</h3>
<ul id="portfolio">
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html"><img src="images/ggbg.gif" alt="Good Guy bad Guy" /></a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kreation/whizzkids.html"><img src="images/whizzkids.gif" alt="Whizzkids" /></a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/printdesign/koenigin_mutter.html"><img src="images/km.jpg" alt="Königin Mutter" /></a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/webdesign/rt_reprotechnik_-_hybride_archivierung.html"><img src="images/rt_arch.jpg" alt="RT Hybride Archivierung" /></a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kommunikation/tuev_sued_gruppe.html"><img src="images/tuev.jpg" alt="TÜV SÜD Gruppe" /></a>
</li>
</ul>
<code>
<ul id="portfolio">
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html">
<img src="images/ggbg.gif" alt="Good Guy bad Guy" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kreation/whizzkids.html">
<img src="images/whizzkids.gif" alt="Whizzkids" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/de
jquery.innerfade.zip （12个子文件） 
jquery.innerfade css 
jq_fade.css 2KB reset.css 556B fonts.css 424B images 
rt_arch.jpg 39KB tuev.jpg 37KB
ggbg.gif 4KB whizzkids.gif 9KB km.jpg 13KB
att.png 849B js jquery.js 53KB jquery.innerfade.js 5KB index.htm 12KB
评论7
最新资源