使用jquery实现图文切换效果另加特效

2019-08-03 13:54栏目:WRB前端

前端开垦进度中要求持续学习,不断温习。近日安插白天后续温习jquery,上午求学下原生javascript,然后利用一些小时做做网站推广SEO来着。陈设暂且这么些。
白天活干完,弄个jquery仿凡客诚品图片切换的法力

开始写的不是很好,今日重新做个 jquery特效,其实非常粗大略,漠然回首也就那回事。
先来个原型吧,锋利的jquery第一个例证,相信大家都很熟谙。没有错,你相对没看错。
代码如下

复制代码 代码如下:

<div class="menu">
<div class="has_children">
<span>第一张</span>
<a href="">11111111</a>
<a href="">11111111</a>
<a href="">11111111</a>
<a href="">11111111</a>
<a href="">11111111</a>
<a href="">11111111</a>
</div>
<div class="has_children">
<span>第二张</span>
<a href="">22222222</a>
<a href="">22222222</a>
<a href="">22222222</a>
<a href="">22222222</a>
<a href="">22222222</a>
<a href="">22222222</a>
</div>
<div class="has_children">
<span>第三张</span>
<a href="">33333333</a>
<a href="">33333333</a>
<a href="">33333333</a>
<a href="">33333333</a>
<a href="">33333333</a>
<a href="">33333333</a>
</div>
<div class="has_children">
<span>第四张</span>
<a href="">44444444</a>
<a href="">44444444</a>
<a href="">44444444</a>
<a href="">44444444</a>
<a href="">44444444</a>
<a href="">44444444</a>
</div>
</div>
<script type="text/javascript" src=";
<script type="text/javascript">
$(document).ready(function(){
// $(".has_children").click(function(){
// $(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();//点击后效果
// })
$(".has_children").mouseover(function(){
$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();//鼠标移动过去效果与利益
})
})
</script>

原书是点击后的成效,小编又加了个鼠标移动上去。
今昔方便的改变下css和js就可以了。
在线效果原型DEMO 在线效果图像和文字切换DEMO

你只怕感兴趣的稿子:

  • JQuery 动画卷页 再次来到最上部动画特效(包容Chrome)
  • 听别人讲jQuery的弹出隐敝层的窗口特效
  • 分享精心采纳的23款美不胜收的jQuery 图片特效插件
  • 依照jQuery达成下拉减少(张开与折叠)特效
  • jquery突显和隐敝div特效实例
  • jquery达成图片左右间距滚动特效(可自动播放)
  • jquery之超轻松的div展现和隐形特效demo(分享)
  • jQuery大旨图切换特效插件封装实例
  • 点击弹出层外区域关闭弹出层jquery特效示例
  • jquery购物车实时付钱特效完毕思路
  • jquery定期滑出可最小化的最底层提示层特效代码
  • JQuery插件iScroll实现下拉刷新,滚动翻页特效
  • 一款由jquery实现的整屏切换特效
  • 引入9款绚烂的凭借jquery的页面特效
  • web前端设计师们常用的jQuery特效插件汇总
  • jQuery easyui中的combobox完成下拉框特效
  • jQuery完毕美好的连串下拉菜单特效
  • jQuery jRange达成滑动接纳数值范围特效
  • 依赖Jquery达成万圣节欢欣特效

版权声明:本文由威尼斯人app发布于WRB前端,转载请注明出处:使用jquery实现图文切换效果另加特效