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 相关文章推荐
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
js 面向对象的技术创建高级 Web 应用程序
Feb 25 Javascript
一个JavaScript的求爱小特效
May 09 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
js计时事件实现圆形时钟
Mar 25 Javascript
node.js中npm包管理工具用法分析
Feb 14 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 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中使用接口实现工厂设计模式的代码
2012/06/17 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
php实现异步数据调用的方法
2015/12/24 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
常用一些Javascript判断函数
2012/08/14 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
Jquery对象和Dom对象的区别分析
2014/11/20 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
Angular4 中常用的指令入门总结
2017/06/12 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
详解小程序原生使用ES7 async/await语法
2018/08/06 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
微信小程序如何调用新闻接口实现列表循环
2019/07/02 Javascript
js抽奖转盘实现方法分析
2020/05/16 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
对Django中内置的User模型实例详解
2019/08/16 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
基于python检查矩阵计算结果
2020/05/21 Python
基于pycharm 项目和项目文件命名规则的介绍
2021/01/15 Python
八一建军节部队活动方案
2014/02/04 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
大学生党员承诺书
2014/05/20 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
保险内勤岗位职责
2015/04/13 职场文书
拖欠货款起诉状
2015/05/20 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
nginx 配置缓存
2022/05/11 Servers