前言
今天在学习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()来让淡出效果停止,但是无济于事,好像效果停止,透明度不会变回最初的状态。
于是想到第二个解决办法就是设置布尔变量,通过最后一次淡出时传递一个值,让桃心完全消失才能触发下次的桃心特效,最后实现了如开头所示的效果。
结语
最后想说的还是代码太冗余,我自己都看不下去,希望早日学精,能用最短的代码做出最炫的效果。也希望各位大佬多多支招如何优化此代码。睡觉睡觉,明天再敲😴。