首页>>焦点图>>背景图片slide焦点图滑动，图片上面可以写文字(2013-12-23)

背景图片slide焦点图滑动，图片上面可以写文字

背景图片slide焦点图滑动，图片上面可以写文字
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="banner">  
  2.           <ul>  
  3.                 <li style="background-image: url('img/sunset.jpg');">  
  4.                     <div class="inner">  
  5.                         <h1><A href="http://www.freejs.net/article_jiaodiantu_82.html">右侧带透明遮罩效果文字简要的jQuery焦点图代码</A></h1>  
  6.                           
  7.   
  8.                           
  9.                   </div>  
  10.                 </li>  
  11.   
  12.                 <li style="background-image: url('img/wood.jpg');">  
  13.                     <div class="inner">  
  14.                         <h1><A href="http://freejs.net/article_fenye_49.html">Jquery, Ajax无刷新翻页,支持跳转页面</A></h1>  
  15.                           
  16.   
  17.                           
  18.                   </div>  
  19.                 </li>  
  20.   
  21.                   
  22.             </ul>  
  23.         </div>  

 

JavaScript Code
  1. <script>  
  2.             if(window.chrome) {  
  3.                 $('.banner li').css('background-size', '100% 100%');  
  4.             }  
  5.   
  6.             $('.banner').unslider({  
  7.                 arrows: true,  
  8.                 fluid: true,  
  9.                 dots: true  
  10.             });  
  11.   
  12.             //  Find any element starting with a # in the URL  
  13.             //  And listen to any click events it fires  
  14.             $('a[href^="#"]').click(function() {  
  15.                 //  Find the target element  
  16.                 var target = $($(this).attr('href'));  
  17.   
  18.                 //  And get its position  
  19.                 var pos = target.offset(); // fallback to scrolling to top || {left: 0, top: 0};  
  20.   
  21.                 //  jQuery will return false if there's no element  
  22.                 //  and your code will throw errors if it tries to do .offset().left;  
  23.                 if(pos) {  
  24.                     //  Scroll the page  
  25.                     $('html, body').animate({ 
  26.                         scrollTop: pos.top, 
  27.                         scrollLeft: pos.left 
  28.                     }, 1000); 
  29.                 } 
  30.  
  31.                 //  Don't let them visit the url, we'll scroll you there  
  32.                 return false;  
  33.             });  
  34.   
  35.         </script>  

 


原文地址:http://www.freejs.net/article_jiaodiantu_203.html