jq 淡入淡出 滑动 焦点等实际使用
来源:互联网 发布:免费售楼软件 编辑:程序博客网 时间:2024/04/30 20:43
(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;" onclick="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');
});
- jq 淡入淡出 滑动 焦点等实际使用
- jq淡入淡出轮播图
- html5--jq淡入淡出
- 【jQuery】使用JQ来编写面板的淡入淡出效果
- jq写轮播图_淡入淡出
- jq 手风琴(淡入淡出)
- API实现窗口透明、滑动、淡入淡出等动画效果
- VC 窗口特效(淡入淡出、滑动显示等)
- jq简单的淡入淡出图片切换
- 淡入淡出背景轮播 jq实现
- 【jQuery】使用JQ来编写最基本的淡入淡出效果
- jQuery 淡入淡出、滑动和动画
- jQuery效果--显示隐藏/淡入淡出/滑动
- JQuery 动画 滑动卷入 淡入淡出
- jQuery 隐藏、显示、淡入淡出、滑动
- JQuey淡入淡出,滑动方法-6.7
- 自己写的淡入淡出轮播图基本实现(jq)
- jq鼠标移入移出元素呈现淡入淡出效果总结
- Java并发编程:Lock
- Populating Next Right Pointers in Each Node II
- core dump调试
- 拷贝标准的选择屏幕修改为自定义的样式
- 怎么实现一个定时器?
- jq 淡入淡出 滑动 焦点等实际使用
- Http长连接、短连接、持久连接这三个概念的分析总结
- 使用SpringBoot快速构建应用程序
- Mac使用zsh导致maven命令无效的解决方案
- 【Java】内部类与外部类的互访使用小结
- php-代码优化准则
- 如何在项目启动的时候做一些业务处理 (实现ServletContextListener)
- HTML5 - 用<figure/>添加插图和图题
- 关于IE中image的onload事件失效解决问题