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


Posted in Javascript onMay 29, 2015

本文实例讲述了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+CSS实现图片上放置按钮的方法

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

Javascript 相关文章推荐
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
get(0).tagName获得作用标签示例代码
Oct 08 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
JavaScript的ExtJS框架中表格的编写教程
May 21 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
Sep 01 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
js 提取某()特殊字符串长度的实例
Dec 06 Javascript
一次记住JavaScript的6个正则表达式方法
Feb 22 Javascript
关于vue的语法规则检测报错问题的解决
May 21 Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 Javascript
Jquery解析json字符串及json数组的方法
May 29 #Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 #Javascript
jQuery实现返回顶部效果的方法
May 29 #Javascript
jquery读取xml文件实现省市县三级联动的方法
May 29 #Javascript
Jquery动态添加输入框的方法
May 29 #Javascript
jquery任意位置浮动固定层插件用法实例
May 29 #Javascript
JQuery控制Radio选中方法分析
May 29 #Javascript
You might like
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
实例讲解yii2.0在php命令行中运行的步骤
2015/12/01 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
JavaScript 学习历程和心得分享
2010/12/12 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
详解vue移动端日期选择组件
2018/02/22 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
Javascript读取上传文件内容/类型/字节数
2019/04/30 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
python检测远程服务器tcp端口的方法
2015/03/14 Python
Django框架中方法的访问和查找
2015/07/15 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
python psutil库安装教程
2018/03/19 Python
python实现log日志的示例代码
2018/04/28 Python
Python远程方法调用实现过程解析
2020/07/28 Python
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
毕业生多媒体设计求职信
2013/10/12 职场文书
技术总监岗位职责
2013/12/05 职场文书
中考冲刺决心书
2014/03/11 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
中秋节主持词
2014/04/02 职场文书
运动会口号8字
2014/06/07 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
师德师风整改措施
2014/10/24 职场文书
php7中停止php-fpm服务的方法详解
2021/05/09 PHP
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL