wordpress添加背景音乐,南京seo网站优化,赣州网站建设较好的公司,给企业开发网站这个星期最大的感悟是#xff0c;只有在实践中不断的总结#xff0c;才能打下扎实基本功。这是本周主要做的东西#xff1a; 第一个图主要为对jQuery ajax的练习。后面两个计算器和新浪微博页面为之前做好的页面#xff0c;这次用一个load()函数把它们加载进来。不过中间的… 这个星期最大的感悟是只有在实践中不断的总结才能打下扎实基本功。这是本周主要做的东西 第一个图主要为对jQuery ajax的练习。后面两个计算器和新浪微博页面为之前做好的页面这次用一个load()函数把它们加载进来。不过中间的时候出了很多莫名其妙的错误还来发现原来是载入进入的页面的“全局”样式与根页面起了冲突之前的时候特别喜欢对整个页面定义全局字体样式结果不同页面一碰面就打架了。第一部分的话就是用each()方法遍历json里面的数据保存着图片的url,每次都新增一个lia 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 lia 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 classbtnBg/divdiv classbtn;for(var i 0; i len; i) {var j i 1;btn span j /span;}btn /divdiv classpreNext pre/divdiv classpreNext 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
