位置: 编程技术 - 正文
基于jQuery实现中英文切换导航条效果(jquery可以实现哪些效果)
编辑：rootadmin推荐整理分享基于jQuery实现中英文切换导航条效果(jquery可以实现哪些效果)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:使用jquery实现的项目,使用jquery,基于jquery的框架有哪些,使用jquery实现的项目,jquery可以实现哪些效果,jquery的实现原理,使用jquery,使用jquery实现的项目,内容如对您有帮助，希望把文章链接给更多的朋友！
先来看一下中英文切换的导航条效果图：
我采用了两种方式实现，一种用css3,另一种是用jquery实现。
首先说一下用css3如何实现：
html：
css:
红色部分就是这个过程的实现，利用位置的变化，当鼠标移上去的时候，显示中文，也就是将英文移开，值得注意的是，需要利用overflow:hidden属性，将其隐藏。如果想要速度慢一点的话，可以利用transition属性设置变化时间，就可以减慢变化速度。
接着是用jquery实现：
css：
jquery:
实现功能的重点是animate()函数的实现，通过设置margin-top和时间实现，为了防止快速经过时，所有的都会变化（如下图所示），需要在animate()函数前面加上stop()函数，即在所有动画之前，先停止其他的动画，然后再开始这个动画。
标签: jquery可以实现哪些效果
本文链接地址:https://www.jiuchutong.com/biancheng/382009.html 转载请保留说明！上一篇：jQuery EasyUI常用数据验证汇总(js easyui)
下一篇：Query常用DIV操作获取和设置长度宽度的实现方法(div.remove)
