(1)
<div class="rowslistdiv">
<div class="listdiv">
<a class="most-visited"> <img src="images/sina.png"></a><div class="shadow" style="display: block;"><a class="linka" href="http://www.sina.com/" target="_blank"></a></div>
</div>
</div
当有多个listdiv 的情况下 实现鼠标滑入show display: block滑出 show display: none的效果
$('.listdiv').hover(function(){ $(this).find('.shadow').fadeIn(); },function(){ $(this).find('.shadow').fadeOut(100); });
(2)
<div class="search">
<div class="ipt" id="ipt">
<form name="linesearch" id="linesearch" >
<div id="search-switch" class="search-engine">
<!--没有样式 -->
<a class="baidu" style="display:none">
</a>
</div>
<div class="mrgleft" id="lineleft">
<span class="" id="searchabtn">
</span>
<div id='searchdiv' style="float: right;display: none;position: relative;width: 50px;height: 50px;" οnclick="linesearch.submit()"></div>
<input id="search-kw" class="iputhover" name="word" type="text" value="搜索" autocomplete="off">
</div>
<!--<div id="search-hotword" style="display: block;"></div>-->
</div>
<ul id="search-menu" >
<li><a href="#" class="so">360搜索</a></li>
<li><a href="#" class="google">谷歌</a></li>
<li><a href="#" class="baidu">百度 </a></li>
</ul>
<div class="btn" id="s_btn" style="display:none">
<a href="https://www.baidu.com/">搜索一下</a>
</div>
</form>
</div>
点击下拉下图标改变action和上面图片。
var newclass=$("#search-switch>a").attr('class');
var hostsearch="";//获取搜索域名[百度,360,google]
// var parameter="";
//拿到search-switch 下面a的class值
switch(newclass)
{
case 'so':
hostsearch ="https://www.so.com/s?src=wisdomchrome_newtab_search&ie=utf-8";
break;
case 'google':
hostsearch ="http://www.google.com.hk/search?client=aff-cs-360chromium&ie=UTF-8";
break;
case 'baidu':
hostsearch ="https://www.baidu.com/baidu?&ie=utf-8";
break;
default:
hostsearch ="https://www.baidu.com/baidu?&ie=utf-8";
break;
}
document.linesearch.action=hostsearch;
到图1的效果的实现代码,通过动态改变css:
//可选择搜索类型切换
$("#search-switch>a").click(function(){
$("#search-menu").slideToggle("slow");
});
$("#ipt").click(function(){
$("#lineleft").removeClass("mrgleft");
//搜索框效果
$("#search-kw").removeClass("iputhover");
$("#search-kw").css("margin-left","-35px");
$("#search-kw").focus();
$("#searchabtn").animate({left:"500px"},500);//搜索按钮向右滑动
$("#search-switch>a").css('display','block');
$("#searchdiv").css('display','block');
});