jQuery 特效实例_幽灵按钮4|学习笔记

简介: 快速学习 jQuery 特效实例_幽灵按钮4

开发者学堂课程【jQuery 开发教程:jQuery 特效实例_幽灵按钮4】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/362/detail/4315


jQuery 特效实例_幽灵按钮4


一、代码示例

实现 tooltip 提示框思路,要写一个div来承载提示框,需要位置的计算和下面的三角号,已经显示里面的内容。

首先让提示框承载出来,然后通过js控制位置。

1.承载提示框,以及字体三角符号

.box . tooltip{ //观察可以看到效果有应该设置宽度和高度,仔细观察宽度是自动撑开的,高度是固定的,然后有一个边框圆角的效果,设置字体以及下面的三角符号。
position: absolute; //设置绝对定位
padding: 0 15px;  //中间字体不是靠边的,设置上下为0px,左右为15px
height: 35px; //高度为35px
background-color: #2dcb70; //设置背景颜色为绿色
border-radius: 5px; //设置圆角效果为5px
line-height: 35px; 
margin: 0 auto; //使文字垂直居中
color: #ffffff; //设置字体颜色为白色
font-size: 18px; //字体大小为18px
font-weight: 700; //字体加粗效果
}

文本框效果图:图片90.png

.box . tooltip span{ //三角形符号
position: absolute; //设置为绝对定位
width:0; //高度为0
height:0; //宽度为0
border: 8px solid transparent; //边框宽度为8px,实线,给一个透明的颜色
border- top-color: #2dcb70;  //设置上边框颜色为绿色
Left: 50%; //使得三角符号居中
margin-left: -4p;  //三角号再左一点
}

运行结果:图片91.png

2.script鼠标移动上动态获取,添加文本

观察可知文本的添加都是动态获取动态添加的。

首先可以写div承载提示框,类名为tooltip,里面的内容可以用<em>承载,也可以用span标签,文本框下面的三角号也可以用<span>标签承载,

通过index.html主体代码为:

< !DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title> 
<link rel="stylesheet" href="app.css" type="text/css"/>
< /head>
<body>
<div class="box">
<div class="link Link-miss">
<span class="icon"></span>
<a href="#" class="button" data-text=”My mission is clear”>
//使用自定义属性添加内容并且可以获取到
<span class="line line- top"></span>
<span class="line Line-left"></span>
<span class="line line-right"></span>
<span class="line line- bottom"></span>
MISSION
</a>
</div>
<div class="link link-play">
<span class="icon">< /span>
<a href="#" class= "button" data-text=”This is my playground”>
<span class="line Line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line- bottom"></span>
PLAY
</a>
</div>
<div class="link link- touch'">
<span class="icon"></span>
<a href="#" class="button" data-text=”Lets do something together”>
<span class="line line- top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line- bottom"> </span>
TOUCH
</a>
</div>
<div class="tooltip">
<em> </em>  //随便添加内容,便于观察,设置成em标签方便查找span
<span></span>
</div>
</div>
<script src=”jquery-2.2.1.min.js”></script>
//使用js动态获取内容,并添加到<em>标签中
<script>
$( function(){
$(".button") . hover ( function() { //当鼠标略过时获取按钮,hover有两个参数,都为函数类型
var titleText=$(this) .attr ("data- text") ;
 //获取内容,声明变量titleText获取data- text内容
$(". tooltip em"). text(titleText);//使用指针指向,attr的方式动态获取titleText内容并添加
//返回的是个对象,只要获取距离左边的位置即可
var leftLoc=$(this).offset() .left;
var addleft=($(". tooltip"). outerWidth()-$(this) .outerwidth())/2;
//将距离赋给提示框,声明需要移动左边的距离变量addleft,因为是自适应的一个宽度,所以要动态获取tooltip,然后减去当前bottom的宽度。
$(". tooltip").css({
left: leftLoc-addleft; 
top:140
}) .animate({ //添加自定义动画
top:195,
opacity: 1
},300) //动画执行时间为300
}, function(){
})
})
</script>
< /body>
< /html>

最终效果图:图片92.png

相关文章
|
11月前
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
74 0
|
8天前
|
JavaScript 前端开发
jQuery 实例
jQuery 实例
13 3
|
2月前
|
JavaScript 前端开发 程序员
后端程序员的前端必备-jQuery核心学习笔记
后端程序员的前端必备-jQuery核心学习笔记
49 13
|
2月前
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
17 1
|
2月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
17 1
|
2月前
|
JavaScript 前端开发 容器
使用 jQuery 中的 this 实例
使用 jQuery 中的 this 实例
26 0
|
5月前
|
JavaScript 前端开发 API
web学习笔记(二十九)jQuery
web学习笔记(二十九)jQuery
35 0
|
5月前
|
JavaScript 前端开发
【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
【5月更文挑战第2天】【Web 前端】如何在点击一个按钮时使用 jQuery 隐藏一个图片?
|
5月前
|
前端开发 JavaScript
jquery+css实现Tab栏切换的代码实例
jquery+css实现Tab栏切换的代码实例
87 0