Hexo瞎折腾系列(2) - 添加背景图片轮播
动态背景图片插件jquery-backstretch
jquery-backstretch
是一款简单的jQuery插件,可以用来设置动态的背景图片,以下是官方网站的介绍。
A simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element.
可以直接在页面中引入该插件的cdn来调用函数,也可以直接下载下来使用,这是官方地址。
jquery-backstretch的使用方法
引入该插件的cdn
打开themes\next\layout\_custom\custom-foot.swig
,引入该背景图片插件的cdn:
{#
Custom foot in body, Can add script here.
#}
<!-- 图片轮播js文件cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<!-- 自定义的js文件 -->
<script type="text/javascript" src="/js/src/custom.js"></script>
需要注意的是,我们要引入的插件cdn,都需要在自定义的js文件custom.js
之前引入才行!否则,插件会在访问页面时无法生效,可以在浏览器的控制台看到报错。
调用backstretch
函数
在themes\next\source\js\src\custom.js
中添加如下代码:
/* 轮播背景图片 */
$(function () {
$.backstretch([
"/images/background/saber1.jpg",
"/images/background/saber2.jpg",
"/images/background/bg1.jpg"
], { duration: 60000, fade: 1500 });
});
这里可以随意添加你想要轮播的图片,但要确保图片路径是正确的,比如我的背景图片就存放在站点根目录下的images/background/
目录下。
然后duration
指的是轮换图片的时间,单位是毫秒,也就是说这里的代码表示一分钟就轮换到下一张图片;
fade
指的是轮换图片时会有个渐进渐出的动作,而这个过程需要花费的时间单位也是毫秒,如果不加上这个参数,就表示离开轮换成下一张图片。
注意这里的$.backstretch
指的是对整个页面设置背景图片,我们也可以专门给某个元素设置背景图片,如下:
$(function () {
$(".saber1").backstretch(["/images/background/saber1.jpg"]);
$(".saber2").backstretch(["/images/background/saber2.jpg"]);
});
如果只有一张图片,就没必要设置duration
和fade
参数了。
为背景图片设置样式
虽然我们设置好了背景图片,但如果页面的许多元素是不透明的,背景图片可能并不能很好地被看见,所以我们可以对背景图片和其他的页面元素进行设置样式。
首先为背景图片设置透明度,因为有的图片颜色比较深厚,而页面多为白色,然后造成喧宾夺主的感觉。
file:themes\next\source\css_custom\custom.styl
/* 背景图片透明度 */
.backstretch {
opacity: .75;
}
接下来设置页面元素透明度,需要注意的是,如果我们在主题配置文件中启用了搜索功能,那么就不能简单粗暴地直接将整个页面都设置透明度,这会导致搜索框失效,无法正常使用。原因是因为搜索框是通过jQuery临时添加的,如果整个页面都设置了透明度,会导致搜索框的z-index
失效而无法触发点击事件。
我在折腾了一段时间后,终于想到了个取巧的方法,那就是将搜索框的父元素设置为白色透明的,而其他页面元素则直接设置透明度,如下:
file:themes\next\source\css_custom\custom.styl
/* 页面透明度 */
.content-wrap, .sidebar {
opacity: .9 !important;
}
.header-inner {
background: rgba(255, 255, 255, 0.9) !important;
}
Hexo瞎折腾系列(2) - 添加背景图片轮播的更多相关文章
- Hexo瞎折腾系列(8) - 添加评论系统
前言 Hexo的NexT主题本身就集成了一些评论系统,多说啊之类的已经关闭服务的略过不提,目前比较多人用的有畅言.来必力livere.Gitment.Gitalk.Disqus等. 我刚用的评论系统的 ...
- Hexo瞎折腾系列(3) - 添加GitHub彩带和GitHub Corner
页面右上角添加GitHub彩带 你可以在这里找到一共12种样式的GitHub彩带,复制其中的超链代码. 在themes\next\layout\_layout.swig目录下找到头部彩带相关的代码: ...
- Hexo瞎折腾系列(9) - 网页标题崩溃特效
前言 本系列的所有修改均基于本系列第一篇中的新增文件(譬如custom.js),请先自行阅读Hexo瞎折腾系列(1) - 准备工作与简单美化:并按照文章所说自行修改代码或文件. 为网页添加标题崩溃特效 ...
- Android开发案例 设置背景图片轮播
点击按钮实现图片轮播效果 实践案例: xml <?xml version="1.0" encoding="utf-8"?> <LinearLa ...
- Hexo瞎折腾系列(1) - 准备工作与简单美化
前言 网上有不少相关的帖子,不过版本会比较旧,而不同版本可能存在代码不同的问题,不过大部分还是大同小异,本系列就不啰嗦重复了,基本只会按照本人所使用的版本以及个人所使用到的内容来进行介绍. 该系列是对 ...
- Hexo瞎折腾系列(5) - 使用hexo-neat插件压缩页面静态资源
为什么要压缩页面静态资源 对于个人博客来说,优化页面的访问速度是很有必要的,如果打开你的个人站点,加载个首页就要十几秒,页面长时间处于空白状态,想必没什么人能够忍受得了吧.我个人觉得,如果能把页面的加 ...
- Hexo瞎折腾系列(7) - Coding Pages申请SSL/TLS证书错误
问题 今天我的个人站点SSL/TLS证书到期,我的证书是由Coding Pages提供的,每次申请成功后有效期是三个月,证书到期后可以继续免费申请.但是当我登陆进入Coding Pages服务的后台并 ...
- Hexo瞎折腾系列(6) - 将博客同时部署到Github和Coding
前言 由于本人只是将Hexo博客同时部署到 Github 和 Coding.net ,所以这里只介绍怎么同时部署到这两个网站的pages. 之所以选择这两个网站,是因为国外用户可以访问 Github, ...
- Hexo瞎折腾系列(4) - 站点首页不显示文章全文
文章摘要设置 打开主题配置文件 _config.yml 文件,找到如下: # Automatically Excerpt. Not recommend. # Please use <!-- mo ...
随机推荐
- mysql insert操作
insert的语法 INSERT [LOW_PRIORITY | DELAYED | HIGH_PRIORITY] [IGNORE] [INTO] tbl_name [(col_name,...)] ...
- ARC机制之__strong具体解释
ARC机制之__strong具体解释 __strong 解析: 默认情况下,一个指针都会使用 __strong 属性,表明这是一个强引用.这意味着,仅仅要引用存在,对象就不能被销毁.这是一种所期望的 ...
- STL review:vector & string & map & struct
I.vector 1.头文件:#include<vector> //容器vector是一个能实现随机存取.插入删除的动态数组,还可以当栈使. ...
- split+ Pattern切割字符串
今天在对一个String对象进行拆分的时候,总是无法到达预计的结果.呈现数据的时候出现异常,后来debug之后才发现,错误出在String spilt上,于是开始好好研究下这东西,开始对api里的sp ...
- Java读取UTF-8格式文件第一行出现乱码——问号“?”及解决 And Java读带有BOM的UTF-8文件乱码原因及解决方法
測试样例: Java读取UTF-8的txt文件第一行出现乱码"?"及解决 test.txt文件内容: 1 00:00:06,000 --> 00:00:06,010 < ...
- 构造方法,重载,static,math类(java基础知识七)
1.构造方法概述和格式 * A:构造方法概述和作用 * 给对象的数据(属性)进行初始化 * B:构造方法格式特点 * a:方法名与类名相同(大小也要与类名一致) * b:没有返 ...
- CentOS 7 安装jdk9
1.下载jdk9 http://download.oracle.com/otn-pub/java/jdk/9.0.4+11/c2514751926b4512b076cc82f959763f/jdk-9 ...
- oracle:对Index重建、分析
对index进行分析,index_stats 表很有用.下面例子就结合index相关操作及 index_stats 的使用,对index进行分析. SQL> select count(*) fr ...
- c语言中为什么左移不分符号数无符号数,而右移分呢??
因为在C语言标准中,只规定了无符号数的移位操作是采用逻辑移位(即左移.右移都是使用的逻辑左移和逻辑右移).而对于有符号数,其左移操作还是逻辑左移,但右移操作是采用逻辑右移还是算术右移就取决于机器了!( ...
- Android中的ProgressBar的android:indeterminate
不明确(false)就是滚动条的当前值自动在最小到最大值之间来回移动,形成这样一个动画效果,这个只是告诉别人“我正在工作”,但不能提示工作进度到哪个阶段.主要是在进行一些无法确定操作时间的任务时作为提 ...