使用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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 Javascript
JS的参数传递示例介绍
Feb 08 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
浅谈JavaScript字符串与数组
Jun 03 Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 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
在普通HTTP上安全地传输密码
2007/07/21 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
php 伪造HTTP_REFERER页面URL来源的三种方法
2016/09/22 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python支持断点续传的多线程下载示例
2014/01/16 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
Nordgreen手表德国官方网站:丹麦极简主义手表
2019/10/31 全球购物
最新大学生创业计划书写作攻略
2014/04/02 职场文书
竞赛口号大全
2014/06/16 职场文书
事业单位考察材料范文
2014/12/25 职场文书
严以律己学习心得体会
2016/01/13 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
SQL语句多表联合查询的方法示例
2022/04/18 MySQL