jQuery 的各种练习

　　这个星期最大的感悟是，只有在实践中不断的总结，才能打下扎实基本功。这是本周主要做的东西：

　　

　　第一个图主要为对jQuery ajax的练习。后面两个计算器和新浪微博页面为之前做好的页面，这次用一个load()函数把它们加载进来。不过中间的时候出了很多莫名其妙的错误，还来发现原来是载入进入的页面的“全局”样式与根页面起了冲突，之前的时候特别喜欢对整个页面定义全局字体样式，结果不同页面一碰面就打架了。第一部分的话就是用each()方法遍历json里面的数据（保存着图片的url）,每次都新增一个'<li><a href="#"><img src="' + data["src"] + '"\/><\/a><\/li>'节点数加到ul里头，最后由节点个数来决定图片右下方的数字个数，鼠标悬浮或者点击时显示相应图片，或图片定时轮播;

　　一直都是把页面放到IIS建的服务器的网站上的，结果在加载json 数据的时候就纠结了好久都不知道什么原因的问题：直接打开网页就可以加载到图片并进行轮播，但用ip打开网页却不能加载到json数据。后来在师兄的指点下才知道服务器并未对外开放.json数据格式的文件，我的请求被服务器拦截了！！把json数据格式改成txt后就正常了，下面是关键代码：

　　在这个细节还有一个问题就是，调试确定获取了所有的图片，但却只是显示一张，下标数字也只有1. 后来才恍然大悟jQuery是异步执行的，但调用ajax函数时，同时新增节点的函数也开始执行了，同步进行的话新增的节点当然只有一个。于是只好当图片全部都加载好后才把作为回调函数的新增节点的函数调用。下面是对应代码：　

$(document).ready(function() {	
	//载入
	$('.calculator').load('calculator.html');
	$('.sinaweibo').load('sinaweibo.html');
	
	$.ajax({
		type : "GET",
		url : "$img/img.txt",
		dataType : "json",
		error: function(jqXHR, textStatus, errorThrown) {
			alert(errorThrown);
		},
		success : function(data) {			
			$.each(data,function(i, data) {
				var imgSrc = '<li><a href="#"><img src="' + data["src"] + '"\/><\/a><\/li>';
				$('.imgscroll_wrapper #focus ul').append(imgSrc);		
			});
			add();
		}
	});
	function add(){
		//添加数字按钮和按钮后的半透明条&还有上一页、下一页两个按钮
		var sWidth = $("#focus").width();
		var len = $("#focus ul li").length;
		var index = 0;
		var picTimer;
		var btn = "<div class='btnBg'></div><div class='btn'>";
	
		for(var i = 0; i < len; i++) {
			var j = i + 1;
			btn += "<span>" + j + "</span>";
	
		}
		btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>";
	
		$("#focus").append(btn);
	
		$("#focus .btnBg").css("opacity", 0.5);
	
		$("#focus .btn span").css("opacity", 0.4).mouseenter(function() {
			index = $("#focus .btn span").index(this);
	
			showPics(index);
	
		}).eq(0).trigger("mouseenter");
	
		//上一页、下一页按钮透明度处理
	
		$("#focus .preNext").css("opacity", 0.2).hover(function() {
	
			$(this).stop(true, false).animate({
				"opacity" : "0.5"
			}, 300);
	
		}, function() {
	
			$(this).stop(true, false).animate({
				"opacity" : "0.2"
			}, 300);
	
		});
		//上一页按钮
	
		$("#focus .pre").click(function() {
			index -= 1;
	
			if(index == -1) {
				index = len - 1;
			}
	
			showPics(index);
	
		});
		//下一页按钮
	
		$("#focus .next").click(function() {
			index += 1;
	
			if(index == len) {
				index = 0;
			}
	
			showPics(index);
	
		});
	
		$("#focus ul").css("width", sWidth * (len));
	
		//鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
	
		$("#focus").hover(function() {
	
			clearInterval(picTimer);
	
		}, function() {
			picTimer = setInterval(function() {
	
				showPics(index);
				index++;
	
				if(index == len) {
					index = 0;
				}
	
			}, 4000);
		}).trigger("mouseleave");
	
		//显示图片函数，根据接收的index值显示相应的内容
	
		function showPics(index) {
	
			var nowLeft = -index * sWidth;
	
			$("#focus ul").stop(true, false).animate({
				"left" : nowLeft
			}, 300);
	
			//为当前的按钮切换到选中的效果
	
			$("#focus .btn span").stop(true, false).animate({
				"opacity" : "0.4"
			}, 300).eq(index).stop(true, false).animate({
				"opacity" : "1"
			}, 300);
	
		}

	}
	
});

　　至于第二个页面，实现的功能是下拉框选择相应的设备，左边同时切换相应的设备，缩略图同时切换相应的套图。用到的特效都是slideup,slidedown.一开始做的是按比例缩放，第一次做按比例缩放的页面，经验不足有点纠结。其中遇到比较大问题是怎样来实现设备与设备里面的图片在不同屏幕时能相适应，一开始尝试用z-index属性来解决，但是效果不理想，后来终于试到了一种方案：把装设备图和缩略图放大图的盒子的position设为relative,再把2个图的positon设为absolute，然后再调整这两个图的left和top。算的上很好的解决了这个问题。

转载于:https://www.cnblogs.com/daisy7/archive/2012/07/29/2601836.html