基于jQuery实现全屏焦点图切换特效



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

147 587 196



特效描述:基于jQuery实现 全屏焦点图 切换特效。基于jQuery实现全屏焦点图切换特效

代码结构

1. 引入CSS

<link href="css/zzsc.css" rel="stylesheet" type="text/css" />
<link href="css/ie.css" rel="stylesheet" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script type="text/javascript" src="js/ie6png.js"></script>
<script type="text/javascript" src="js/functions.js"></script>

3. HTML代码

<div class="carousel">
  <div class="view">
    <div class="view-content">
      <div class="wrap carousel-item">
        <div class="slide-caption  comp-d" >
          <h2><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_1_title', 'OffsiteClick', '#', 4]);">创意与技术完美结合<br />
            每一个项目均为按需定制</a></h2>
          <div class="slide-callout">
            <p><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_1_subtitle', 'OffsiteClick', '#', 4]);">提供ios、Android、web开发,网站建设等互联网服务</a></p>
            <p class="more"><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_1_more', 'OffsiteClick', '#', 4]);">Read More&hellip;</a></p>
          </div>
        </div>
        <div class="carousel-image">
          <!-- 上传图片大小 width="522" height="348" -->
          <a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_1_img', 'OffsiteClick', '#', 4]);"><img class="main-image" src="images/zzsc6.jpg" width="522" height="348" alt="提供ios、Android、web开发,网站建设等互联网服务" /></a> </div>
      </div>
      <div class="wrap carousel-item">
        <div class="slide-caption  comp-c" >
          <h2><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_2_title', 'OffsiteClick', '#', 4]);">国际化风格<br />
            世界级品质标准</a></h2>
          <div class="slide-callout">
            <p><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_2_subtitle', 'OffsiteClick', '#', 4]);">好的作品需要宽广的视野、前瞻的眼光及对品牌的深度认知</a></p>
            <p class="more"><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_2_more', 'OffsiteClick', '#', 4]);">Read More&hellip;</a></p>
          </div>
        </div>
        <div class="carousel-image">
          <!-- 上传图片大小 width="522" height="348" -->
          <a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_2_img', 'OffsiteClick', '#', 4]);"><img class="main-image" src="images/zzsc5.jpg" width="522" height="348" alt="好的作品需要宽广的视野、前瞻的眼光及对品牌的深度认知" /></a> </div>
      </div>
      <div class="wrap carousel-item">
        <div class="slide-caption  comp-a" >
          <h2><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_3_title', 'OffsiteClick', '#', 4]);">
            <p> 企业级APP定制开发</p>
            <p> 丰富的移动app开发经验</p>
            </a></h2>
          <div class="slide-callout">
            <p><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_3_subtitle', 'OffsiteClick', '#', 4]);">优秀团队打造极致的交互体验作品</a></p>
            <p class="more"><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_3_more', 'OffsiteClick', '#', 4]);">Read More&hellip;</a></p>
          </div>
        </div>
        <div class="carousel-image">
          <!-- 上传图片大小 width="522" height="348" -->
          <a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_3_img', 'OffsiteClick', '#', 4]);"><img class="main-image" src="images/zzsc4.jpg" width="522" height="348" alt="优秀团队打造极致的交互体验作品" /></a> </div>
      </div>
      <div class="wrap carousel-item">
        <div class="slide-caption  comp-a" >
          <h2><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_4_title', 'OffsiteClick', '#', 4]);">
            <p> 响应式网页设计</p>
            <p> 网站可在多种浏览设备浏览</p>
            </a></h2>
          <div class="slide-callout">
            <p><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_4_subtitle', 'OffsiteClick', '#', 4]);">可使网站从桌面电脑显示器到移动电话或其他移动产品设备上阅读和浏览</a></p>
            <p class="more"><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_4_more', 'OffsiteClick', '#', 4]);">Read More&hellip;</a></p>
          </div>
        </div>
        <div class="carousel-image">
          <!-- 上传图片大小 width="522" height="348" -->
          <a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_4_img', 'OffsiteClick', '#', 4]);"><img class="main-image" src="images/zzsc3.jpg" width="522" height="348" alt="可使网站从桌面电脑显示器到移动电话或其他移动产品设备上阅读和浏览" /></a> </div>
      </div>
      <div class="wrap carousel-item">
        <div class="slide-caption  comp-c" >
          <h2><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_5_title', 'OffsiteClick', '#', 4]);">决胜移动互联网<br />
            迈步进入企业级应用</a></h2>
          <div class="slide-callout">
            <p><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_5_subtitle', 'OffsiteClick', '#', 4]);">Android将是未来移动企业级应用的主要平台</a></p>
            <p class="more"><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_5_more', 'OffsiteClick', '#', 4]);">Read More&hellip;</a></p>
          </div>
        </div>
        <div class="carousel-image">
          <!-- 上传图片大小 width="522" height="348" -->
          <a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_5_img', 'OffsiteClick', '#', 4]);"><img class="main-image" src="images/zzsc2.jpg" width="522" height="348" alt="Android将是未来移动企业级应用的主要平台" /></a> </div>
      </div>
      <div class="wrap carousel-item">
        <div class="slide-caption  comp-d" >
          <h2><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_6_title', 'OffsiteClick', '#', 4]);">零售商正依赖<br />
            移动应用提高客户忠诚度</a></h2>
          <div class="slide-callout">
            <p><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_6_subtitle', 'OffsiteClick', '#', 4]);">更大的购物篮,客户体验及忠诚度得到提升,且品牌覆盖更广</a></p>
            <p class="more"><a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_6_more', 'OffsiteClick', '#', 4]);">Read More&hellip;</a></p>
          </div>
        </div>
        <div class="carousel-image">
          <!-- 上传图片大小 width="522" height="348" -->
          <a href="#" onClick="_gaq.push(['_trackEvent', 'Carousel_6_img', 'OffsiteClick', '#', 4]);"><img class="main-image" src="images/zzsc1.jpg" width="522" height="348" alt="更大的购物篮,客户体验及忠诚度得到提升,且品牌覆盖更广" /></a> </div>
      </div>
    </div>
  </div>
</div>
<div style="text-align:center;clear:both"><br>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到