JQuery CSS method of placing buttons on images

JQuery CSS method of placing buttons on images_jquery

WBOY

Release： 2016-05-16 15:57:22

Original

1303 people have browsed it

The example in this article describes the method of placing buttons on images with JQuery CSS. Share it with everyone for your reference. The specific analysis is as follows:

When used in daily applications, position:relative is usually set to the parent layer of position:absolute;,
If the parent layer position: relative; and the child layer position: absolute;, it is positioned according to the boundary of the parent layer,
Otherwise, position:absolute will search upwards layer by layer for the element boundaries set with position:relative, until the body element...

The first way of writing (add it together with 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>"
  );
}

Copy after login

Page:

<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&#63;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>

Copy after login

The second way of writing:

//在课程图片上放置按钮 
/* <a class="button hide-650 fade5" href="#modal" data-toggle="modal" data-url="/course/hyjgz2np/lesson/preview&#63;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>" 
  ); 
}

Copy after login

Page:

<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&#63;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>

Copy after login

The operation effect diagram is as follows:

I hope this article will be helpful to everyone’s jQuery programming.