JQuery与CSS之图片上放置button
position:relative日常应用的时候通常是设置给position:absolute;的父层的,
父层position:relative; 子层position:absolute;的话, 就是按照父层的边界进行定位的,
不然position:absolute 会逐层向上寻找设置了position:relative的元素边界, 直到body元素..
第一种写法(连同CSS一起追加进去)
var freeOne="";
freeOne=$(".freePreviewOne").attr("data-url");
if(freeOne==null){
//没有免费视频
}else{
$("#coursePicture").append("<a class='hide-650 fade5' "+
"style='top:94px;left:150px;position:absolute;z-index:100; " +
" width: 180px;height: 60px;border: 2px solid white;" +
"display: block;color: white;text-decoration: none;" +
"letter-spacing: 1px;font-size: 16px;line-height: 20px;" +
"text-align:center;padding-top:18px;" +
"background-color: rgba(0, 0, 0, 0.44);" +
"-webkit-backface-visibility: hidden;-webkit-transition: all .3s ease-in-out;" +
"-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;" +
"-o-transition: all .3s ease-in-out;" +
"border-radius: 10px;'"+ "href='#modal' data-toggle='modal' "+
"data-url='"+freeOne+"'> "+
"<span class='contactus' style='font-size:26px;'>试 看</span> <span class='glyphicon glyphicon-play' style='font-size:20px;top:0;bottom:2px;'></span> </a>"
);
}
页面:
<div class="es-row-wrap container-gap course-cover"> <div class="row row-5-7 course-cover-heading">
<div id="coursePicture" class="col-sm-5 picture hidden-xs" style="position: relative;">
<#if course.coverImage?has_content>
<img src="${course.coverImage}" class="img-responsive" width="436px" height="245px" />
<#else>
<img src="/resources/assets/img/default/course-large.png" class="img-responsive" />
</#if>
</div>
</div> </div>
另外一种写法:
//在课程图片上放置按钮
/* <a class="button hide-650 fade5" href="#modal" data-toggle="modal" data-url="/course/hyjgz2np/lesson/preview?lectureId=hyjgz2np0.49618492345325650.04212287697009742"> <span class="contactus"><strong>试看</strong></span> </a>
*/ //$("#coursePicture").append("<a class='btn btn-sm btn-info' href='#' style='top:120px;left:180px;position:absolute;z-index:100;'>试看</a>");
var freeOne="";
freeOne=$(".freePreviewOne").attr("data-url");
if(freeOne==null){
//没有免费视频
}else{
$("#coursePicture").append("<a class='freePreviewPicture hide-650 fade5' "+
"href='#modal' data-toggle='modal' "+
"data-url='"+freeOne+"'> "+
"<span class='contactus' style='font-size:26px;'>试 看</span> <span class='glyphicon glyphicon-play' style='font-size:20px;top:0;bottom:2px;'></span> </a>"
);
}
页面:
<style>
.freePreviewPicture{
top:94px;
left:150px;
position:absolute;
z-index:100;
width: 180px;
height: 60px;
border: 2px solid white;
display: block;
color: white;text-decoration: none;
letter-spacing: 1px;font-size: 16px;
line-height: 20px;
text-align:center;padding-top:18px;
background-color: rgba(0, 0, 0, 0.44);
-webkit-backface-visibility: hidden;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
border-radius: 10px;
}
</style>
<div class="es-row-wrap container-gap course-cover"> <div class="row row-5-7 course-cover-heading">
<div id="coursePicture" class="col-sm-5 picture hidden-xs" style="position: relative;">
<#if course.coverImage? has_content>
<img src="${course.coverImage}" class="img-responsive" width="436px" height="245px" />
<#else>
<img src="/resources/assets/img/default/course-large.png" class="img-responsive" />
</#if>
</div>
</div> </div>
执行效果图:
JQuery与CSS之图片上放置button的更多相关文章
- 在php中使用jquery uploadify进行多图片上传
jquery uploadify是一款Ajax风格的批量图片上传插件,在PHP中使用jquery uploadify很方便,请按照本文介绍的方法和步骤,为你的PHP程序增加jquery uploadi ...
- Uploadify & jQuery.imgAreaSelect 插件实现图片上传裁剪
在网站中需要一个图片上传裁剪的功能,借鉴这篇文章 Ajax+PHP+jQuery图片截图上传 的指点,找到了jquery.imgAreaSelect这个不错插件,能对图片进行自定义区域选择并给出坐标, ...
- jQuery:[1]实现图片上传并预览
jQuery:[1]实现图片上传并预览 原理 预览思路 1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL: 2.把对象URL赋值给实现写好的img标签的src属性 Fil ...
- jquery php ajax多图片上传.上传进度,生成缩略图
本例用到其他2个php class.upload.php和 functions.php还有css和js以及img文件 下载地址为www.freejs.net/demo/91/down.zip 演示 J ...
- jQuery实现鼠标放到图片上,放大图片
<script src="../../Script/jquery-1.7.2.js" type="text/javascript"></scr ...
- html+css 在图片上添加文字
html <view class="container"> <image class="" src="{{book.image}}& ...
- jquery+html5实现单张图片上传预览
js: if (window.File && window.FileReader && window.FileList && window.Blob){ ...
- thinkphp5+layui多图片上传
准备资料 下载layui <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- [python][flask] Flask 图片上传与下载例子(支持漂亮的拖拽上传)
目录 1.效果预览 2.新增逻辑概览 3.tuchuang.py 逻辑介绍 3.1 图片上传 3.2 图片合法检查 3.3 图片下载 4.__init__.py 逻辑介绍 5.upload.html ...
随机推荐
- 0x01 位运算
都比较基础吧. 知识点 1.快速幂和快速乘(这里有一个用long double舍弃精度的做法,但是感觉既不稳又没用) 2.懒人写边目录的时候的k^1 3.lowbit,得到的是低到高第一个1的位.求一 ...
- c:forTokens标签delims截取字符
转自:https://blog.csdn.net/love398146779/article/details/83853958 两个name要相同,在里边内容为空的时候才会全显示. <logic ...
- 17.UNP第一章 简介
获取时间的客户端代码: //客户端程序 #include "unp.h" int main(int argc, char **argv) { int sockfd, n; ]; s ...
- Elasticsearch部署异常Permission denied
异常描述 在Linux上部署ElasticSearch时抛出了一个异常如下: log4j:ERROR setFile(null,true) call failed. java.io.FileNotFo ...
- Oracle中的数据字典技术及常用数据字典总结
一.Oracle数据字典 数据字典是Oracle存放有关数据库信息的地方,其用途是用来描述数据的.比如一个表的创建者信息,创建时间信息,所属表空间信息,用户访问权限信息等.当用户在对数据库中的数据进行 ...
- struts2学习之基础笔记8
文件的上传和下载 上传 步骤1:在文件上传表单中设置method和enctype属性值 格式:<s:form method=”post” enctype =”multipart/ form.da ...
- Core Java(五)
类和对象&方法 ——类的定义 现实世界的事物 属性:人的身高,体重等 行为:人可以学习,吃饭等 Java中用class描述事物也是如此 成员变量:就是事物的属性 成员方法:就是事物的行为 ...
- (转)硬盘结构,主引导记录MBR,硬盘分区表DPT,主分区、扩展分区和逻辑分区,电脑启动过程
硬盘结构硬盘有很多盘片组成,每个盘片的每个面都有一个读写磁头.如果有N个盘片.就有2N个面,对应2N个磁头(Heads),从0.1.2开始编号.每个盘片的半径均为固定值R的同心圆再逻辑上形成了一个以电 ...
- js input 只能输入数字
HTML网页上这么写 <input type="text" style="ime-mode:disabled;" onpaste="return ...
- gcc编译c中有与lua交互的代码
编译C程序中有与Lua有关的程序(编译环境是Linux系统,lua解释器是luajit)gcc -o test30 test30.cpp -I/usr/local/include/luajit-2.0 ...