jQuery实现鼠标经过像翻页和描点链接效果


Posted in Javascript onAugust 08, 2016

在百度地图api首页经常见到当鼠标经过像翻页和描点链接效果,基于jquery和js代码是如何实现的呢?下面小编给大家分享关键代码,一起看下吧!

var timer;
$("li").on("mouseover",function(){
clearTimeout(timer);
timer=null;
$(this).addClass("active");
$(this).siblings().removeClass("active");
var $index=$(this).index();
/*$(".wrapper").animate({top:-$index*300});*/
timer=setTimeout(function(){
$(".wrapper").animate({top:-$index*300});
},300)
});
$('.dd').find($(".cc")).hover(function(){
$(this).find(".c1").stop().animate({width:0},100,function(){
$(this).hide().next().show().animate({width:300},100);
})
},function(){
$(this).find(".c2").animate({width:0},100,function(){
$(this).hide().prev().show().animate({width:300},100);
})
}); 
*{margin:0;padding:0;box-sizing:border-box}
ul{list-style:none;border:1px solid #ccc;border-radius:5px;width:900px;margin:30px auto 10px;}
.clearfix{zoom:1;}
.clearfix:after{content:".";display:block;width:0;height:0;visibility:hidden;clear: both;}
li{float:left;border-right:1px solid #ccc;width:20%;text-align:center;height:30px;line-height:30px;cursor:pointer;}
li:last-child{border:none;}
li.active{background-color:#0099cc;color:#fff;}
.container,.wrapper,.con{height:300px;}
.container{width:900px;margin:0 auto;position:relative;overflow:hidden;}
.wrapper{position:relative;top:0;}
.con{line-height:300px;text-align:center;border:1px solid #ccc;}
.dd{margin: 30px auto;width:1200px;}
.cc{float:left;width:300px;height:200px;overflow:hidden;margin:20px;}
.c1,.c2{width:100%;height:100%;margin:0 auto;text-align:center;line-height:200px;cursor:pointer;overflow:hidden}
.c1{background-color:#c01110;}
.c2{background-color:#0099cc;} 
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--<form action="#">
<select name="" id="sel1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<input type="submit" id="sub" value="提交"/>
</form>-->
<ul class="clearfix">
<li class="active">选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
</ul>
<div class="container">
<div class="wrapper">
<div class="con">
111111
</div>
<div class="con">
222222
</div>
<div class="con">
33333
</div>
<div class="con">
44444
</div>
<div class="con">
55555
</div>
</div>
</div>
<div class="dd clearfix">
<div class="cc">
<div class="c1">111</div>
<div class="c2">222</div>
</div>
<div class="cc">
<div class="c1">111</div>
<div class="c2">222</div>
</div>
<div class="cc">
<div class="c1">111</div>
<div class="c2">222</div>
</div>
<div class="cc">
<div class="c1">111</div>
<div class="c2">222</div>
</div>
<div class="cc">
<div class="c1">111</div>
<div class="c2">222</div>
</div>
<div class="cc">
<div class="c1">111</div>
<div class="c2">222</div>
</div>
</div>
</body>
</html>

下面给大家介绍下锚点链接

1)引入jquery

2)给a标签设置class  smooth

3)

$(".smooth").click(function(){    

 var href = $(this).attr("href");    


 var pos = $(href).offset().top;    


 $("html,body").animate({scrollTop:pos}, 1000);    


 return false;  });

以上所述是小编给大家介绍的jQuery实现鼠标经过像翻页和描点链接效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery中获取元素的几种方式小结
Jul 05 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
Jquery 实现弹出层插件
Jan 28 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
基于jquery实现的仿优酷图片轮播特效代码
Jan 13 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
Nov 25 Javascript
JS控件bootstrap suggest plugin使用方法详解
Mar 25 Javascript
jQuery实现div跟随鼠标移动
Aug 20 jQuery
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 #Javascript
jQuery操作cookie
Aug 08 #Javascript
轮播图组件js代码
Aug 08 #Javascript
JavaScript面试开发常用的知识点总结
Aug 08 #Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 #Javascript
基于BootStrap实现局部刷新分页实例代码
Aug 08 #Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 #Javascript
You might like
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
JavaScript OOP面向对象介绍
2010/12/02 Javascript
javascript去掉前后空格的实例
2013/11/07 Javascript
理解javascript回调函数
2014/12/28 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
JS实现的幻灯片切换显示效果
2016/09/07 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
小程序实现上下切换位置
2020/11/16 Javascript
jQuery实现增删改查
2020/12/22 jQuery
javascript实现固定侧边栏
2021/02/09 Javascript
Python set集合类型操作总结
2014/11/07 Python
Python进程间通信用法实例
2015/06/04 Python
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
opencv python图像梯度实例详解
2020/02/04 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
校园安全检查制度
2014/02/03 职场文书
结对共建工作方案
2014/06/02 职场文书
故意伤害辩护词
2015/05/21 职场文书
消费者投诉书范文
2015/07/02 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
Python实现随机生成迷宫并自动寻路
2021/06/13 Python
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android