jQuery图片自动淡入淡出插件资源-CSDN文库

共12个文件

css：3个

jpg：3个

js：2个

jQuery淡入淡出插件

图片淡入淡出插件

jQuery插件

jquery

5星 · 超过95%的资源需积分: 9 100 浏览量 2011-12-22 13:27:27 上传评论 8 收藏 124KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

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

jquery.js 53KB

jquery.innerfade.js 5KB

index.htm 12KB

<!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">  <head> <title> InnerFade with jquery </title>  <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"></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"></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

评论收藏

内容反馈