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


Posted in Javascript onJanuary 20, 2013

前端开发过程中需要不断学习,不断温习。最近计划白天继续温习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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<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
Javascript 相关文章推荐
js的闭包的一个示例说明
Nov 18 Javascript
js获取图片长和宽度的代码
Nov 24 Javascript
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
JS中递归函数
Jun 17 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
Nov 03 Javascript
js 概率计算(简单版)
Sep 12 Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
Vue框架下引入ActiveX控件的问题解决
Mar 25 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
详细分析vue表单数据的绑定
Jul 20 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 #Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 #Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 #Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 #Javascript
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
Jan 18 #Javascript
js replace正则表达式应用案例讲解
Jan 17 #Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 #Javascript
You might like
2021年最新CPU天梯图
2021/03/04 数码科技
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
JavaScript中把数字转换为字符串的程序代码
2013/06/19 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
2018/02/24 jQuery
浅析js中mvvm模式实现的原理
2018/10/06 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
Antd下拉选择,自动匹配功能的实现
2020/10/24 Javascript
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
Python UnicodeEncodeError: 'gbk' codec can't encode character 解决方法
2015/04/24 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
python日志模块logbook使用方法
2019/09/19 Python
Python autoescape标签用法解析
2020/01/17 Python
HTML5中新标签和常用标签详解
2014/03/07 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
2020/07/16 HTML / CSS
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
开放系统互连参考模型
2016/06/29 面试题
个人委托书范本
2014/04/02 职场文书
法学自荐信
2014/06/20 职场文书