jquery案例-演示手机logo图片事件

最新推荐文章于 2016-08-14 20:51:35 发布

jeo_chow

最新推荐文章于 2016-08-14 20:51:35 发布

阅读量1k

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/jeo_chow/article/details/52206201

版权

jQuery 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>案例-演示</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <!-- 记得引入jquery-1.11.3.js文件到js目录下 -->
    <script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    <style type="text/css">
    	body{
    		font-family: "Microsoft YaHei";
    		text-align: center;
    	}
    	#mainDiv {
    		width: 100%;
    		text-align: center;
    		margin-top:10px;
    	}
    	
    	.divRow {
    		text-align: center;
    		margin-left: auto;
    		margin-right: auto;
    		width:736px;
    	}
    	
    	.divColumn {
    		width:104px;
    		height:38px;
    		color: #005aa0;
    		border: solid 1px #b9b9b9;
    		font-size:14px;
    		float:left;
    		margin: 0 -1 -1 0;
    		text-align: center;
    		cursor: pointer;
    	}
    	
    	.divColumn a {
    		height: 36px;
    		line-height: 36px;
    		overflow: hidden;
    		padding: 0;
    		position: relative;
    		white-space: nowrap;
    		width: 102px;
    		display: inline-block;
    	}
    	
    	.divColumn img {
    		display: block;
    		height: 36px;
    		position: absolute;
    		width:102px;
    		z-index:1;
    		left:0;
    		top:0;
    	}
    	
    	.hover {
			color: #e4393c;
    		border: solid 1px #e4393c; 
    		position: relative;
    	}
    	.more,.fold {
    		font-size: 12px;
    		color: #005aa0;
    		cursor: pointer;
    	}
    	.more b{
    		background: rgba(0,0,0,0) url("images/down.gif") no-repeat;
    		height: 5px;
    		overflow: hidden;
    		position: absolute;
    		width: 7px;
    		margin:6 0 0 3;
    	}
    	.fold b{
    		background: url("images/up.gif");
    	}
    	.cGreen{background-color: #4CA902}
    	.cPink{background-color: #ED4A9F}
    	.cBlue{background-color: #0092E7}
    	.cCyan{background-color: #01A6A2}
    	.cYellow{background-color: #DCA112}
    	.cRed{background-color: #B7103B}
    	.cPurple{background-color: #792F7C}
    	.cBlack{background-color: #110F10}
    	.cOrange{background-color: #FF4500}
    	.cGray{background-color: #A9A9A9}
    	.hide{display: none;}
    </style>
    <script type="text/javascript">
    
    	$(document).ready(function(){
			//1. 先隐藏第二行
			$(".divColumn:gt(6)").hide();
			
			//2. 点击更多事件
			$(".more").click(function(){
				
				if ($(this).hasClass("fold")){
					//2.1 如果当前是收起，就显示更多
					$(this).html("<span>更多<b></b></span>");
					$(this).removeClass("fold"); 
					$(".divColumn:gt(6)").hide();
				}else{
					//2.2 显示“更多”, 点击时候显示“收起”，图片变为向上
					$(this).html("<span>收起<b></b></span>");
					$(this).addClass("fold");  // 添加样式，显示向上的图标
					$(".divColumn:gt(6)").show();
				}
			});
			
			// 3. 鼠标悬浮、离开事件
			$(".divColumn").hover(
				function(){ //  鼠标悬浮、
					$(this).find("img").hide();
					$(this).addClass("hover");
				},
				function(){ // 鼠标离开
					$(this).find("img").show();
					$(this).removeClass("hover");
				}
			);
			
    	});
    </script>
  </head>
  
  <body>
    <div id="mainDiv">
    	<div class="divRow">
    		<div class="divColumn">
    			<a><img alt="华为" src="images/huawei.jpg">华为</a>
    		</div>
    		<div class="divColumn">
    			<a><img alt="小米" src="images/xiaomi.jpg">小米</a>
    		</div>
    		<div class="divColumn">
    			<a><img alt="三星" src="images/samsung.jpg">三星</a>
    		</div>
    		<div class="divColumn">
    			<a><img alt="苹果" src="images/apple.jpg">苹果</a>
    		</div>
    		<div class="divColumn">
    			<a><img alt="魅族" src="images/meizu.jpg">魅族</a>
    		</div>
    		<div class="divColumn">
    			<a><img alt="诺基亚" src="images/nokia.png">诺基亚</a>
    		</div>
    		<div class="divColumn">
    			<a><img alt="vivo" src="images/vivo.png">vivo</a>
    		</div>
    		<div class="divColumn">
    			<a>OPPO</a>
    		</div>
    		<div class="divColumn">
    			<a>BlackBerry</a>
    		</div>
    		<div class="divColumn">
    			<a>努比亚</a>
    		</div>
    		<div class="divColumn">
    			<a>联想</a>
    		</div>
    		<div class="divColumn">
    			<a>索尼</a>
    		</div>
    		<div class="divColumn">
    			<a>酷派</a>
    		</div>
    		<div class="divColumn">
    			<a>HTC</a>
    		</div>
    	</div>
    	<div class="more"><span>更多<b></b></span></div>
   	</div>
  </body>
</html>

jeo_chow

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery案例-演示手机logo图片事件

案例-演示 body{ font-family: "Microsoft YaHei"; text-align: center; } #mainDiv { width: 100%; text-align: center; margin-top:10px; }
复制链接

扫一扫

专栏目录