注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

翻动触发的文字翻板效果插件jQuery Flip-Quote

动画 fishcity 2394浏览

文字翻板插件jQuery Flip-Quote

jQuery Flip-Quote是一款让文字具有翻板效果的插件,它在文档中创建一个突出的文一段文本,当此段文本滚动到可视区域时就触发翻板效果,也可以点击热点滚动来触发翻板效果。

jquery实例jQuery Flip-Quote使用方法

引入核心文件,jquery需1.6以上版本

<link rel="stylesheet" href="jquery.flip-quote.css" />
<script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.flip-quote.js"></script>

构建html

<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <q id="quote">Maecenas rhoncus sapien massa, aliquam ornare justo tristique vitae</q>. Duis sollicitudin nulla a leo sagittis, tristique imperdiet turpis sollicitudin.</p>
  
  <div id="container">...</div>
</div>

写入JS初始化

$('#quote').flipQuote({
  container: '#container'
 });

一次创建多个实例

<div id="main">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <q>Maecenas rhoncus sapien massa, aliquam ornare justo tristique vitae</q>. Duis sollicitudin nulla a leo sagittis, tristique imperdiet turpis sollicitudin.</p>
  <div class="container">...</div>

  <p>Donec sit amet pretium lectus. Nam justo eros, condimentum nec mi ut, sagittis porttitor risus. Vestibulum lectus dolor, mollis nec malesuada id, facilisis eu odio. Aenean porta eu nibh a varius. Pellentesque eget nisl sem. <q>Nunc luctus pellentesque sapien ac consectetur</q>. Quisque vel commodo sapien. Cras mollis rutrum lorem eu dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  <div class="container">...</div>
</div>
$('#main').flipQuote({
  quoteSelector: 'q',
  container: '.container'
});
选项 类型 默认值 描述
quoteSelector String 'q' 包裹引用的元素
container String '.container' 翻板元素
quoteMarks String '"&ldquo;" "&rdquo;"' 设置flip-quote属性来确定浏览器如何呈现翻板。
bgColor String '#0080C0' 设置 flip-quote 背景颜色
fontColor String '#FFF' flip-quote字体颜色
fontSize String '24px' 字体大小
flipDuration String '0.7s' 动画时间
pads Number 20 内边距

转载请注明:jQ酷 » 翻动触发的文字翻板效果插件jQuery Flip-Quote

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。