jquery实战训练

骑猪看日落 2022-08-10 08:38 117阅读 0赞

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

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

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

博客链接：[http://blog.csdn.net/qq\_19558705/article/details/50364344][http_blog.csdn.net_qq_19558705_article_details_50364344]

![Center][]

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

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

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

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

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

<!doctype html>
    <html>
    	<head>
    		
    		<meta http-equiv="Content-Type" content="text/html; charset=GBK">
    		<title>鼠标划过显示隐藏内容</title>
    		<meta name="Keywords" content="关键词,关键词">
    		<meta name="Description" content="">
    		
    		<style type="text/css">
    			*{margin:0;padding:0;}
    			div{width:200px;height:200px;}
    			.box1{background:#066;cursor:pointer;}
    			.box2{background:#0cf;display:none;}
    			.show{display:block;}
    		</style>
    	</head>
    	<body>
    		<div class="box1" title="鼠标划过此处下面的图片会显示"></div>
    		<div class="box2"></div>
    		<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    		<script type="text/javascript">
    			$(function(){
    				$(".box1").mouseover(function(){
    					$(".box2").addClass("show");
    				}).mouseout(function(){
    					$(".box2").removeClass("show");
    				});
    			});
    		</script>
    	</body>
    </html>

<span style="white-space:pre">		</span>$(function(){
    		// 左侧菜单栏切换 项目代码
    			$(".menu").find("li").mouseover(function(){
    				$(this).find(".show_menu").addClass("show");
    			}).mouseout(function(){
    				$(this).find(".show_menu").removeClass("show");
    			});
    		// 显示二维码
    			$(".sys_qq").mouseover(function(){
    				$(this).find(".code").fadeTo("slow",1);
    			}).mouseout(function(){
    				$(this).find(".code").hide();
    			});
    		});

## 3.轮展图切换-插件版 ##

博客链接：[http://blog.csdn.net/qq\_19558705/article/details/50364564][http_blog.csdn.net_qq_19558705_article_details_50364564]

效果图：

![SouthEast][]

资源下载地址：[http://download.csdn.net/detail/qq\_19558705/9273389][http_download.csdn.net_detail_qq_19558705_9273389]

资源下载地址：[http://download.csdn.net/detail/qq\_19558705/9273479][http_download.csdn.net_detail_qq_19558705_9273479]

## 5.返回顶部 ##

博客链接：[http://blog.csdn.net/qq\_19558705/article/details/50364615][http_blog.csdn.net_qq_19558705_article_details_50364615]

效果图：![Center 1][]

## 6.右击显示菜单 ##

博客链接：[http://blog.csdn.net/qq\_19558705/article/details/50364650][http_blog.csdn.net_qq_19558705_article_details_50364650]

效果图：

![20151119211222596][]

## 7.编辑内容 ##

博客链接：[http://blog.csdn.net/qq\_19558705/article/details/50364662][http_blog.csdn.net_qq_19558705_article_details_50364662]

效果图：![20151121111350758][]

资源下载地址：[http://download.csdn.net/detail/qq\_19558705/9288037][http_download.csdn.net_detail_qq_19558705_9288037]

## 8.购物车结算 ##

博客链接：[http://blog.csdn.net/qq\_19558705/article/details/50364678][http_blog.csdn.net_qq_19558705_article_details_50364678]

效果图：

![20151126204337510][]

资源地址：[http://download.csdn.net/detail/qq\_19558705/9303479][http_download.csdn.net_detail_qq_19558705_9303479]

## 9.百度换肤 ##

博客链接：[http://blog.csdn.net/qq\_19558705/article/details/50364720][http_blog.csdn.net_qq_19558705_article_details_50364720]

效果图：

![SouthEast 1][]

资源下载地址： [http://download.csdn.net/detail/qq\_19558705/9329891][http_download.csdn.net_detail_qq_19558705_9329891]

还在更新中。。。。

一点点进步，一点点成长，如果有问题和建议可以留言，我会及时更正![微笑][smile.gif]

[http_www.itit123.cn]: http://www.itit123.cn/
[http_blog.csdn.net_qq_19558705_article_details_50364344]: http://blog.csdn.net/qq_19558705/article/details/50364344
[Center]: /images/20220731/966d2e7ebd5148178423da26dd9a081a.png
[http_blog.csdn.net_qq_19558705_article_details_50364564]: http://blog.csdn.net/qq_19558705/article/details/50364564
[SouthEast]: /images/20220731/2d27bae9ade34212ad883680981bea6a.png
[http_download.csdn.net_detail_qq_19558705_9273389]: http://download.csdn.net/detail/qq_19558705/9273389
[http_download.csdn.net_detail_qq_19558705_9273479]: http://download.csdn.net/detail/qq_19558705/9273479
[http_blog.csdn.net_qq_19558705_article_details_50364615]: http://blog.csdn.net/qq_19558705/article/details/50364615
[Center 1]: /images/20220731/15b1ef59965d47d393054364cded66dc.png
[http_blog.csdn.net_qq_19558705_article_details_50364650]: http://blog.csdn.net/qq_19558705/article/details/50364650
[20151119211222596]: /images/20220731/fcc3a8c717604f3c82f05d67bbd5b6fa.png
[http_blog.csdn.net_qq_19558705_article_details_50364662]: http://blog.csdn.net/qq_19558705/article/details/50364662
[20151121111350758]: /images/20220731/a364b520340544c8807b74e4b835e2a2.png
[http_download.csdn.net_detail_qq_19558705_9288037]: http://download.csdn.net/detail/qq_19558705/9288037
[http_blog.csdn.net_qq_19558705_article_details_50364678]: http://blog.csdn.net/qq_19558705/article/details/50364678
[20151126204337510]: /images/20220731/36f6090521f5444aad1b7ea6f7e9445e.png
[http_download.csdn.net_detail_qq_19558705_9303479]: http://download.csdn.net/detail/qq_19558705/9303479
[http_blog.csdn.net_qq_19558705_article_details_50364720]: http://blog.csdn.net/qq_19558705/article/details/50364720
[SouthEast 1]: /images/20220731/c2dad7bf33a64173b6c09327cc613e62.png
[http_download.csdn.net_detail_qq_19558705_9329891]: http://download.csdn.net/detail/qq_19558705/9329891
[smile.gif]: /images/20220731/f5f1a1daf0494f03a881c99e1f0d7873.png