jQuery视频侧边隐藏搜索框js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery视频侧边隐藏搜索框js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery视频侧边隐藏搜索框</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-latest.js" type="text/javascript"></script>
<script src="js/js.js" type="text/javascript"></script>
</head>
<body>
<div class="check"></div>
<div class="player">
      <div class="logo"></div>
      <input type="text" class="input" label="What would you like to play?" placeholder="What would you like to play?">
      <div role="button" class="searchButton" tabindex="0" style="-webkit-user-select: none; ">
       		<div class="searchIcon"></div>
      </div></div><!--End Player-->
</body>
</html>

JS代码(js.js):

$(document).ready(function(){
	//Declare the elements we are going to use as variablesvar input = $('.input');
	player = $('.player');
	searchbutton = $('.searchButton');
	//On Mouseover of the player,add the class 'playerhover' to '.player' and 'searchButtonHover' to '.searchButton'player.mouseover( function (){
	player.addClass('playerHover');
	searchbutton.addClass('searchButtonHover');
}
);
	//On Mouseout of the player,remove the class 'playerhover' to '.player' and 'searchButtonHover' to '.searchButton'player.mouseout( function (){
	player.removeClass('playerHover');
	searchbutton.removeClass('searchButtonHover');
}
);
	//On focus of '.input' add the class 'playerfocus' to '.player' and 'searchButtonHover' to '.searchButton'input.focus(function(){
	player.addClass('playerFocus');
	searchbutton.addClass('searchButtonFocus');
}
);
	//On Blur of '.input' remove the class 'playerfocus' to '.player' and 'searchButtonHover' to '.searchButton'input.blur(function(){
	player.removeClass('playerFocus')searchbutton.removeClass('searchButtonFocus');
}
);
}
);

CSS代码(style.css):

@charset "utf-8";.check{background-image:url(check.png);width:218px;height:74px;position:absolute;right:14px;top:65px;}
.player{position:absolute;right:0;top:150px;width:25px;padding:6px;background:#F5F5F5;border:1px solid #D2D2D2;border-right-width:0;/* removes the right border from the player for it to site nicely against the browser window */
border-top-left-radius:2px;border-bottom-left-radius:2px;box-shadow:0 0 5px rgba(0,0,0,0.1);-webkit-box-shadow:0 0 5px rgba(0,0,0,0.1);-moz-box-shadow:0 0 5px rgba(0,0,0,0.1);transition:.218s;-moz-transition:.218s;-ms-transition:.218s;-o-transition:.218s;-webkit-transition:.218s;}
.playerHover,.playerFocus{width:286px;}
.logo{background:no-repeat url(sprite.png) 0 0px;height:29px;left:6px;width:25px;}
.input{position:absolute;right:6px;left:6px;top:6px;width:207px;height:25px;padding:1px 8px;line-height:24px;margin-left:31px;color:#999;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;border:1px solid #D9D9D9;border-top:1px solid #C0C0C0;font-size:13px;}
.input:focus{outline:none;border:1px solid #4D90FE;box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);}
.searchButton{opacity:0;min-width:29px;position:absolute;top:6px;right:6px;height:27px;text-align:center;background-color:#4D90FE;background-image:-webkit-linear-gradient(top,#4d90fe,#4787ed);background-image:-moz-linear-gradient(top,#4d90fe,#4787ed);background-image:-ms-linear-gradient(top,#4d90fe,#4787ed);background-image:-o-linear-gradient(top,#4d90fe,#4787ed);background-image:linear-gradient(top,#4d90fe,#4787ed);border:1px solid #3079ED;-moz-border-radius-bottomleft:0;-moz-border-radius-topleft:0;-webkit-border-bottom-left-radius:0;-webkit-border-top-left-radius:0;border-bottom-left-radius:0;border-top-left-radius:0;border-radius:2px;transition:.218s;-moz-transition:.218s;-ms-transition:.218s;-o-transition:.218s;-webkit-transition:.218s;}
.searchButton:hover{background-color:#4D90FE;background-image:-webkit-linear-gradient(top,#4d90fe,#357ae8);background-image:-moz-linear-gradient(top,#4d90fe,#357ae8);background-image:-ms-linear-gradient(top,#4d90fe,#357ae8);background-image:-o-linear-gradient(top,#4d90fe,#357ae8);background-image:linear-gradient(top,#4d90fe,#357ae8);}
.searchButtonHover,.searchButtonFocus{opacity:1;}
.searchIcon{background:no-repeat url(sprite.png) 0px -30px;cursor:pointer;height:14px;margin-top:6px;width:13px;position:relative;display:-moz-inline-box;display:inline-block;}

附件:下载该文件资源,减少时间成本(增值服务)