JQuery学习(2)

页面导航:首页 > 网络编程 > JavaScript > JQuery学习(2)

JQuery学习(2)

来源: 作者: 时间:2016-02-19 09:19 【

实现图片列表的自动滚动,单击左右导航的图片移动,以及单击图片放大的功能: 很多代码细节跟HTML、CSS相关,But$(document) ready(function() { * * this function w


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

很多代码细节跟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 = '';
        /* 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('
'); /* set the height of the image to the height of the body -200 pixels to allow for margin */ var bodyHeight = $('body').height(); //设置单个属性 $('#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('
'); // 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; }); });


Tags:

相关文章

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<