前端开发过程中需要不断学习,不断温习。最近计划白天继续温习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
转载自 天外飞仙 http://www.jqueryba.com/698.html
白天活干完,弄个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
转载自 天外飞仙 http://www.jqueryba.com/698.html
发表评论
-
初识javascript美术馆
2012-11-24 12:55 633不断学习,对前端开发来说很是重要,况且咱还是菜鸟更需要好好学习 ... -
jQuery如何性能优化
2012-11-20 09:18 646现在jquery应用的越来越多,上手快,可以满足一般的前端开发 ... -
100个超炫的HTML 5示例(四)
2012-11-12 09:04 685习惯性的早起,星期天睡不着啊,估计这个是前端开发的职业病,落下 ... -
WP-Syntax 代码高亮插件使用方法
2012-11-07 13:43 1022jquery博客之前代码插件好好的,最近把WP Code Hi ... -
css样式表中字体乱码
2012-11-02 22:07 736有时候,我们的css样式表中字体乱码,很诧异。百度谷歌是两个老 ... -
网页中如何插入FLASH(swf文件)的html代码
2012-10-26 09:44 827记得jquery博客从学校出来,走上这条前端开发这不归路,就没 ... -
100个超炫的HTML 5示例(三)
2012-10-25 09:42 698jquery博客继续折腾shopex纠结了,老是出现无法安装, ... -
jquery简单attr用法
2012-10-24 11:39 770之前看JavaScript DOM编程艺术清晰中文版中getA ... -
discuz x2.5用户注册后邮箱认证后无法收到邮件或者直接进垃圾箱
2012-10-23 09:07 893又是一个周末,jquery特效继续折腾我那discuz论坛,我 ... -
100个超炫的HTML 5示例(二)
2012-10-22 23:42 641战斗月,7月即将结束,回首望去,jquery特效不知不觉加班了 ... -
浅谈getElementByID getElementsByTagName getAttribute
2012-10-17 14:01 830今天晚上是jquery博客连续加班的最后一个晚上了,明天开始终 ... -
wordpress 子页面添加关键词和描述,增强SEO优化
2012-10-12 22:11 577jquery特效对seo优化了解的不多,只是一些瞎折腾,今天逛 ... -
使用CSS Usage 给你的CSS样式文件减减肥吧
2012-10-11 08:08 682前端开发过程中经常会 ... -
几个实用的.htaccess代码片段
2012-10-10 09:27 686自动为文件添加 utf-8 编码 为了避免编码问题,你可以通过 ... -
javascript中非继承的扩展
2012-10-08 15:26 579jquery特效之前只是用,有些东西没有深入追究。惭愧,好多不 ... -
javascript之调用被覆盖的方法
2012-09-29 08:50 577jquery博客这两天在看原生的javascript,看到一些 ... -
淡淡简单描述javascript中方法apply和call
2012-09-27 13:00 559jquery博客最近在看原生javascript,是那本犀牛书 ... -
css a链接 写法 新手篇
2012-09-25 09:03 623今天jquery博客被问到咋写a链接后的样式 这个是很早很早一 ... -
jquery实现隔行换色效果
2012-09-24 08:09 668隔行换色在显示数据的时候用的比较多。jquery整自己的小站的 ... -
jquery 判断 IE6 浏览器 javascript
2012-09-22 09:46 630jquery博客依然整3D地图,火狐 谷歌 IE 7 8 9搞 ...
相关推荐
一款基于jquery实现的仿凡客诚品网站商品图片放大镜效果源码.zip 一款基于jquery实现的仿凡客诚品网站商品图片放大镜效果源码.zip 一款基于jquery实现的仿凡客诚品网站商品图片放大镜效果源码.zip
凡客诚品页面模板.zip
凡客诚品jQuery选项卡切换是一款凡客诚品手机客户端页面的jQuery图片选项卡切换特效。
js练习4:制作凡客诚品帮助中心页面.zip
jquery鼠标悬停遮罩图文切换效果 jquery鼠标悬停遮罩图文切换效果 jquery鼠标悬停遮罩图文切换效果 jquery鼠标悬停遮罩图文切换效果
一款图片放大效果展示, 鼠标放到指定图片上时放大图片, 像淘宝的商品展示页面一样, 鼠标放上去, 可放大图片
凡客诚品jQuery选项卡切换是一款凡客诚品手机客户端页面的jQuery图片选项卡切换特效。
jQuery 仿迅雷图片轮播切换效果,跟flash比起来,省事多了 ^_^
jQuery仿qq浏览器动画切换导航效果 jQuery仿qq浏览器动画切换导航效果 jQuery仿qq浏览器动画切换导航效果 jQuery仿qq浏览器动画切换导航效果
jquery简约式图文banner切换效果代码是一款时下很流行的banner切换效果实现代码。 jquery简约式图文banner切换效果代码效果图一: 点击查看演示 jquery简约式图文banner切换效果代码效果图二: ...
jquery 图片放大镜 由于路径取决去js设置,图片路径要求必须建立三个文件目录为“small”、“mid”、“big”分别放“小图”、“中图”、“大图”。 解决 ie6 select框 问题。
jquery新浪微博图文混排切换效果
6款_jquery鼠标悬停图文切换效果_鼠标悬停图文切换代码 6款_jquery鼠标悬停图文切换效果_鼠标悬停图文切换代码 6款_jquery鼠标悬停图文切换效果_鼠标悬停图文切换代码
Query图文结合滚动切换效果,这款jQuery图文切换插件比较普通,但是一款很实用的jQuery焦点图。
jQuery仿腾讯视频图片滑动门切换效果
jQuery+css实现tab切换效果 jQuery+css实现tab切换效果源代码
jQuery--仿迅雷图片轮播切换效果jQuery--仿迅雷图片轮播切换效果jQuery--仿迅雷图片轮播切换效果jQuery--仿迅雷图片轮播切换效果