JQuery学习(2)

实现图片列表的自动滚动,单击左右导航的图片移动,以及单击图片放大的功能:

很多代码细节跟HTML、CSS相关,But······

$(document).ready(function() {
	/*
	 * this function will make the carousel scroll auto-matically.
	 * it is no different than the scrollRight click function
	 * aside from missing a binding to a click function.
	 */
	function autoCarousel() {
		//outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距),li的宽度设置的160px,itemWidth返回170px;
    	var itemWidth = $('#carouselUL li').outerWidth() + 10;
		//left设置的-340px; 返回的moveFactor为-510px;
        var moveFactor = parseInt($('#carouselUL').css('left')) - itemWidth;
        /* animate the carousel */
		/*
		$(selector).animate({params},speed,callback); -必需的 params 参数定义形成动画的 CSS 属性,可选的 speed 参数规定效果的时长;
		*/
        $('#carouselUL').animate(
            {'left' : moveFactor}, 'slow', 'linear', function(){
                /* put the first item after the last item */
				//:first,:last 是JQuery的选择器;
				//将第一个li放到最后一个li的后边;
                $("#carouselUL li:last").after($("#carouselUL li:first"));
                /* reset left position */
                $('#carouselUL').css({'left' : '-340px'});
        });
    };
    /* make the carousel scroll automatically when the page loads */
    var moveCarousel = setInterval(autoCarousel, 2000);
	/* set original thumbnail opacity */
    $('.carThumb, #scrollLeft, #scrollRight').css({opacity: 0.5});
    /* set up a hover function to animate the opacity and stop the auto-scroll*/
	//hover(定义了两个函数,用","号分隔),而且用的不是mouse相关函数
    $('.carThumb, #scrollLeft, #scrollRight').hover(function() {
		//stop(stopAll,goToEnd) 方法用于停止动画或效果,在它们完成之前
        $(this).stop().animate({
            opacity: 1
        }, 75); // end mousein
        clearInterval(moveCarousel); //pause the auto-scroll on mouse over
    }, function() {
        $(this).stop().animate({
            opacity: 0.5
        }, 250); // end mouseout
        moveCarousel = setInterval(autoCarousel, 2000); // resume scroll on mouse out
    });

    /* click funtion for right scroll */
    $('#scrollRight').click(function(){
        /* calculate how far to move the carousel */
        var itemWidth = $('#carouselUL li').outerWidth() + 10;
        var moveFactor = parseInt($('#carouselUL').css('left')) - itemWidth;
        /* animate the carousel */
        $('#carouselUL').animate(
            {'left' : moveFactor}, 'slow', 'linear', function(){
                /* put the first item after the last item */
                $("#carouselUL li:last").after($("#carouselUL li:first"));
                /* reset left position */
                $('#carouselUL').css({'left' : '-340px'});
        });
    });

    /* click for left scroll */
    $('#scrollLeft').click(function(){
        /* calculate movement to the left */
    	var itemWidth = $('#carouselUL li').outerWidth() + 10;
        var moveFactor = parseInt($('#carouselUL').css('left')) + itemWidth;
        /* animate the carousel */
        $('#carouselUL').animate(
            {'left' : moveFactor}, 'slow', 'linear', function(){
                /* put the last item before the first */
				/*
				before,after,在被选元素之前、之后插入内容;这里相当于修改了DOM结构;
				*/
                $("#carouselUL li:first").before($("#carouselUL li:last"));
                /* reset the left position */
                $('#carouselUL').css({'left' : '-340px'});
            });
        });

    /* click function to load larger pictures */
    $('.carThumb').click( function() {
        /* get the source from our image tag */
        var photoInfo = $(this).attr("src");
        /* split the source by the '/' */
        var photoPathArr = photoInfo.split('/');
        /* the path is the first portion of the array plus a forward slash */
        var photoPath = photoPathArr[0]+'/';
        /* get an array with the photo name in it */
        var photoInfoArr = photoInfo.split('_');
        /* now put it back together for using in the photo container */
        var photoImgTag = '<img src="'+photoPath+photoInfoArr[1]+'" id="currentPhoto" />';
        /* get the name of the modal window */
        var modalID = $(this).attr('rel');
        /* add the tag to the modal window */
		//html() - 设置或返回所选元素的内容(包括 HTML 标记)
        $('#' + modalID).html(photoImgTag);
        /* fade in the modal window and add a close button to it */
		//fadeIn的对象一般都有这个属性-display:none
        $('#' + modalID).fadeIn().delay(1000).append('<div class="photoNote"><a href="#" class="closePhoto"><img src="grfx/photoClose.jpg" class="closeX" title="Close Photo" alt="Close" /></a></div>');
        /* set the height of the image to the height of the body -200 pixels to allow for margin */
        var bodyHeight = $('body').height();
		//设置单个CSS属性
        $('#currentPhoto').css('height', (bodyHeight - 200));
        /*
         * define the margins so that the modal is centered properly on the screen
         * we add 40px to the height/width to accomodate for the padding and border
         * width defined by the image
         */
        var modalMarginTop = ($('#' + modalID).height() + 40) / 2;
        var modalMarginLeft = ($('#' + modalID).width() + 40) / 2;
        /* apply the margins to the modal window */
        $('#' + modalID).css({
            'margin-top' : -modalMarginTop,
            'margin-left' : -modalMarginLeft
        });
        /* fade in the shade */
        $('body').append('<div id="carouselShade"></div>'); // add the shade layer to bottom of the body
        $('#carouselShade').css('opacity', 0.7).fadeIn(); // set the opacity with jQuery to avoid all of the nasty CSS needed for IE
        return false; // keep the link from acting naturally
    });

    /*
     * close the modal and pull down the shade
     */
    $('a.closePhoto, #carouselShade').live('click', function() { // clicking on the close or shade layer
    	var thisModalID = $('a.closePhoto').parent().parent().attr('id');

        $('.photoNote, #carouselShade, #'+thisModalID).fadeOut(function() {
			//总结:#id,.class,对象间使用","分隔,也可以是一种层次路径
            $('.photoNote, a.closePhoto, #carouselShade, #currentPhoto').remove();  // remove the shade and the close button
        });
        return false;
    });
});
时间: 2024-10-29 10:46:59

JQuery学习(2)的相关文章

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

jquery学习(一)

简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type="text/javascript"></script> 首先一定要注意的是引入的路径 按照案例写一个简单的DEMO <%@ page language="java" contentType="text/html; charset=UT

Js脚本之jQuery学习笔记(1)

Js脚本之jQuery学习笔记(1) 一.javascript基础 单行注释 多行注释 /* */ 数据类型 数值型 字符串型 布尔型 空值 未定义值 转义字符 函数定义:1234567891011121314<head><script language="javascript"function test(m){var xixi="嘻嘻"alert("这是javascript")document.write(xixi + m)}

jQuery学习总结(一)

jQuery学习完了,但是感觉知识点很杂,想JavaScript一样,所以还是总结一下比较好. 1.DOCTYPE 在每次的html页面前都会有这样一句话,那么它有什么作用呢? DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档.也就是告知浏览器的渲染显示方式. 2.新的方法--专属jQuery (1)$()方法: 可以通过$()方法来获得页面的指定节点,参数是某种CSS的选择器. var userN

jQuery学习-事件之绑定事件(三)

在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event, handlers ) {         var sel, handleObj, matches, i,             handlerQueue = [],             delegateCount = handlers.delegateCount,             cur =

jQuery学习-------jQuery选择器

基本选择器: id选择器:$("#id") 标签选择器:$("tag") 类选择器:$(".classname") 通配选择器:$("*") 组选择器:$("selector1,selector2,...,selectorN") 层次选择器: 包含选择器:$("ancestor descendant") 子选择器:$("parent>child") 相邻选择器:

jQuery学习示例------点击红色方块实现左右晃动

<!DOCTYPE html> <html> <head> <title>test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javas

jQuery学习--------jQuery过滤器

each() 方法规定为每个匹配元素规定运行的函数. 过滤: 下标过滤: eq(index) //获取第index个元素 类过滤: hasClass(class)  //检查当前元素是否含有某个特定的类,如果有,返回true 例如:$("div").hasClass("div1") //含有div1类的div元素 表达式过滤: filter(expr)  //筛选出与指定表达式expr匹配的元素集合,用逗号分隔多个表达式 filter(fn)    //筛选出与指定

jQuery学习笔记--JqGrid相关操作 方法列表(上)

1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(json):$("#gridid").jqGrid('getRowData', id); 3.刷新列表:$(refreshSelector).jqGrid('setGridParam', { url: ''), postData: ''}).trigger('reloadGrid'); 4.选中行:$("#jqGrid

jQuery学习笔记10:Ajax技术

jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个