javascript代码实例教程-1.jquery小案例的完成版分析 2.jQuery仿微博项目

发布时间:2019-05-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-1.jquery小案例的完成版分析 2.jQuery仿微博项目脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

 

1.jquery小案例的完成版分析

·jQuery小案例分析

·nav.js

获取navigation 下 ul 下 li 加载hover()事件,鼠标移入函数为当前对象的所有ul子元素,停止所有正在该元素上正在运行的动画,之后加载slideDown事件;鼠标移出函数内容为 获取当前对象的所有ul子元素,停止所有正在该元素上正在运行的动画,之后加载slideUp事件。

·slide.js

获取id为p1的元素,加载toggle事件,第一次单击函数为获取当前元素的上一个兄弟元素,执行slideUp事件,在slideUp时间内,改变img的src属性,使其变作相反的图片;第二次单击函数内容为获取当前对象的前一个兄弟元素,添加slideDown事件,回调函数为获取#p1下的img标签元素改变其src属性为相反图片地址。

·scroll.js

创建interId 获取类别为scrollNews的元素对象,给其添加hover事件,第一个鼠标移入函数内容为clearInterval(interId)清空,时间间距函数;第二个鼠标移出函数内容为开启并设置setInterval(function(){scrollNews(¥this)})时间间距函数控制其在一定时间内重复执行scrollNews函数;

scrollNews函数接收参数obj,获取¥ul为obj下所有的ul子元素,定义lineHeight为¥ul下第一个li子元素的高度,让¥ul停止所有正在进行的动画,并且加载一个动画annimate设置参数是让其marginTop的值减去lineHeight,,回调函数为 ¥ul寻找第一个li元素,改变其marginTop为0,并追加到¥ul的尾部。

·tree.js

结合css样式获取m-expanded span 元素集合,加载单击事件,函数内容为获取当前元素的ul兄弟元素的父元素,加载toggleClass(“m-collapased”);

·adjj.js

给p的ad类加载hover事件,鼠标移入函数为clearInterval(interId),鼠标移出事件函数为 执行showPic(index)设定index初始值为0,并且执行后 index++,并且判断当index==总共图片张数的时候 给index赋值为0,最后给本元素加载一个trigger事件执行。

定义showPic(index)函数 , 获取所在ul,停止动画并且执行动画,动画参数为top:-$(".ad").height()*index+"px",500;在获取 图片所在li 判断eq(index)的时候addClass(“on”),siblings()。removeClass(“on”)mouseleave函数。

·imgSlide.js

给goLeft和goRight类分别加载click事件,第一个时间函数为 判断当当前页==总页数的时候,设定当前页初始值为1,求出 总条数的值为总图片的长度,设定每页条数为4,求出总页数为 Math.ceil(total/pagesize),获取宽度为p涂层和宽度;设定当前图层停止动画 并且让气质型 left:0的动画,设定初始值为1;否则让left-=width,page++;

goRight类的点击函数为,判断当前页为1时让当前图层停止动画,执行left为“-=”+pages-1乘以width的动画;其他情况left “+=”+width ;page--;

·自定义jQuery对象的扩展方法

$.fn.extend({

check:function(){

$(":checkbox").each(function(){

$(this).attr({"checked":"true"});

})

}

})

在文件中直接调用check方法即可!

 2.jQuery仿微博项目

微博系统的流程分析

mvc框架

控制台

分页显示帮助器

显示台

用户注册:每当一个用户注册成功时,php控制台会自动生成本用户的n张个人信息数据表,例如好友列表、个人收藏表、个人私信表等等

发布内容:用户点击内容发布后,会自动将数据放入 存储发布内容各种信息的数据表,同时每当一条内容生成时,会根据本条内容生成评论表,用来存储本条发布内容的各种评论,同时每当一条评论生成时,php控制台也会自动给本条评论生成一个回复表,用来存储本条评论的每一条回复信息。

个人私信:a给b发送私信后,在a和b的个人私信表会存入本条私信的id 等信息,同时在本条私信生成的同时,给本条私信生成一个回复表,用来存储本条私信所有的回复信息。

关注:当a点击b的关注图标,也就是a关注b的时候,也就是a成为b的粉丝的时候,这个时候,php控制台会将a的名字放到b的个人好友列表数据表的fans字段,并将b的名字放进a的regard字段;

个人收藏:点击内容的收藏按钮将被点击内容的id 传个人收藏数据表的collectId 从而进行遍历。


 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-1.jquery小案例的完成版分析 2.jQuery仿微博项目全部内容,希望文章能够帮你解决javascript代码实例教程-1.jquery小案例的完成版分析 2.jQuery仿微博项目所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:CSS