HTML5自定义元素播放焦点图动画

澳门新葡亰娱乐在线 2

本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

web前端炫酷实用的HTML5应用和jQuery插件,html5jquery

又开始了新的一天,我们也将继续为大家分享许多优秀的HTML5应用和jQuery插件,作为前端开发者来说,这些资源可以帮助你在项目开发上派上用场。下面一起来看看这些炫酷而实用的HTML5应用和jQuery插件吧。

这是一款基于HTML5的焦点图动画,它和其他焦点图不同的地方在于,它播放的不仅仅是图片,而是可以自定义控制的网页元素。它不仅在图片间切换有过渡动画效果,而且在切换时图片中的元素也将出现动画效果,比如图中的文字移动、打散、重新组合等。这款HTML5动画图片播放器算得上是高端大气上档次。

1、jQuery/CSS3图片洗牌切换动画特效

这是一款基于jQuery和CSS3的图片动画特效,该图片动画是洗牌的效果,我们只需点击切换按钮,即可一张张切换图片。另外,如果你长按住按钮不放,图片的洗牌效果就会更加明显和有趣,该jQuery图片特效一共有3中效果。

澳门新葡亰娱乐在线 1

在线演示

源码下载

澳门新葡亰娱乐在线 2

2、简单实用的jQuery横向图片滚动焦点图插件

澳门新葡亰娱乐在线,之前我们分享了不少焦点图插件,包括jQuery焦点图和HTML5焦点图,效果都非常不错。今天的这款jQuery焦点图插件看起来非常简单,但是无论从外观和实用价值上看都相当不错。这款jQuery焦点图的图片是横向滚动的,两侧均有左右滑动按钮。

澳门新葡亰娱乐在线 3

在线演示

源码下载

在线演示源码下载

3、jQuery幻灯片播放焦点图插件

这又是一款基于jQuery的幻灯片焦点图插件,和之前分享的焦点图插件类似,图片都可以左右滑动。这款jQuery焦点图的优势在于不仅有一排小按钮切换图片滑动,而且可以直接点击图片来进行滑动切换。而且图片滑动相当流畅。

澳门新葡亰娱乐在线 4

在线演示

源码下载

HTML代码

<div class="parallax-bg" id="slider-wrap">
    <div class="slider parallax-bg" id="slider">
           <div class="slider-sections sandbox"> 
        <section class="first">
                     <img alt="Kendo UI" src="images/home-banner-1.png"/>
                     <div class="text">
                          <h2>SmartSite Ver 2.2<br />智能网站管理系统 </h2>
                          <p class="copy">采用前后台完全分离技术,通过标签(支持标签循环嵌套、判断标签、自定义标签、文件循环嵌套等)加模板技术.全站生成纯静态页。</p>
                          <p class="button"><a href="#" onclick="_gaq.push(['_trackPageview', '#']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', '#']);" href="#">Learn More</a></p>
                     </div>
                </section>
        <section>
                     <img src="images/dataviz-home-image-q2.png" alt="Kendo UI" />
                     <div class="text" style="padding-top: 10px;">
                          <h2>企业网站管理系统</h2>
                          <p class="copy">单页面、单页面索引、新闻、产品展示、下载、友情链接、网上商城,在线支付、配送、支付方式管理、广告等模块。</p>
                          <p class="button"><a href="#" onclick="_gaq.push(['_trackPageview', '#']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', '#']);" href="#">Learn More</a></p>
                     </div>
                </section>
        <section>
                     <img src="images/home_banner_web-q2.png" alt="Kendo UI" />
                     <div class="text">
                          <h2>智能移动网站管理系统</h2>
                          <p class="copy">基于jquery.Mobile、HTML5技术框架,前后台完全分离,采用标签加模板技术,全站生成纯静态页。</p>
                          <p class="button"><a href="#" onclick="_gaq.push(['_trackPageview', '#']);">Download</a> <a class="dimmed" onclick="_gaq.push(['_trackPageview', '#']);" href="#">Learn More</a></p>
                     </div>
                </section>
           </div>
      </div>
      <a class="slider-prev" href="javascript:%20void(0)">?</a> <a class="slider-next" href="javascript:%20void(0)">?</a>
</div>

4、jQuery模拟Android HTC时间和天气画面

这次要分享的一款jQuery插件是模拟Android
HTC手机的时间和天气画面,如果你的网络允许,该插件还可以ajax获取当地的天气情况。这款模拟Android
HTC手机的jQuery插件从外观上看和Android待机画面非常相似,并且也可以实现滑屏特效。

澳门新葡亰娱乐在线 5

在线演示

源码下载

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图