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 相关文章推荐
window.js 主要包含了页面的一些操作
Dec 23 Javascript
jQuery参数列表集合
Apr 06 Javascript
JS连连看源码完美注释版(推荐)
Dec 09 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
javascript中的正则表达式使用详解
Aug 30 Javascript
JavaScrip常见的一些算法总结
Dec 28 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
JS实现简易图片自动轮播
Oct 16 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算开始时间到过期时间的相隔的天数
2011/01/12 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
PHP快速推送微信模板消息
2017/04/14 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
javaScript产生随机数的用法小结
2018/04/21 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
[00:16]热血竞技场
2019/03/06 DOTA
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Python 打印中文字符的三种方法
2018/08/14 Python
Python可变参数会自动填充前面的默认同名参数实例
2019/11/18 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
python程序如何进行保存
2020/07/03 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
幼儿园老师辞职信
2014/01/20 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
幼儿园运动会口号
2014/06/07 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
军事博物馆观后感
2015/06/05 职场文书
新闻报道稿范文
2015/07/23 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书