Demo entry 6609019

js

   

Submitted by guo on Jun 05, 2017 at 15:25
Language: JavaScript. Code size: 999 Bytes.

$(function(){
	//当窗口滚动的时候,并且第2个div滚动到窗口中间位置时
	//给ul加上cur类,让其出现
	var window_h = $(window).height();
	var which;


	$(window).scroll(function(){

		//当窗口滚动的时候,侧边栏就出现
		if($('div').eq(1).offset().top <= $(window).scrollTop()){
			$('ul').addClass('cur');
		}else{
			$('ul').removeClass('cur');
		}


		//当窗口滚动的时候,给对应的li加上hover类名
		//关于li文字切换的效果也是通过落空类来实现
		//滚动的div和li是通过which发生联系的
		
		for(var i=0;i<=10;i++){

			if( $('div').eq(i).offset().top <= $(window).scrollTop() ){
				$('ul>li').eq(i-1).addClass('hover').siblings().removeClass('hover');
				//让上面的这个li的文字变为对应数组的内容
				$('ul>li').eq(i-1).html(txtList1[i-1]);
			};
		};



	});


	//当鼠标移上ul的时候,让对应的楼层出现对应的文字和颜色
	//加上hover类,其它的都不加
	$('ul>li').on('mouseenter',function(){
		$(this).addClass('hover').siblings().removeClass('hover');
	});

	//当鼠标点击ul的时候,让对应的楼层出现对应的文字和颜色
	//加上hover类,其它的都不加
	$('ul>li').on('click',function(){
		$(this).addClass('click').siblings().removeClass('click');
	});


})

This snippet took 0.01 seconds to highlight.

Back to the Entry List or Home.

Delete this entry (admin only).