相思资源网 Design By www.200059.com
本文实例讲述了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"${course.coverImage}" class="img-responsive" width="436px" height="245px" />
<#else>
<img src="/UploadFiles/2021-04-02/course-large.png">
第二种写法：
//在课程图片上放置按钮
/* <a class="button hide-650 fade5" href="#modal" data-toggle="modal" data-url="/course/hyjgz2np/lesson/preview"> <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"${course.coverImage}" class="img-responsive" width="436px" height="245px" />
<#else>
<img src="/UploadFiles/2021-04-02/course-large.png">
运行效果图如下：
希望本文所述对大家的jQuery程序设计有所帮助。
标签：
JQuery,CSS,图片,按钮
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无JQuery+CSS实现图片上放置按钮的方法的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。