前端——给button制作一个简单的爱心特效(1)

作者：IT小白 | 2024-02-16 11:24:20

踩

前言

今天在学习bootstrap的时候栅格系统的时候，突然心生一个小点子，就是能不能对搜索框的搜索按钮加点料，让其变的生动起来，大概是下面的样子。
在这里插入图片描述
心动不如行动，活学活用、现学现卖，加深理解，开始敲键盘。首先要做个搜索框出来，用bootstrap来做很容易，bootstrap是一个基于html 、css和js所开发出来的前端框架，它使得网页的开发更高效，同时也更具有观赏性，所以学了一点皮毛的我就迫不及待赶紧来试一试了。

一、制作搜索框

首先找到bootstrap中文的官方网站(bootstrap中文官方网站)，然后在其bootstrap3中文文档中的全局css样式中找到表单一栏，像购物一样获取我们想要的样式商品，样式代码如下。

//响应式布局
<div class="container">  
	<div class="row">
		<form>
			<div class="input-group">
				<input type="text" class="form-control" placeholder="who are you?">
				<span class="input-group-btn">
			   		<button class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
				</span>
			</div>
		</form>
	</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13

首先使用bootstrap中好用的响应式布局container,然后通过表单控件和按钮来实现搜索栏，如下。
在这里插入图片描述

二、制作鼠标划入特效

在bootstrap组件中获取桃心样式的字体图标类名为glyphicon glyphicon-heart，通过获取button的绝对尺寸结合animate()来控制桃心的运动轨迹和时间，通过fadeOut()来控制桃心的淡出，最终代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<title>Document</title>
	<script type="text/javascript">
		
		$(function(){

			var $btnposi = $('.btn').offset();
			document.title = $btnposi.left+'|'+$btnposi.top;
			var $love = $('.love span');
			var $bool = false;
			$('.btn').mouseenter(function(){
				if ($bool) {
					return;
				}
				$bool = true;
				$love.eq(0).css({'left':$btnposi.left+10,'top':$btnposi.top-40});
				$love.eq(1).css({'left':$btnposi.left-6,'top':$btnposi.top-58});
				$love.eq(2).css({'left':$btnposi.left-20,'top':$btnposi.top-65});
				$love.eq(3).css({'left':$btnposi.left-30,'top':$btnposi.top-85});
				$love.eq(4).css({'left':$btnposi.left+20,'top':$btnposi.top-55});
				$love.eq(5).css({'left':$btnposi.left+35,'top':$btnposi.top-75});
				$love.eq(6).css({'left':$btnposi.left+13,'top':$btnposi.top-80});
				$love.eq(7).css({'left':$btnposi.left,'top':$btnposi.top-90});
				$love.eq(8).css({'left':$btnposi.left+38,'top':$btnposi.top-100});
				$love.eq(9).css({'left':$btnposi.left-38,'top':$btnposi.top-103});
				$love.eq(10).css({'left':$btnposi.left+4,'top':$btnposi.top-68});
				$love.eq(11).css({'left':$btnposi.left+8,'top':$btnposi.top-75});
				$love.eq(12).css({'left':$btnposi.left+47,'top':$btnposi.top-103});
				$love.eq(13).css({'left':$btnposi.left-5,'top':$btnposi.top-78});
				$love.eq(14).css({'left':$btnposi.left-9,'top':$btnposi.top-88});
				$love.show();
				
				$love.eq(12).animate({'left':$btnposi.left+53,'top':$btnposi.top-209},900);
				$love.eq(12).fadeOut(500);
				$love.eq(9).animate({'left':$btnposi.left-50,'top':$btnposi.top-203},900);
				$love.eq(8).animate({'left':$btnposi.left+68,'top':$btnposi.top-200},1000);
				$love.eq(7).animate({'left':$btnposi.left+30,'top':$btnposi.top-190},1000);
				$love.eq(9).fadeOut(500);
				$love.eq(8).fadeOut(550);
				$love.eq(7).fadeOut(600);
				$love.eq(3).animate({'left':$btnposi.left-60,'top':$btnposi.top-185},1000);
				$love.eq(6).animate({'left':$btnposi.left+43,'top':$btnposi.top-185},1000);
				$love.eq(3).fadeOut(650);
				$love.eq(6).fadeOut(700);
				$love.eq(14).animate({'left':$btnposi.left-19,'top':$btnposi.top-175},1200);
				$love.eq(13).animate({'left':$btnposi.left-6,'top':$btnposi.top-144},1200);
				$love.eq(14).fadeOut(725);
				$love.eq(13).fadeOut(725);
				$love.eq(5).animate({'left':$btnposi.left+65,'top':$btnposi.top-175},1200);
				$love.eq(2).animate({'left':$btnposi.left-50,'top':$btnposi.top-165},1200);
				$love.eq(5).fadeOut(750);
				$love.eq(2).fadeOut(775);
				$love.eq(11).animate({'left':$btnposi.left+20,'top':$btnposi.top-145},1200);
				$love.eq(11).fadeOut(800);
				$love.eq(10).animate({'left':$btnposi.left+18,'top':$btnposi.top-160},1300);
				$love.eq(10).fadeOut(825);
				$love.eq(4).animate({'left':$btnposi.left+50,'top':$btnposi.top-155},1300);
				$love.eq(4).fadeOut(850);
				$love.eq(1).animate({'left':$btnposi.left-36,'top':$btnposi.top-158},1300);
				$love.eq(1).fadeOut(900);
				$love.eq(0).animate({'left':$btnposi.left+30,'top':$btnposi.top-130},1300);
				$love.eq(0).fadeOut(500,function(){
					$bool = false;
				});
				
			})


		});

	</script>
	<style type="text/css">
		.btn,#love1,#love2,#love3,#love4{
			position:fixed;
		}
		#love1{
			color:lightblue;
			font-size:30px;
		}
		#love2{
			color:pink;
			font-size:25px;
		}
		#love3{
			color:lightgreen;
			font-size:20px;
		}
		#love4{
			color:orange;
			font-size:35px;
		}
		.love span{
			display:none;
		}
		.row{
			margin-top:400px;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<form>
			 	<div class="input-group">
			  		<input type="text" class="form-control" placeholder="who are you?">
			  		<span class="input-group-btn">
			   			<button class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
			  		</span>
			  	</div>
			</form>
		</div>
		<div class="love">
			<span class="glyphicon glyphicon-heart" id="love1"></span>
			<span class="glyphicon glyphicon-heart" id="love2"></span>
			<span class="glyphicon glyphicon-heart" id="love3"></span>
			<span class="glyphicon glyphicon-heart" id="love1"></span>
			<span class="glyphicon glyphicon-heart" id="love4"></span>
			<span class="glyphicon glyphicon-heart" id="love2"></span>
			<span class="glyphicon glyphicon-heart" id="love4"></span>
			<span class="glyphicon glyphicon-heart" id="love2"></span>
			<span class="glyphicon glyphicon-heart" id="love3"></span>
			<span class="glyphicon glyphicon-heart" id="love2"></span>
			<span class="glyphicon glyphicon-heart" id="love3"></span>
			<span class="glyphicon glyphicon-heart" id="love3"></span>
			<span class="glyphicon glyphicon-heart" id="love1"></span>
			<span class="glyphicon glyphicon-heart" id="love4"></span>
			<span class="glyphicon glyphicon-heart" id="love2"></span>
		</div>
	</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

个人感觉代码很冗余，但是还是放出来望大佬们指点，也希望日后有方法能回来进行优化。当然在编写过程中还遇到很多的问题，也记录下加深记忆。

遇到的问题即难点

一开始就出错的是bootstrap和jQuery库的引入顺序，将顺序搞反了，出现下面的错误，应该先引入jQuery的库，在引入bootstrap,因为bootstrap是依赖jQuery库的，如果先引用bootstrap的话，有可能会被后引入的jQuery所覆盖导致出错。
桃心在鼠标划入的时候一直到不到想要的效果，每一次重新划入桃心的透明度都不一致，用户体验很不好。首先想到的是fadeIn()效果导致的，再淡化还没完全结束时再次移入鼠标，会导致桃心以未结束的透明度再次出现。
于是想到第一个解决办法就是通过设置鼠标移出事件通过stop()来让淡出效果停止，但是无济于事，好像效果停止，透明度不会变回最初的状态。
于是想到第二个解决办法就是设置布尔变量，通过最后一次淡出时传递一个值，让桃心完全消失才能触发下次的桃心特效，最后实现了如开头所示的效果。

结语

最后想说的还是代码太冗余，我自己都看不下去，希望早日学精，能用最短的代码做出最炫的效果。也希望各位大佬多多支招如何优化此代码。睡觉睡觉，明天再敲声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】