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

本文实例讲述了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程序设计有所帮助。