使用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 相关文章推荐
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
网页打开自动最大化的js代码
Aug 22 Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
浅谈JavaScript 覆盖原型以及更改原型
Aug 31 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
Sep 05 Javascript
纯javascript版日历控件
Nov 24 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
教你使用vue-cli快速构建的小说阅读器
May 13 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
vue style width a href动态拼接问题的解决
Aug 07 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 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
把PHP安装为Apache DSO
2006/10/09 PHP
如何过滤高亮显示非法字符
2006/10/09 PHP
计数器详细设计
2006/10/09 PHP
php中http_build_query 的一个问题
2012/03/25 PHP
解析二进制流接口应用实例 pack、unpack、ord 函数使用方法
2013/06/18 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
JQuery 绑定事件时传递参数的实现方法
2009/10/13 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
JavaScript知识点整理
2015/12/09 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
Vue兼容ie9的问题全面解决方案
2018/06/19 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
[03:07]【DOTA2亚洲邀请赛】我们,梦开始的地方
2017/03/07 DOTA
python实现爬取百度图片的方法示例
2019/07/06 Python
Python3压缩和解压缩实现代码
2021/03/01 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
Abe’s of Maine:自1979以来销售相机和电子产品
2016/11/21 全球购物
Brookstone美国官网:独特新奇产品
2017/03/04 全球购物
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
美国按摩椅批发网站:Titan Chair
2018/12/27 全球购物
建筑设计师岗位职责
2013/11/18 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
Ruby GDBM操作简介及数据存储原理
2022/04/19 Ruby
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL
Go结合Gin导出Mysql数据到Excel表格
2022/08/05 Golang