学习Discuz! X3.2记录:对幻灯播放的进一步修改,包括css,代码
来源:互联网 发布:2016年6月进出口数据 编辑:程序博客网 时间:2024/06/05 18:20
DIY论坛首页模块属性,缩略图宽度为600,高度为450,所以提交帖子图片时候,把图片设置为这么大。
编辑前面的模块模板“DIY幻灯片BY_CBQ”代码为:
<div class="module cl slidebox"><ul class="slideshow">[loop]<li style="width: {picwidth}px; height: {picheight}px;"><a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" /></a><span class="title">{title}</span></li>[/loop]</ul></div><script type="text/javascript">runslideshow();</script>
修改template\cbqtest\common\extend_common.css中/* 幻灯片 */部分:
/* 幻灯片 */ .slideblock { position: relative; border:#000000 solid thin; }.slideshow { clear: both; }.slideshow li { float:left; position: relative; overflow: hidden; }.slideshow span.title { position:absolute; top:330px; left:15px; width: 100%; height: 32px; line-height: 32px; font-size: 14px; text-indent: 10px; }.slideshow span.title, .slidebar li { background: rgba(0, 0, 0, 0.3); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr = #30000000, endColorstr = #30000000); color: {LIGHTLINK}; overflow: hidden; }.slidebar li { margin-top:360px; margin-left:10px; margin-right: 1px; width: 70px; height: 70px; line-height: 70px; text-align: center; font-size: 30px; cursor: pointer; }.slidebar li.on { background: rgba(255, 255, 255, 0.5); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr = #50FFFFFF, endColorstr = #50FFFFFF); color: #000; font-weight: 700; }
最后幻灯效果是:
0 0
- 学习Discuz! X3.2记录:对幻灯播放的进一步修改,包括css,代码
- 学习Discuz! X3.2记录:又一个幻灯的代码
- 学习Discuz! X3.2记录:上一个幻灯的变种代码
- 学习Discuz! X3.2记录:superslide幻灯特效2
- 学习Discuz! X3.2记录:使用superslide幻灯特效,配置方法
- 学习Discuz! X3.2记录:修改标签“Powered by Discuz!”的一种方法
- 学习Discuz! X3.2记录:改变幻灯片播放形式
- 学习Discuz! X3.2记录:新建模板及修改logo
- 学习Discuz! X3.2记录:去掉论坛首页的“Archiver”、“小黑屋”等链接
- 学习Discuz! X3.2记录:快速回复插件,设置插件的快速回复内容
- 学习Discuz! X3.2记录:快速回复插件的最后效果动画
- discuz X3.2修改文件支持https
- discuz! X3 更改域名全程记录 (修改域名的方法)
- 学习Discuz! X3.2记录:一个很简单的插件制作过程,未涉及数据库,跳出一条提示语
- 学习Discuz! X3.2记录:快速回复插件,通过js使选择的下拉列表填充到回帖内容中
- Discuz! X3.2学习记录:多数据记录页面增加分页控件
- Discuz!X3.2学习笔记(一)
- Discuz!X3.2学习笔记(二)
- 集训队专题(6)1000 Machine Schedule
- 打包图集工具
- leetcode 264 ugly number &DP
- 蓝桥杯 第39阶台阶(dfs)
- Android大图片裁剪终极解决方案(上:原理分析)
- 学习Discuz! X3.2记录:对幻灯播放的进一步修改,包括css,代码
- C++中关于指针的理解(一点一点完善中)
- sql之内连接、 左连接、右连接、全连接
- 算法_6:分治策略
- Tiny4412 在linux下的dnw使用
- 上传漏洞
- 【Unity3D实战】零基础一步一步教你制作酷跑类游戏(1)
- 深入理解java异常处理机制
- where set trim sql if foreach 实现xml方式的动态sql