基于HTML5鼠标点击淡入淡出切换代码

基于HTML5鼠标点击淡入淡出切换代码。这是一款基于jQuery+HTML5实现的淡入淡出切换全屏幻灯片代码。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

<header id="immortal_header">
       <div id="immortal_carousel" class="carousel thumbnail_text_carousel_fade thumbnail_text_carousel_wrapper" data-ride="carousel" data-interval="6000" data-pause="hover">
           <ol class="carousel-indicators thumbnail_text_carousel_indicators">

               <li data-target="#immortal_carousel" data-slide-to="0" class="active">
                   <h5>爱编程</h5>
                   <p>www.w2bc.com</p>
               </li>

               <li data-target="#immortal_carousel" data-slide-to="1">
                   <h5>爱编程</h5>
                   <p>www.w2bc.com</p>
               </li>

               <li data-target="#immortal_carousel" data-slide-to="2">
                   <h5>爱编程</h5>
                   <p>www.w2bc.com</p>
               </li>

               <li data-target="#immortal_carousel" data-slide-to="3">
                   <h5>爱编程</h5>
                   <p>www.w2bc.com</p>
               </li>

               <li data-target="#immortal_carousel" data-slide-to="4">
                   <h5>爱编程</h5>
                   <p>www.w2bc.com</p>
               </li>
           </ol>
           <div class="carousel-inner" role="listbox">
               <div class="item active">
                   <a href="#">
                       <img src="images/slider_02.jpg" alt="slider 02" />
                   </a>
               </div>
               <div class="item">
                   <a href="#">
                       <img src="images/slider_04.jpg" alt="slider 04" />
                   </a>
               </div>

               <div class="item">
                   <a href="#">
                       <img src="images/slider_05.jpg" alt="slider 05" />
                   </a>
               </div>

               <div class="item">
                   <a href="#">
                       <img src="images/slider_06.jpg" alt="slider 06" />
                   </a>
               </div>

               <div class="item">
                   <a href="#">
                       <img src="images/slider_03.jpg" alt="slider 03" />
                   </a>
               </div>
           </div>
   </header>

via:http://www.w2bc.com/article/html5-fadein-focus-fadeout

时间: 2024-10-30 22:16:17

基于HTML5鼠标点击淡入淡出切换代码的相关文章

基于jquery鼠标点击图片翻开切换效果

基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <img src="images/1.jpeg" alt="1" /> <img src="images/2.jpeg" alt="2" /> <img s

基于jQuery点击淡入淡出显示图片特效

分享一款基于jQuery点击淡入淡出显示图片特效.这是一款基于jQuery+CSS3实现酷炫效果的图片切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <center><p style="color:#334960">点击图标进行展示</p></center> <div class="main"> <div id="coolShow"><

Android 1分钟教你打造酷炫的引导页(实现ViewPager淡入淡出切换)

纯手工自制的Android引导页,实现了Viewpager切换的淡入淡出(页面不移动!)切换以及文字动画. 下面是效果演示: 实现思路+心路历程...: 其实别的都还蛮简单的,就是这个ViewPager的淡入淡出切换动画比较棘手,以前都没有做过,然后去网上找了好久好久. 其中碰到各种坑无数,大概90%的人是引的 JazzyViewPager的包然后就balabala说自己实现了种种功能,真是醉了.... 结论是国内根本找不到这个效果的实现嘛.... 然后 在Github下了JazzyViewPa

基于jQuery鼠标点击弹出登陆框效果

基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type="button" class="one" value="点击我查看效果" /> <div class="box"> <div class="box2"> <div class=&quo

CSS的blendtransp 淡入淡出应用代码

<HTML> <HEAD> <TITLE>淡入淡出</TITLE> <SCRIPT> <!-- function fadeOut(obj) { obj.style.filter="blendTrans(duration=2)"; if ((obj.visibility != "hidden") && (obj.filters.blendTrans.status != 2)) { obj

基于jQuery商城网站全屏图片切换代码

基于jQuery商城网站全屏图片切换代码.这是一款商城网站全屏多张图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="slides"> <div class="slideInner"> <a href="#" style="background: url(img/slide1.jpg) no-repeat;"> <div cla

基于jquery仿360网站图片选项卡切换代码

今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="slides"> <div class="in widget-slide" data-jss="tabSelector : '.slide-nav li', viewSe

今天依然是 JQ点击事件之“点击淡入淡出事件”

废话不多说,先贴代码,再解释 <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); }); </script> <p&

jquery控制元素的淡入淡出切换

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Jquery</title> <script src="jquery.js" type="text/javascript"></script> <script> $(function(){ $('#btn').click(