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 相关文章推荐
JavaScript 事件记录使用说明
Oct 20 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
Dec 30 Javascript
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 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
PHP出错界面
2006/10/09 PHP
资料注册后发信小技巧
2006/10/09 PHP
一个php作的文本留言本的例子(二)
2006/10/09 PHP
php使用异或实现的加密解密实例
2013/09/04 PHP
Laravel 5框架学习之用户认证
2015/04/09 PHP
PHP加密解密类实例分析
2015/04/20 PHP
thinkPHP查询方式小结
2016/01/09 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
JavaScript 撑出页面文字换行
2009/06/15 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
2015/12/04 Javascript
javaScript中定义类或对象的五种方式总结
2016/12/04 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python中urllib模块用法实例详解
2014/11/19 Python
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
Python中单、双下划线的区别总结
2017/12/01 Python
TensorFlow实现简单卷积神经网络
2018/05/24 Python
从运行效率与开发效率比较Python和C++
2018/12/14 Python
Python3 pickle对象串行化代码实例解析
2020/03/23 Python
Python3+SQLAlchemy+Sqlite3实现ORM教程
2021/02/16 Python
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
投资协议书范本
2014/04/21 职场文书
校优秀毕业生主要事迹
2014/05/26 职场文书
公司慰问信范文
2015/03/23 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
篮球拉拉队口号
2015/12/25 职场文书