FengFocus 焦点图插件(昨天写了博客,今天封装了)

56 篇文章 1 订阅
28 篇文章 0 订阅

FengFocus 使用说明

FengFocus Demo

查看 FengFocus Demo

为什么要写 FengFocus ?

自从开始学习 jQuery 我就深深的被它给吸引了。虽然年岁有点大了。但是止不住想要学习的冲动。

根据我个人的学习经验,我认为实战是唯一提升自己的途径。所以我自己写了一些 jQuery 插件。

去年自己写的第一个焦点图插件,命名为 FengFocus 1.0 版本。在我所做的几个项目中也都运用了。但是我自己却很不满意。

为什么呢?原因有如下几点

  1. 逻辑混乱,过于复杂
  2. 代码冗长,自己都看不懂
  3. 在一个页面多出使用时会出错,虽然经过我仔细检查,并未发现问题出现在哪里。

所以我一直想要重写这个焦点图插件。但是一来是懒,二来还是懒。一直没去写。

昨天反法西斯70周年阅兵,我顿时觉得应该为祖国做点贡献,因此决定重写。(这牛逼吹的,不就是放假无聊写点代码玩儿么~)

FengFocus 的特点

  1. html 结构异常简单,除了少数优秀的焦点图插件,大多数都是HTML异常复杂而功能单一的。
  2. 表现形式完全css化,有很多焦点图插件将表现形式写在了js中,优点是只要一个文件,而不用管css。缺点就是,修改样式异常困难,为我不喜。
  3. 切换效果简单,只采用了 jQuery 自带的 slideDown 和 fadeIn 这两个效果。当然,一般情况下 fadeIn 其实就够用了。如果需要更加复杂的切换效果,可以使用 jQuery Easing 插件来简单拓展
  4. 单一页面重复使用,严格的将所有动作控制在目标元素之内,不会与其他代码产生冲突。单一页面可以多次使用。

FengFocus 能用来做什么?

  1. 适用于新手学习 jQuery
  2. 适用于大多数场景下的焦点图

使用 FengFocus 需要具备什么知识?

  1. 如果是简单使用,只要具备 html+css 的基本知识即可。
  2. 如果要修改得非常漂亮,最好具备优秀的 css3 知识。我提供了 scss 版本的 css 预编译文件,便于修改。
  3. 如果要使用特殊效果,就的具备 jQuery 的基本知识了。

FengFocus 版权声明

FengFocus 为自由软件,你可以自由使用,不受任何限制。但严禁插入恶意代码。另,各大下载网站转载本插件,请务必保留我的详细说明,和网站链接!谢谢!

如何获取 FengFocus

  1. 百度云盘下载:http://pan.baidu.com/s/1c04SXeo
  2. FengCms 官方下载:http://www.fengcms.com/code/FengFocus/ 查看说明后, 点此下载
  3. Admin5下载频道,搜索 FengFocus 即可找到下载。http://down.admin5.com/
  4. 百度搜索 FengFocus 看能不能找到喽~

FengFocus 开始使用的准备

需要在 html 的 head 中引入 jQuery,和 FengFocus 插件

<script src="js/jquery/jquery.js"></script>
<script src="js/FengFocus.js"></script>

就是这样啦!当然,路径还是要修改为你自己的路径的。

FengFocus 的 html 结构

<div id="FengFocus">
    <ul>
        <li><a href="#"><img src="image/1.jpg" alt="this is the Focus title 1" data-info="this is the Focus info for 1"></a></li>
        <li><a href="#"><img src="image/2.jpg" alt="this is the Focus title 2" data-info="this is the Focus info for 2"></a></li>
        <li><a href="#"><img src="image/3.jpg" alt="this is the Focus title 3" data-info="this is the Focus info for 3"></a></li>
        <li><a href="#"><img src="image/4.jpg" alt="this is the Focus title 4" data-info="this is the Focus info for 4"></a></li>
        <li><a href="#"><img src="image/5.jpg" alt="this is the Focus title 5" data-info="this is the Focus info for 5"></a></li>
    </ul>
</div>

如上,html结构是异常简单的。

ID 必须保证是唯一的。当然,也是可以修改得,只要对应的CSS进行修改即可。

其中,图片 alt 值是用于 焦点图 的标题。 data-info值是用于焦点图简介。

如果你在项目中是不需要使用 标题 和 简介 两个参数,建议 alt 值还是要写的,data-info 值留空即可。并在 css 中做隐藏处理即可。

FengFocus 的 css 代码

我的css只能作为演示,你在实际项目中,是一定要美化它的。

scss 预编译版本

#FengFocus {
	// 设定变量 焦点图的宽高大小
	$width:500px;
	$height:400px;
	// 焦点图外框的CSS
	width: $width;height: $height;overflow: hidden;position: relative;
	// 这里是对 焦点图 标题 和 简介的样式,如果不需要,直接隐藏掉即可。
	.FocusPic {
		p,strong {position: absolute;display: block;background:rgba(#000, 0.5);color: #fff;}
		p {border-radius: 5px;top: 30px;left: 30px;padding: 5px 10px;}
		strong {bottom: 0;left: 0;font-size: 14px;width: $width;text-indent: 10px;height: 36px;line-height: 36px;}
	}
	// 这里是对 焦点图 小数字 的 样式,可根据自己的需要进行修改。
	.FocusNum {
		position: absolute;right: 0;bottom: 0;height: 31px;
		li {
			float: left;height: 26px;line-height: 26px;background:rgba(#fff,0.5);width: 26px;
			color: #fff;margin-right: 5px;text-align: center;border-radius: 3px;cursor: pointer;
			&.on {background: #fff;color: #555;}
		}
	}
	// 向左向右按钮的样式 如不需要,隐藏掉即可。
	.FocusLeft,.FocusRight {
		position: absolute;width: 30px;height: 80px;top: 160px;background:rgba(#000,0.5);left: 10px;cursor: pointer;
	}
	.FocusRight {right: 10px;left: auto;}
}

css 版本(横列)

#FengFocus { width: 500px; height: 400px; overflow: hidden; position: relative; }
#FengFocus .FocusPic p, #FengFocus .FocusPic strong { position: absolute; display: block; background: rgba(0, 0, 0, 0.5); color: #fff; }
#FengFocus .FocusPic p { border-radius: 5px; top: 30px; left: 30px; padding: 5px 10px; }
#FengFocus .FocusPic strong { bottom: 0; left: 0; font-size: 14px; width: 500px; text-indent: 10px; height: 36px; line-height: 36px; }
#FengFocus .FocusNum { position: absolute; right: 0; bottom: 0; height: 31px; }
#FengFocus .FocusNum li { float: left; height: 26px; line-height: 26px; background: rgba(255, 255, 255, 0.5); width: 26px; color: #fff; margin-right: 5px; text-align: center; border-radius: 3px; cursor: pointer; }
#FengFocus .FocusNum li.on { background: #fff; color: #555; }
#FengFocus .FocusLeft, #FengFocus .FocusRight { position: absolute; width: 30px; height: 80px; top: 160px; background: rgba(0, 0, 0, 0.5); left: 10px; cursor: pointer; }
#FengFocus .FocusRight { right: 10px; left: auto; }

如果你不会使用 scss 可以对上面的 css 进行修改后直接使用。当然,看上去是要比 scss 要乱一点点的。

css 版本(纵列)

#FengFocus {
    width: 500px;
    height: 400px;
    overflow: hidden;
    position: relative;
}
#FengFocus .FocusPic p, #FengFocus .FocusPic strong {
    position: absolute;
    display: block;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}
#FengFocus .FocusPic p {
    border-radius: 5px;
    top: 30px;
    left: 30px;
    padding: 5px 10px;
}
#FengFocus .FocusPic strong {
    bottom: 0;
    left: 0;
    font-size: 14px;
    width: 500px;
    text-indent: 10px;
    height: 36px;
    line-height: 36px;
}
#FengFocus .FocusNum {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 31px;
}
#FengFocus .FocusNum li {
    float: left;
    height: 26px;
    line-height: 26px;
    background: rgba(255, 255, 255, 0.5);
    width: 26px;
    color: #fff;
    margin-right: 5px;
    text-align: center;
    border-radius: 3px;
    cursor: pointer;
}
#FengFocus .FocusNum li.on {
    background: #fff;
    color: #555;
}
#FengFocus .FocusLeft, #FengFocus .FocusRight {
    position: absolute;
    width: 30px;
    height: 80px;
    top: 160px;
    background: rgba(0, 0, 0, 0.5);
    left: 10px;
    cursor: pointer;
}
#FengFocus .FocusRight {
    right: 10px;
    left: auto;
}

当然,我这么贴心的人,当然会给出纵列的 css 啦,虽然我认为这样写css很不利于查看 -_-|||

FengFocus 使用的最后一步

在 HTML 中 设置 焦点图 参数

<script>
$("#FengFocus").FengFocus({
    defaultIndex    : 0,                    // 默认显示第几个,第一个为 0
    trigger         : "click",              // 数字交互方式,click 为 点击切换,mouseover 为鼠标碰到就切换
    showtime        : 3000,                 // 默认自动切换时间,单位为毫秒
    showWay         : "slow",               // 焦点图切换方式,slow 为渐隐渐现 down 为上下切换
});
</script>

当然,你也可以把设置参数放到独立的js文件之中,然后引入进来。但是,请确保你是写在类似下面的代码之中的。

$(function(){
    $("#FengFocus").FengFocus({
        defaultIndex    : 0,                    // 默认显示第几个,第一个为 0
        trigger         : "click",              // 数字交互方式,click 为 点击切换,mouseover 为鼠标碰到就切换
        showtime        : 3000,                 // 默认自动切换时间,单位为毫秒
        showWay         : "slow",               // 焦点图切换方式,slow 为渐隐渐现 down 为上下切换
    });
});

好啦,到这里就完全结束了。如果想对js源码进行查看,请自行查看文件吧。我里面有比较详细的注释的。

最后,祝大家开心!


版权所有 © FengCmsFung Leo未经许可,严禁复制或建立镜像

FengCms Beta 1.28 更新说明: 本次更新给栏目增加了片字段,以后可以给每个栏目单独指定一张栏目片,便于大家更加灵活的制作网站。 另,前段时间由于爆发了N多的安全漏洞,为了更加安全,我们给全站增加了XSS过滤,导致后台一些功能受到限制,甚至出错。 为了解决这个问题,我们在1.28版本中,去掉了全站过滤,而仅仅保留了前台过滤。这样大家在使用时会更加灵活方便。 1、栏目表新增片字段 2、去除了后台的XSS过滤。 虽然FengCms是一款免费、开源、且就FengCms本身是不寻求商业模式的这样一套自由的CMS系统。但是出于对乌云上这些朋友给予我们的热心帮助,开发团队决定采购一批小礼品。随后将邮寄给大家! 希望各位白帽子可以继续为FengCms挖掘漏洞。我相信,我们一定可以做得更好! 另外FengCms2.0 公开版本将推迟发布。我们从1.0被挖掘出来的漏洞和问题,我们将进一步的去完善2.0。不定期的会在FengCms交流群中发布内测版本。希望大家可以关注QQ群 ,群号是53667986! ============== FengCms 安全说明 ============================= 1、修改后台密码。在后台右上角点击“修改密码”进行修改。 2、修改后台认证码。在 /config.php 配置文件中修改。 3、修改后台路径。直接修改 admin 目录名即可。 4、随时关注官方网站 www.fengcms.com 以获得最新的升级补丁。 ============== Linux 权限配置777 ============================ PS:安装在linux服务器下要注意给以下目录文件夹和其下的子文件777权限。 /admin/app/dbbackup 数据库备份目录 /admin/app/cache 后台缓存文件 /app/cache 前台缓存文件 /template 模版目录 /css 样式目录 /upload/ 上传目录 /config.php 配置文件 更多目录信息,请查阅目录说明.txt文件 =============== 新L标签法 ================================= 老的万能标签法: {loop M("module")->l("article"…… 新的万能标签法: {loop l("article"…… 也就是说,省略调了“ M("module")-> ” 原先的模版没有必要修改,因为兼容老的法。 ============================================================= 后台地址:/admin/login.php 用户名:admin 密码:123456 认证码:8888 ======================== FengCms系统是由地方网络工作室倾力打造的一套PHP+MYSQL的CMS,和其他小型CMS不同,我们的CMS是完全自主开发的核心(由开源核心开发的CMS程序很大程度上受到核心的限制,在安全问题,以及代码臃肿等方面有先天缺陷)。当然,由于我们是自主开发的核心,因此,我们和其他cms有很大的不同。 由此,FengCms官方制作了视频教程和模版标签白皮书,方便诸君能够迅速理解并使用FengCms网站内容管理系统。 当然,这还远远不够。因此我们会倍加努力,更多的教程,不断的完善我们的程序,以期为诸君提供更加优质的服务! FengCms是一套纯粹为展示内容而生的cms系统。因此,FengCms不包含任何交互模块(除自带的留言,且默认不显示)。我们是为纯粹为展示内容而生的,是纯展示类型网站的最佳伴侣。 FengCms自带非常强大的模型系统,利用模型系统,可以自由搭建任意需要的模型。不再收到任何限制。甚至,你新建的模型可以连栏目都没有,你爱咋滴咋滴。 FengCms的万能L标签功能,可以对数据库内的任意数据表进行任意调用,支持原生PHP函数,支持循环套循环,判断套判断。 更为强大的是。FengCms的后台,其实和前台一样,是用一样的代码出来的。因此,FengCms有无与伦比的二次开发潜力。其中的好处,需要诸君慢慢品评! FengCms系统可以用来制作企业网站,文章网站,片网站,电影网站,导航站等等等等不需要交互系统的各种类型的网站。 FengCms 开发团队石峰在开发一套大的项目,总监刘峰目前就职于青海某旅游公司。因此,FengCms 项目进展有所放缓。但是,FengCms团队始终对FengCms不离不弃。我们一定会坚持开发下去的。请大家放心。 如果使用新增的下载函数不能下载,而是打开一个乱码的网
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值