FengFocus 焦点图插件（昨天写了博客，今天封装了）

2022-11-28 08:50:49 浏览数 (1)

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 插件

代码语言：javascript复制
<script src="js/jquery/jquery.js"></script>
<script src="js/FengFocus.js"></script>

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

FengFocus 的 html 结构

代码语言：javascript复制
<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 预编译版本

代码语言：javascript复制
#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 版本（横列）

代码语言：javascript复制
#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 版本（纵列）

代码语言：javascript复制
#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 中 设置 焦点图 参数

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

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

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

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

最后，祝大家开心！

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

jquery css http html

0 人点赞