jquery实战训练

发布时间：2017-07-12 作者：admin 分类：默认分类评论(0)

jQuery实战训练，1.5秒返回页面，2.鼠标滑过显示内容，3.轮展图，4.返回顶部，5.右击显示菜单，6.内容编辑，7.购物车结算，8.百度换肤

个人主页：http://www.itit123.cn/ 更多干货等你来拿

1.倒计时，几秒后跳回首页

博客链接：http://blog.csdn.net/qq_19558705/article/details/50364344

2.鼠标划过显示隐藏内容

为了突出效果，页面不多加修饰。可以用在显示隐藏的二级菜单，二维码，等等。脑洞有多大，作用就有多大

第一步：将图片隐藏dispaly:none;

第二步：添加一个show的样式，里面的内容是display:block;

第三步：jquery的内容，找到鼠标划过的标签添加mouseover的函数把需要显示的内容添加addClass(“show”);然后回调函数，mouseout的函数，removeClass(“show”);方法有很多。

3.轮展图切换-插件版

博客链接：http://blog.csdn.net/qq_19558705/article/details/50364564

效果图：

资源下载地址：http://download.csdn.net/detail/qq_19558705/9273389

资源下载地址：http://download.csdn.net/detail/qq_19558705/9273479

5.返回顶部

博客链接：http://blog.csdn.net/qq_19558705/article/details/50364615

效果图：

6.右击显示菜单

博客链接：http://blog.csdn.net/qq_19558705/article/details/50364650

效果图：

7.编辑内容

博客链接：http://blog.csdn.net/qq_19558705/article/details/50364662

效果图：

资源下载地址：http://download.csdn.net/detail/qq_19558705/9288037

8.购物车结算

博客链接：http://blog.csdn.net/qq_19558705/article/details/50364678

效果图：

资源地址：http://download.csdn.net/detail/qq_19558705/9303479

9.百度换肤

博客链接：http://blog.csdn.net/qq_19558705/article/details/50364720

效果图：

资源下载地址：http://download.csdn.net/detail/qq_19558705/9329891

还在更新中。。。。

一点点进步，一点点成长，如果有问题和建议可以留言，我会及时更正

未经允许不得转载：小罗同学 » jquery实战训练

相关推荐