web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
文字效果
7种HTML5 Figure图片字幕标题特效
分类:
文字效果
日期:
2024-05-14
点击(2)
评论(0)
演 示
免费下载
简介
##### HTML结构 该图片标题特效可以直接使用一个
元素来制作,也可以使用HTML5
元素来制作: ```html
An awesome picture caption!
``` ##### CSS样式 该特效中给出了最基本的CSS样式,你可以根据需要对figurecaptions.css文件进行修改。 ```html figure, .figurefx{ position: relative; overflow: hidden; display: inline-block; z-index: 2000; /* set this to highest z-index value on your page */ margin: 0; padding: 0; } .figurefx img{ position: relative; display: block; left: 0; top: 0; z-index: 98; } .figurefx div.veils{ content: ''; width: 100%; height: 100%; display: block; background: black; position: absolute; opacity: 0.3; visibility: hidden; top: 0; left 0; z-index: 99; } .figurefx figcaption{ position: absolute; left: 0; top: 50%; /* vertically center caption */ transform: translateY(-50%); /* vertically center caption */ width: 100%; height: auto; background: #000; color: #fff; padding: 5px 10px; overflow: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; opacity: 0; z-index: 100; } .figurefx figcaption a{ text-decoration: none; } a#stickyhoverfixios{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 1999; /* set this to 2nd highest z-index value on your page */ display: none; } ``` ##### 初始化插件 在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该图片标题插件。 ```html $(function(){ $('selector').addCaption({ //comma separated options }) }) ``` ##### 配置参数 | 参数 | 描述 | | ------------ | ------------ | | fx | 'string' | |默认值"default"|图片上的标题效果,下面是7种可用的标题效果:| |"default":|遮罩层从上向下滑落,标题从左向后滑出。| |"zoomin":|当鼠标滑过时图片被放大。| |"dualpanels":|遮罩层分别从上面和下面向中间合拢,然后标题出现。| |"dualpanels2":|遮罩层分别从左边和右边向中间合拢,然后标题出现。| |"pushup":|图片被轻微的向上推,图片标题从下方出现。| |"flipopen":|图片翻转,标题在图片下方出现。| |"flipreveal":|图片绕X轴旋转180度,然后标题出现。| |caption:'string,title' 默认值:null|"string"参数表示图片的标题,可以带HTML标签。"title"参数表示使用图片的title标签来作为图片标题。| |duration: seconds 默认值:0.5|图片标题动画的持续时间,单位毫秒。|
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告