jFlow是一款非常好的内容滑动(也有人称幻灯片)jquery插件,它主要用在网站的首页突出位置用来展示网站的最新动态、最新活动或最新产品等。
jFlow特点:
平滑过渡缓冲滑动;
可定制的是否自动滑动;
轻量级脚本,大小不到4KB;
滑动内容可定制,可以是大幅图片,也可以是文本或者图文混排。
应用实例:
关于jFlow的应用,网上很多文章只是援引了官方的例子,其实仔细研究,你会发现能实现很多漂亮的界面效果。
1、TAB滑动切换内容
2、数字导航滑动自动切换
3、方向按钮导航滑动切换
使用方法:
1、在HTML页面的head标签之间加入以下代码:
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="jquery.flow.1.2.auto.js"></script>
<script type="text/javascript">
$(function(){
$("#myController").jFlow({
slides: "#slides",
controller: ".jFlowControl",
slideWrapper : "#jFlowSlide",
selectedWrapper: "jFlowSelected",
auto: true,
duration: 600,
width: "680px",
height: "275px",
prev: ".jPrev",
next: ".jNext"
});
});
</script>
2、在body中加入以下代码:
<div class="demo">
<div id="slides">
<div class="slide_wrap">
<img src="images/s1.jpg" alt="photo1" />
</div>
<div class="slide_wrap">
<img src="images/s2.jpg" alt="photo2" />
</div>
<div class="slide_wrap">
<img src="images/s3.jpg" alt="photo3" />
</div>
</div>
<div id="myController">
<span class="jPrev"><</span>
<span class="jFlowControl">1</span>
<span class="jFlowControl">2</span>
<span class="jFlowControl">3</span>
<span class="jNext">></span>
</div>
</div>
注意:ID为“myController”的DIV是主控制层,里面包含分页数字和导航箭头,ID为“slides”里面包含了滑动内容,可以是图片、文字等任何HTML元素的内容,值得注意的是class为“jFlowControl”里的span的个数要与class为“slide_wrap”的DIV个数要一致,如果你不想显示导航数字或按钮,你可以在CSS样式里设置。
3、CSS代码:
#myController{height:32px; line-height:32px; padding-right:20px;
background:#333; font-weight:bold; font-size:14px; text-align:right;
white-space:nowrap; z-index:1001; position:relative; margin-top:-32px;
filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;}
#myController span{ padding:0 4px; text-align:center; cursor:pointer;
color:#fff}
#myController span.jFlowSelected {background:#d3d3d3; color:#333}
声明:本文为原创文章,helloweba.com和作者拥有版权,如需转载,请注明来源于
helloweba.com并保留原文链接,否则视为侵权。
分享到:
相关推荐
图片滑动插件,使用jquery框架作为基础,良好的说明文档。
关于JFlow: http://ccflow.org 概要说明: JFinal 与Jflow都是国产软件,是国内知名的老牌开源软件。 jfinal在2011年发布。 驰骋工作流引擎,表单引擎java版本简称为jflow, .net版本简称ccflow. 研发与2003年,...
jFlow 框架,是 node.js 和浏览器中的模型框架。 它为具有异步流控制的可维护和可重用代码提供了一个通用的组件结构。 一些主要功能包括: 无需回调即可对任意数量的异步函数进行分组/组织。 组件包含传统面向对象...
JFlow工作流 驰骋工作流引擎研发与2003年,具有.net与java两个版本,这两个版本代码结构,数据库结构,设计思想,功能组成, 操作手册,完全相同。 导入导出的流程模版,表单模版两个版本完全通用 CCFlow是.net...
纯国产,自主研发,拥有强大的工作流引擎CCFlow/JFlow、表单引擎CCForm以及丰富的控件库,可理解、低代码、低配置、可视化,只需“拖拽几下”即可快速构建复杂的业务流程及应用,与业务系统无缝集成。分布式,支持全...
Failure to find jflow-core:jflow-core:jar:1.1.0-SNAPSHOT 驰骋的MAVEN不靠谱,只能自己编译然后传上来了
开源的工作流、BPM软件,JFlow的安装配置教程,为您学习jflow中,提供一些配置说明,方便您的安装与学习
RuoYi-JFlow-master.zip
jflow-web视频和文档,上码云copy代码,看他们的文档,记得多看文档,你值得拥有
幻灯(通常也被称为“内容滑动”、内容切换效果、焦点图等)是在网站或博客的较小区域展示大量内容的很好的方法。动态的自动滑动内容在很多网站上都是很流行的。你是否也对在自己的网站上实现类似的效果感兴趣?那就看...
从j2ee应用服务器,到o/rmapping工具,到这个工作流引擎等等。为什么Shark的持久层采用DODS来实现?就是因为他们是一家人。 Jbpm的靠山是jboss。Jbpm3的持久层采用hibernate3来实现,也是因为这个原因吧。Jbpm3的...
1.3、设置数据库参数:/jflow-web/src/main/resources/jflow.properties1.4、启动项目。访问地址:http://127.0.0.1:8080/jflow-web/ 管理员账号:admin 密码:123 其他用户密码:1231.5、更多的帮助下载信息,请...
JeeSite与JFlow集成版, 中国式的低代码+工作流经典结合。JeeSite 与 JFlow 的组织结构深度集成在一起。JeeSite 与 JFlow 两者珠联璧合,是您开发的利器,不二的选择.
今天要给大家分享的是10篇非常棒的 jQuery 幻灯片教程及16个优秀的 jQuery 幻灯片应用案例。 10篇 jQuery 幻灯片制作教程Create Beautiful jQuery slider tutorial jQuery Plugin – Feature List Create an Image ...
JFlow驰骋工作流引擎 v4.2.zip
JFlow开源工作流引擎BPM系统 v2020.zip
ccbpm研发与2003年,是驰骋公司从底层到前台应用一步步开发出来的,底层实现对第三方的依赖为零,前台应用使用了jquery,easyUI,BS等开源产品技术,驰骋公司具有独立的知识产权。 Ccbpm操作简单,容易上手. 完整的帮助...
JeeSite与JFlow集成版, 中国式的低代码+工作流经典结合
的管理后台系统,有数十个基于此的商业应用,包含了用户管理,组织机构管理,角色管理,功能点管理,菜单管理,权限分配,数据权限分配,代码生成等功能 相比其他开源的后台开发平台脚手架,SpringBoot-Plus 使用简单...
NULL 博文链接:https://ccflow.iteye.com/blog/2430272