JS实现滑动导航效果_javascript技巧

来源:脚本之家  责任编辑:小易  

滑动的效果用jquery animate,或者css3通过加class也可以实现,当然设置好transition还是你再问slider的原理?www.zgxue.com防采集请勿采集本网。

本文实例为大家分享了JS实现滑动导航效果的具体代码,供大家参考,具体内容如下

改改就能实现你所说的效果. 我这些给你写了个类似的代码 但是没有你要求的那种.你看看有没有用吧 DOCTYPE

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } ul { list-style-type: none; height: 42px; position: absolute; } img { vertical-align: middle; } li, a { cursor: pointer; } a { text-decoration: none; color: #000000; display: block; } li { width: 83px; height: 42px; /*background-color: pink;*/ float: left; text-align: center; line-height: 42px; } .box { position: relative; width: 530px; height: 42px; border: 1px solid deepskyblue; margin: 100px auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .box img#cloud { width: 83px; height: 42px; position: absolute; left: 0; top: 0; } .box img#xinhao { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } </style></head><body><div class="box" id="box"> <img id="cloud" src="images/cloud.gif" alt="" /> <ul id="ull"> <li><a href="#">长沙校区</a></li> <li><a href="#">长沙校区</a></li> <li><a href="#">长沙校区</a></li> <li><a href="#">长沙校区</a></li> <li><a href="#">长沙校区</a></li> <li><a href="#">长沙校区</a></li> </ul> <img id="xinhao" src="images/rss.png" alt="" /></div><script src="js/common.js"></script><script src="js/changespead.js"></script><script> //获取每一个li var list=my$('ull').children; console.log(list); //获取到筋斗云图片 var im=my$('cloud'); //获取图片的宽度 var imgWidth=im.offsetWidth; console.log(imgWidth); for(var i=0;i<list.length;i++){ //设置index值用来储存移动的距离 list[i].setAttribute('index',i); //遍历所有li,每个li绑定三个时间指向同一个函数f1 list[i].onmouseover=f1; list[i].onmouseout=f1; list[i].onclick=f1; //实现函数f1 function f1(e){ switch(e.type) { case 'mouseover': //获取当前li的index值 index=this.getAttribute('index'); //调用变速移动函数 movecs(im,imgWidth*index); break; case 'click': index=this.getAttribute('index'); //点击之后固定 im.style.left=imgWidth*index+'px'; //点击了其中一个li之后的操作,移开鼠标之后不会弹回去 this.onmouseout=false; for(var k=0;k<list.length;k++){ list[k].setAttribute('jndex',k); list[k].onmouseover=function(){ jndex=this.getAttribute('jndex'); movecs(im,imgWidth*jndex); }; list[k].onmouseout=function(){ movecs(im,imgWidth*index); }; } break; case 'mouseout': index=0; movecs(im,imgWidth*index); break; } } } /*list[i].onmouseover=function(){ index=this.getAttribute('index'); console.log(index); movecs(im,imgWidth*index); }; list[i].onmouseout=function(){ index=0; // im.style.left='0px'; movecs(im,imgWidth*index); }; list[i].onclick=function(){ index=this.getAttribute('index'); im.style.left=imgWidth*index+'px'; alert(index); };*/</script></body></html>

类似这个效果的网上很多的啦,弄个改改就行了。charset=utf-8\"> JS平滑图片滚动 var sh;var marquees;marqueesWidth=610;var speed=20,preLeft=0,stopscroll=false,flag=true;

最终效果如下:云彩跟随鼠标移动,点击固定

window.scrollBy(x,y) x和y就不需要解释了吧, 此方法会基于当前的位置进行滚动(相对位置) 比如:window.scrollBy(x,500)(假设500是滚动到e5栗子:js->window.location.hash=\"#\".concat(\"junjie\");

不知道你有没有经常扒页面的习惯(js特效),估计给你两分钟就能拔下来,给你十五分钟分析人家的代码;内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • javascript实现滑动导航栏效果
  • js实现移动端导航点击自动滑动效果
  • javascript实现的又一个不错的滑动导航效果
  • vue.js+cube-ui(scroll组件)实现类似头条效果的横向滚动导航条
  • vue使用原生js实现滚动页面跟踪导航高亮的示例代码
  • js实现水平滚动菜单导航
  • js滚动到指定位置导航栏固定顶部
  • javascript实现页面滚动时导航智能定位
  • 如何用js实现鼠标向上滚动时浮动导航
  • js幻灯片可循环播放可平滑旋转带滚动导航(自写)
  • 9个javascript评级/投票插件
  • jquery 切换不同图片示例代码
  • javascript html操作代码
  • js验证日期的格式yyyy-mm-dd 具体实现
  • 微信小程序移动拖拽视图-movable-view实例详解
  • ecmascript6函数默认参数
  • 简单的js时钟实例讲解
  • js异或加解密效果代码
  • js或jquery实现页面打印可局部打印
  • javascript数据结构之二叉树的遍历算法示例
  • 如何用js做出手机触屏滑动的效果,只需左右滑动来取值就可以了
  • java怎么做面板滑动效果
  • js如何实现点击导航栏后相应导航栏实现选中效果的切换
  • html5上下滑动“翻页”实现,是真正的翻页
  • 求个JS代码关于滑动门的。由于数据多导航栏溢出,所以求个左右可以滑动的按钮
  • html 图片左右自动滚动js实现效果
  • js如何控制整个页面滚动条的位置
  • 请问java如何实现js的打印功能
  • java 使用 AjaxUpload.js 实现上传文档的时候需要注意哪些?
  • java(纯java语言,不是js什么的)中如何实现放大镜的效果?
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧javascript实现滑动导航栏效果js实现移动端导航点击自动滑动效果javascript实现的又一个不错的滑动导航效果vue.js+cube-ui(scroll组件)实现类似头条效果的横向滚动导航条vue使用原生js实现滚动页面跟踪导航高亮的示例代码js实现水平滚动菜单导航js滚动到指定位置导航栏固定顶部javascript实现页面滚动时导航智能定位如何用js实现鼠标向上滚动时浮动导航js幻灯片可循环播放可平滑旋转带滚动导航(自写)9个javascript评级/投票插件jquery 切换不同图片示例代码javascript html操作代码js验证日期的格式yyyy-mm-dd 具体实现微信小程序移动拖拽视图-movable-view实例详解ecmascript6函数默认参数简单的js时钟实例讲解js异或加解密效果代码js或jquery实现页面打印可局部打印javascript数据结构之二叉树的遍历算法示例js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js 将json字符串转换为json对象的javascript深入理解js闭包js删除数组里的某个元素方法javascript数组去重由慢到快由繁到简(优化不用mousemove也能滑动啊javascript判断变量是否为空的自定义函数在asp.net中使用javascript脚本的方法js实现数组去重方法总结(六种方法)nulljavascript中创建对象的五种方法实例javascript操作select元素实例分析js 常用校验函数js实现的合并多个数组去重算法示例百度地图api之百度地图退拽标记点获取经纬
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved