当前位置

网站首页> 程序设计 > 开源项目 > 编程语言 > 浏览文章

JavaScript 速度优化库 jTinder

作者:小梦 来源: 网络 时间: 2024-07-16 阅读:

#广州# OSC源创会第31期(12月27日)开始报名,OSC自曝家丑!

jTinder 是一个使对人物,商品,图片投票变得快速和简单的JavaScript库。它为移动触摸设备进行了优化,不过也有桌面版。

在 HEAD 标签之前添加 CSS 文件:

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

在 BODY 标签之前添加 JavaScript 包:

<!-- jQuery lib --><script type="text/javascript" src="js/jquery.min.js"></script><!-- transform2d lib --><script type="text/javascript" src="js/jquery.transform2d.js"></script><!-- hammer lib --><script type="text/javascript" src="js/hammer.min.js"></script><!-- jTinder lib --><script type="text/javascript" src="js/jquery.jTinder.js"></script><!-- jTinder initialization script --><script>$("#tinderslide").jTinder();</script>

在 HTML 代码的 body 标签内加入  jTinder 内容:

<div id="tinderslide">    <ul>        <li class="pane1"><div class="img"></div><div>Miami Beach</div><div class="like"></div><div class="dislike"></div></li>        <li class="pane2"><div class="img"></div><div>San Francisco</div><div class="like"></div><div class="dislike"></div></li>        <li class="pane3"><div class="img"></div><div>Chicago</div><div class="like"></div><div class="dislike"></div></li>        <li class="pane4"><div class="img"></div><div>New York</div><div class="like"></div><div class="dislike"></div></li>        <li class="pane5"><div class="img"></div><div>Beach</div><div class="like"></div><div class="dislike"></div></li>    </ul></div>


热点阅读

网友最爱