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

前端技术 2023/09/04 JavaScript

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

本文地址：https://www.stayed.cn/item/11362

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案