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

最新推荐文章于 2024-07-18 11:42:47 发布

五月天差一天

最新推荐文章于 2024-07-18 11:42:47 发布

阅读量1.5k

点赞数

分类专栏： jquery bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/s707365172/article/details/115742952

版权

jquery 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

bootstrap

3 篇文章 0 订阅

订阅专栏

前言

今天在学习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>

首先使用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>

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

遇到的问题即难点

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

结语

最后想说的还是代码太冗余，我自己都看不下去，希望早日学精，能用最短的代码做出最炫的效果。也希望各位大佬多多支招如何优化此代码。睡觉睡觉，明天再敲😴。

五月天差一天

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
3
评论
前端——给button制作一个简单的爱心特效(1)

##前端——给button制作一个简单的特效前言今天在学习bootstrap的时候栅格系统的时候，突然心生一个小点子，就是能不能对搜索框加点料，让其变的生动起来，大概是下面的样子。心动不如行动，活学活用、现学现卖，加深理解，开始敲键盘。首先要做个搜索框出来，用bootstrap来做很容易，bootstrap是一个基于html 、css和js所开发出来的前端框架，它使得网页的开发更高效，同时也更具有观赏性，所以学了一点皮毛的我就迫不及待赶紧来试一试了。一、制作搜索框首先找到bootstrap中文的
复制链接

扫一扫

专栏目录