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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
vue登录路由验证的实现
Dec 13 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 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
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
摘自织梦CMS的HTTP文件下载类
2015/08/08 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
jquery 选择器部分整理
2009/10/28 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
2013/06/26 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
JS+CSS实现大气清新的滑动菜单效果代码
2015/10/22 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
pygame实现俄罗斯方块游戏(对战篇1)
2019/10/29 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
pytorch中图像的数据格式实例
2020/02/11 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
开放系统互连参考模型
2016/06/29 面试题
幼儿园消防安全制度
2014/01/26 职场文书
全民健身日活动方案
2014/01/29 职场文书
《老山界》教学反思
2014/04/08 职场文书
应届生自荐书
2014/06/23 职场文书
评先进个人材料
2014/12/29 职场文书
会计工作检讨书
2015/02/19 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
Python中文纠错的简单实现
2021/07/07 Python
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python