使用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自动缩小超出大小的图片
Oct 12 Javascript
手机端页面rem宽度自适应脚本
May 20 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
Aug 22 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
JS严格模式知识点总结
Feb 27 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
关于AngularJS中几种Providers的区别总结
May 17 Javascript
Openlayers绘制聚合标注
Sep 28 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 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中使用灵巧的体系结构
2006/10/09 PHP
Ajax PHP简单入门教程代码
2008/04/25 PHP
php模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
Open and Print a Word Document
2007/06/15 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
jQuery淡入淡出元素让其效果更为生动
2014/09/01 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
基于jquery实现简单的分页控件
2016/03/17 Javascript
微信小程序 scroll-view组件实现列表页实例代码
2016/12/14 Javascript
解决vue 按钮多次点击重复提交数据问题
2018/05/10 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
微信小程序获取用户信息的两种方法wx.getUserInfo与open-data实例分析
2019/05/03 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[01:34]DOTA2 7.22版本新增神杖效果一览(敏捷英雄篇)
2019/05/28 DOTA
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
应届毕业生就业自荐信
2013/10/26 职场文书
毕业大学生自荐信
2014/06/17 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
安全主题班会教案
2015/08/12 职场文书
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
Java 异步任务计算FutureTask
2022/04/28 Java/Android