blog菜单版

找了很多效果图,发现都是英文,感觉很郁闷。补英语的事还得暂时搁置一下,先把以前做的东西翻出来晒晒吧。

效果图(打开效果页面 ctrl+u 看源程序)

1$(function(){
2    $(".head").click(function(){
3        var num = $(this).next();
4        num.slideToggle("fast").parent().siblings()
5        .find(".body:visible").slideUp("fast");
6    })
7})

 


幻灯片

以前在国内的时候做过公司的网站,那时候还完全不懂jQuery。来日本后在海月爸爸的熏陶下,非常想学习一下。可都因为各种原因没有坚持学,现在海月也大了,有了一些精力可以搞搞自己的事。所以想以写博客的形式来起到一个促进作用,争取这次不要再半途而废。另外想到以后如果有机会再做这方面的工作,也可做为一个依据,也起到事半功倍的作用。

在网上搜了一下发现这个博文 ,于是就偷学这个幻灯片的效果。在它的基础上又自己给改头换面,做了一个类似的效果。 

先看效果图(打开效果页面 ctrl+u 看源程序)

 01function slideSwitch() {
02    var $current = $("#slideshow div.current");
03  
04    // 取得div.current的下一个div,如果不存在则取得第一个div。
05    var $next = $current.next().length ? $current.next() : $("#slideshow div:first");
06   //将最上层div移至第二层。
07    $current.addClass('prev').removeClass("current");
08   //将下一个div移至最上层,并执行淡入动画。
09    $next.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 1000, function() {
10            //删除第二层的类。
11            $current.removeClass("prev");
12        });
13}
14 
15$(function() {
16    $(".current").css("opacity","1.0");
17     
18    // 设定每隔2秒钟调用函数(1000=1秒)
19    setInterval( "slideSwitch()", 2000 );
20});

效果图(打开效果页面

01function slideSwitch(){
02    $("#slideshow div:first").fadeOut("slow",function(){
03            $(this).appendTo("#slideshow").fadeIn("fast");
04    });
05         
06}
07$(function() {
08    $("#slideshow span").css("opacity","1");
09    // 设定每隔2秒钟调用函数(1000=1秒)
10    setInterval( "slideSwitch()", 2000 );
11});