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获取下拉列表的值和元素个数示例
May 07 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
Jul 27 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
Nov 18 Javascript
JavaScript内存泄漏的处理方式
Nov 20 Javascript
JavaScript 高性能数组去重的方法
Sep 20 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 Javascript
用javascript制作qq注册动态页面
Apr 14 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运行模式的深入理解
2013/06/03 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
关于COOKIE个数与大小的问题
2011/01/17 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
纯js实现仿QQ邮箱弹出确认框
2015/04/29 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
原生JS实现图片左右轮播
2016/12/30 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
浅谈Vue.js组件(二)
2019/04/09 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
Cython 三分钟入门教程
2009/09/17 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
网站渗透常用Python小脚本查询同ip网站
2017/05/08 Python
wxPython之解决闪烁的问题
2018/01/15 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python移位运算的实现
2019/07/15 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
基于python实现操作git过程代码解析
2020/07/27 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
一些高难度的SQL面试题
2016/11/29 面试题
工程力学硕士生的自我评价范文
2013/11/16 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL