JQuery+CSS实现图片上放置按钮的方法


Posted in Javascript onMay 29, 2015

本文实例讲述了JQuery+CSS实现图片上放置按钮的方法。分享给大家供大家参考。具体分析如下:

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实现图片上放置按钮的方法

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript中的数学函数集合
May 08 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
Jquery基础教程之DOM操作
Aug 19 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
简单对比分析JavaScript中的apply,call与this的使用
Dec 04 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
Vue中父组件向子组件通信的方法
Jul 11 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
微信公众号平台接口开发 获取access_token过程解析
Aug 14 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
Jquery解析json字符串及json数组的方法
May 29 #Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 #Javascript
jQuery实现返回顶部效果的方法
May 29 #Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 #Javascript
Jquery动态添加输入框的方法
May 29 #Javascript
jquery任意位置浮动固定层插件用法实例
May 29 #Javascript
JQuery控制Radio选中方法分析
May 29 #Javascript
You might like
php读取二进制流(C语言结构体struct数据文件)的深入解析
2013/06/13 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
Gambit vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
javascript编程起步(第四课)
2007/01/10 Javascript
Javascript 通过json自动生成Dom的代码
2010/04/01 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
利用javascript数组长度循环数组内所有元素
2013/12/27 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
Bootstrap前端开发案例二
2016/06/17 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
2017/12/28 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
python rsa 加密解密
2017/03/20 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
python os模块在系统管理中的应用
2020/06/22 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
生产厂长岗位职责
2014/02/21 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
网络技术专业求职信
2014/05/02 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
公务员个人年终总结
2015/02/12 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers