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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/494856.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

蜜糖变砒霜:90%美国公司区块链项目将不再重启

来源&#xff1a;雷锋网摘要&#xff1a;市场对区块链的“迷恋”来得轰轰烈烈&#xff0c;退得悄无声息。一方面是科技巨头占山为王&#xff0c;另一方面不少此前号称投入研发区块链的公司已经把目光收回&#xff0c;并且表示再也不会重启这些试点项目。有人觉得区块链就此沉寂…

【埋点】是什么埋点?简述埋点的操作流程

埋点&#xff1a;又称为事件追踪&#xff08;Event Tracking&#xff09;&#xff0c;指的是针对特定用户行为或事件进行捕获&#xff0c;处理和发送的相关技术及其实施过程。 功能方面&#xff1a;埋点是用来收集用户行为数据。比如想要了解一个用户在APP里面点击了哪些按钮&…

【转】如何让ucgui支持24位色(24bpp)

将UC/GUI 3.32a 更改为可以支持24bpp色彩模式 我打算在UC/OS-II上直接移植一个开源的GUI界面。所以我从网上找了一些GUI的开源代码&#xff0c;主要看了看飞漫软件的MiniGUI和Micrium公司的uC/GUI。 飞漫软件的MiniGUI可免费下载的版本是1.3.3&#xff0c;可是不支持UC/OS-II&a…

NASA指定首批9名宇航员,参与波音和马斯克商业载人航天

来源&#xff1a;澎湃新闻人类太空探索史即将翻开商业载人航天的新一页。美国当地时间8月3日&#xff0c;美国国家航空航天局&#xff08;NASA&#xff09;公布了9名将搭乘波音公司的CST-100 Starliner载人航天器和SpaceX载人龙飞船往返国际空间站的宇航员。其中3名宇航员参与S…

二叉树——基本概念

二叉树的概念 树是一种非线性的数据结构&#xff0c;他有n(n>0)个有限的结点组成的一个有层次关系的集合。之所以叫树&#xff0c;是因为这种数据结构看起来像是一个倒挂的树&#xff0c;根朝上&#xff0c;叶子朝下。特点就是每个结点有0个或多个结点&#xff0c;没有父结点…

设计模式第三集——装饰者模式(Decorator)

再次强调设计的重要原则&#xff1a;对扩展开放&#xff0c;对修改关闭。在设计中要尽量避免对之前源代码的修改。 为适应扩展的特性&#xff0c;除了继承之外&#xff0c;还可以用装饰者模式&#xff1a;动态的将新的功能附加到对象上。换句话说&#xff0c;装饰者模式就是有一…

AI开放只是幌子?科技巨头边承诺开放边申请专利

选自 I Wired编译 I 网易智能参与 I 木秀林据《连线》报道&#xff0c;上周在旧金山举行的谷歌云计算会议上&#xff0c;该公司CEO桑德尔皮查伊提到公司致力于人工智能&#xff08;AI&#xff09;的开放。他表示&#xff1a;“我们创立开放的平台&#xff0c;分享我们的技术&am…

两种列式存储格式:Parquet和ORC

背景 随着大数据时代的到来&#xff0c;越来越多的数据流向了Hadoop生态圈&#xff0c;同时对于能够快速的从TB甚至PB级别的数据中获取有价值的数据对于一个产品和公司来说更加重要&#xff0c;在Hadoop生态圈的快速发展过程中&#xff0c;涌现了一批开源的数据分析引擎&#…

数据链路层(学习笔记)

首先要明确“数据链路”和“链路”这两个概念&#xff1a; 链路&#xff1a;从一个节点到相邻节点的一段物理现路&#xff0c;其中间没有任何的交换节点&#xff0c;所以可以说链路只是一条路径的组成部分。   数据链路&#xff1a;当需要在一条线路上传送数据的时候&#xf…

免otp动态密码登录堡垒机

环境准备 安装brew 参考文档&#xff1a;https://brew.sh/index_zh-cn.html 安装oath-toolkit 和expect brew install oath-toolkit brew install expect 正式开始 生成MFA_KEY对应的6位otp密码&#xff1a;oathtool -b --totp [MFA_KEY] MFA_KEY就是你绑定APP时&#x…

英特尔10纳米处理器再度跳票,或收缩芯片代工业务

来源&#xff1a;腾讯科技摘要&#xff1a;在全球半导体行业&#xff0c;线宽&#xff08;N纳米&#xff09;是制造厂商进行激烈竞争的指标。在全球半导体行业&#xff0c;线宽&#xff08;N纳米&#xff09;是制造厂商进行激烈竞争的指标。据报道&#xff0c;英特尔将延期到20…

简单GDB调试

GDB下载 使用yum工具直接下载 生成可用gdb调试的可执行程序 -g 会保留源文件中的函数名和变量名 启动gdb gdb 可执行程序名 set args xxx xxx 给程序传参查看程序中的源代码 当前文件 l(list) l 行号 l 函数名 非当前文件 l 文件名&#xff1a;行号 l 文件名&#xf…

人工智能应用需要高可信性(180806)

来源&#xff1a;科学网摘要&#xff1a;近日&#xff0c;“Rekognition”却闹了一个大乌龙&#xff1a;28名美国国会议员被它识别成了罪犯。小编搞了大半辈子测试和容错&#xff0c;对这方面消息比较敏感。最近看到新闻&#xff0c;商业巨头亚马逊2016年推出图像识别AI系统“R…

暑假集训中期测试 Problem D: 装箱问题2 (并查集)

Description 有很多个棱长为1的正方体货物整齐地堆在一堆。不过有一些是悬空的&#xff0c; 大概是粘上去的吧。。。 给出这些货物的相邻关系&#xff0c;求最小的长方体&#xff08;或正方体&#xff09;能装下这些货物的集装箱的体积&#xff0c;&#xff08;集装箱棱长方向与…

s3cmd安装及使用

一、安装 1.下载安装包。 这里我们使用s3cmd-1.0.0.tar.gz安装包 2.解压安装包 tar xzvf s3cmd-1.0.0.tar.gz 3.移动路径 mv s3cmd-1.0.0 /usr/local/s3cmd 4.创建软链接 ln -s /usr/local/s3cmd/s3cmd /usr/bin/s3cmd 5.执行配置命令(按提示输入相应密码等) s3cmd -…

二叉树——堆

二叉树顺序存储结构 理解堆之前先理解一下二叉树的顺序存储结构。普通的二叉树并不适合顺序存储&#xff0c;因为可能会造成大量的空间浪费。只有完全二叉树适合顺序结构存储。显示中我们通常把堆使用顺序结构的数组来存储&#xff0c;需要注意的是这里的堆和操作系统中虚拟进程…

open AI 在DOTA 5v5 比赛中战胜职业选手

来源&#xff1a;AI科技大本营摘要&#xff1a;去年&#xff0c;OpenAI 在 DOTA 的 1v1 比赛中战胜了职业玩家 Dendi&#xff0c;而在距离进阶版 OpenAI Five 系统战胜人类业余玩家不过一个月的时间&#xff0c;今天凌晨&#xff0c;它又以 2:1 的战绩再次完成对人类高级玩家的…

如何体现机器智能和群体智能的关系,2018新版互联网大脑模型绘制

作者&#xff1a;刘锋 计算机博士 互联网进化论作者2018年新的这一版&#xff0c;也是互联网大脑模型图的第五个版本&#xff0c;距离第一版的发布已经有10年时间&#xff08;2008年&#xff09;&#xff0c;距离上一版第四版也有1年时间&#xff0c;在这一版中主要解决了如何…

全球互联正在创造一个知识极大丰富和隐私终结的时代

来源&#xff1a;资本实验室摘要&#xff1a;据预测&#xff0c;到2020年&#xff0c;全球物联网连接设备将超过500亿个&#xff0c;会产生600泽字节的信息。这么庞大的数据量&#xff0c;将如何影响并改变我们的生活和工作&#xff1f;聚焦前沿科技创新与传统产业升级据预测&a…