每日jsp 特效点击某颜色覆盖某面板

最新推荐文章于 2017-04-21 10:46:17 发布

sangfei_no1

最新推荐文章于 2017-04-21 10:46:17 发布

阅读量878

点赞数

分类专栏： js 文章标签：点击一个颜色覆盖面板

本文链接：https://blog.csdn.net/sang_fei/article/details/21375477

版权

js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
	<head>
	<script src="../js/jquery-1.4.3.js"></script>
	<style>
	#center{
	background-color: #FFFFE0;
    box-shadow: 0 0 8px #000000;
    margin: 0 auto;
    padding: 40px;
    width: 850px;
	height:550px;
	}
	#title{
	color: #333333;
    font-family: "Century Gothic",CenturyGothic,AppleGothic,sans-serif;
    font-size: 38px;
    padding: 30px 0;
    text-align: center;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.5), 1px 1px 0 rgba(0, 0, 0, 0.5);
	
	}
	.color {
    border: 1px solid #AAAAAA;
    cursor: pointer;  /*这句话的意思是：意思就是鼠标指针变成 手 的形状，和放到链接上面的鼠标指针一样*/
    height: 50px;
    margin-bottom: 20px;
    width: 50px;
    }
    #right{
   border: 1px solid #333333;
    float: right;
    height: 500px;
    width: 700px;
    }
    .row{
     border: 1px solid #333333;
    }
    #table li{
	float:left;
	height: 165px;
    width: 349px;
	list-style:none outside;
	border-bottom:#999999 1px solid;
	border-right:#999999 1px solid;
	text-align:center;
}
	</style>
	<script>
	$(function(){
		var color;
		$(".color").click(
				function (){
			 color=$(this).attr("style");
			
		});
		$("#table li").click(
		 function (){
			 $(this).attr("style",color);
		 }		
		);
	} );
	
	
	</script>
		<title>点击一个颜色覆盖面板</title>
	</head>
	<body >
	<div id="title"> 点击你想点击的颜色，涂写面板</div>
	<div id="center">
	<div style="float:left">
	<div class="color"  style="background:red"></div>
	<div class="color"style="background:blue"></div>
	<div class="color" style="background:black"></div>
	<div class="color" style="background:yellow"></div>
	</div>
	<div id="right">
	<div id="table">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</div>
</div>
	</div>
		
	</body>
</html>