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(" "+ 
  "试 看  "
  );
}

页面：

 
  
  
 <#if course.coverImage?has_content> 
   
 <#else> 
  
  
  
 
 

第二种写法：

//在课程图片上放置按钮 
 
//$("#coursePicture").append("试看"); 
var freeOne=""; 
freeOne=$(".freePreviewOne").attr("data-url"); 
if(freeOne==null){ 
 //没有免费视频 
}else{ 
 $("#coursePicture").append(" "+ 
  "试 看  " 
  ); 
}

页面：

 
.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; 
} 
 
 
  
  
 <#if course.coverImage?has_content> 
   
 <#else> 
   
  
  
  
 

运行效果图如下：

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