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;
}
最新文章
- 关于EventEmitter的用法
- Python—redis
- 个人博客作业Week1
- Leetcode Add Binary
- Jmeter—3 http请求—content-type与参数
- python类、对象、方法、属性之类与对象笔记
- C#开源系统大汇总(转)
- PHP查询数据库中满足条件的记录条数(二种实现方法)
- ArcGIS Server 10.2 实战(三)图层标注及图例中文显示乱码的解决
- HDOJ-1042 N!(大数乘法)
- 水晶报表在vs2010 ;WPF环境下的尝试
- a5站长论坛和s8站长论坛-网上兼职做任务赚钱的两大网站
- html页面高度自适应
- python3 第十五章 - 数据类型之Sets(集合)
- HDU - 6313 Hack It(构造)
- AMD、CMD和Common规范
- 1064: 不明飞行物(ufo)
- Multitenant Architecture---PDB与CDB
- 新增html5标签 例如input的很多属性
- Metasploit漏洞利用,三个入侵主机实战案例
热门文章
- ok6410[000] ubuntu1604_64bit下安装wps
- 远程连接mysql速度慢的解决方法:skip-name-resolve取消DNS的反向解析
- 文件宝局域网传输/播放功能使用帮助(Windows电脑用户)
- Principle of least astonishment
- Hibernate commit() 和flush() 的区别
- 树的深度优先遍历和广度优先遍历的原理和java实现代码
- mysql优化-------Myisam与innodb引擎,索引文件的区别
- SDUT OJ 图练习-BFS-从起点到目标点的最短步数 (vector二维数组模拟邻接表+bfs , *【模板】 )
- Redis实现中间件(订阅)
- 计算机学院大学生程序设计竞赛(2015’12)Happy Value