wushenghua/vczero.github.io
1
0
Fork 0
mirror of https://github.com/wu736139669/vczero.github.io.git synced 2026-08-05 06:23:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

add demo

Browse Source
This commit is contained in:
wlh
2015-01-08 21:53:48 +08:00
parent e31afd76bb
commit b4f751bb8a
5 changed files with 28 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
component/css/main.css
+1
View File
@@ -15,6 +15,7 @@ header ul li{float:left;margin-right:25px;}
.code{background-color:#272822;min-height:400px;min-width:570px;border:1px dashed #FFF;font-size:14px;} .code{background-color:#272822;min-height:400px;min-width:570px;border:1px dashed #FFF;font-size:14px;}
.show{margin-left:10px;} .show{margin-left:10px;}
.hide{display:none;} .hide{display:none;}
a{color:#FFF;text-decoration:none;}
/*-----------------------------------------------------*/ /*-----------------------------------------------------*/
#calendar{width:390px; height:300px;} #calendar{width:390px; height:300px;}
component/index.html
+14 -13
View File
@@ -2,15 +2,14 @@
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>JavaScript组件</title> <title>写一些工具类或者效果</title>
<link type="text/css" rel="stylesheet" href="css/main.css"/> <link type="text/css" rel="stylesheet" href="css/main.css"/>
</head> </head>
<body> <body>
<header> <header>
<ul> <ul>
<li>写个工具自己玩</li> <li>纯属自己玩</li>
<li>GitHub</li> <li><a href="https://github.com/vczero/component">GitHub</a></li>
<li>About</li>
</ul> </ul>
</header> </header>
@@ -76,16 +75,18 @@
</div> </div>
</section> </section>
<section id="mask_codeshow" class="codeshow hide"> <div id="mask_container" style="width:846px;height:400px;position:absolute;top:70px;left:240px;">
<div id="mask_container"> <section id="mask_codeshow">
<div class="code fl"> <div>
<img src="img/mask.png"/> <div class="code fl">
<img src="img/mask.png"/>
</div>
<div class="show fl mask_div">
<img src="img/guxiang.png"/>
</div>
</div> </div>
<div class="show fl mask_div"> </section>
<img src="img/guxiang.png"/> </div>
</div>
</div>
</section>
<script type="text/javascript" src="js/calendar.js" ></script> <script type="text/javascript" src="js/calendar.js" ></script>
<script type="text/javascript" src="js/guid.js" ></script> <script type="text/javascript" src="js/guid.js" ></script>
component/js/main.js
+6 -6
View File
@@ -3,7 +3,7 @@
var guid_codeshow = document.getElementById('guid_codeshow'); var guid_codeshow = document.getElementById('guid_codeshow');
var cookie_codeshow = document.getElementById('cookie_codeshow'); var cookie_codeshow = document.getElementById('cookie_codeshow');
var tip_codeshow = document.getElementById('tip_codeshow'); var tip_codeshow = document.getElementById('tip_codeshow');
var mask_codeshow = document.getElementById('mask_codeshow'); var mask_container = document.getElementById('mask_container');
//日历 //日历
var canlendar = new Calendar('calendar',new Date('2015-1')); var canlendar = new Calendar('calendar',new Date('2015-1'));
@@ -42,7 +42,7 @@
setShow('tip_codeshow'); setShow('tip_codeshow');
break; break;
case '#mask': case '#mask':
setShow('mask_codeshow'); setShow('mask_container');
break; break;
default: default:
setShow('calendar_codeshow'); setShow('calendar_codeshow');
@@ -86,7 +86,7 @@
document.getElementById('mask').onclick = function(){ document.getElementById('mask').onclick = function(){
window.location.hash = 'mask'; window.location.hash = 'mask';
setShow('mask_codeshow'); setShow('mask_container');
}; };
@@ -97,7 +97,7 @@
guid_codeshow.style.display = 'none'; guid_codeshow.style.display = 'none';
cookie_codeshow.style.display = 'none'; cookie_codeshow.style.display = 'none';
tip_codeshow.style.display = 'none'; tip_codeshow.style.display = 'none';
mask_codeshow.style.display = 'none'; mask_container.style.display = 'none';
switch(name){ switch(name){
case 'calendar_codeshow': case 'calendar_codeshow':
@@ -112,8 +112,8 @@
case 'tip_codeshow': case 'tip_codeshow':
tip_codeshow.style.display = 'block'; tip_codeshow.style.display = 'block';
break; break;
case 'mask_codeshow': case 'mask_container':
mask_codeshow.style.display = 'block'; mask_container.style.display = 'block';
break; break;
default: default:
break; break;
component/js/mask.js
+3 -6
View File
@@ -1,7 +1,4 @@
/*
* Mask: You can use the function in your project,
* when don't want the user to pay attention to inside information of DIV.
*/
(function(exports){ (function(exports){
var Mask = function(id/*target element id*/, otherCssObj /*is a json obj, like css text*/){ var Mask = function(id/*target element id*/, otherCssObj /*is a json obj, like css text*/){
var mask = document.getElementById(id); var mask = document.getElementById(id);
@@ -10,8 +7,8 @@
this.div = document.createElement('div'); this.div = document.createElement('div');
this.div.style.position = 'absolute'; this.div.style.position = 'absolute';
this.div.style.left = mask.offsetLeft + 'px'; // this.div.style.left = mask.offsetLeft + 'px';
this.div.style.top = mask.offsetTop + 'px'; // this.div.style.top = mask.offsetTop + 'px';
this.div.style.zIndex = 300; this.div.style.zIndex = 300;
this.div.style.width = width + 'px'; this.div.style.width = width + 'px';
this.div.style.height = height + 'px'; this.div.style.height = height + 'px';
component/js/tip.js
+4 -8
View File
@@ -1,9 +1,4 @@
/*
* tip: when mouse over a element, will be show a tip(detail div)
* For example:
* when mouse over a user's avatar, will be show some user's infomation in tip.
* Later, I will apply it to the project of OurTimes.
* */
(function(exports){ (function(exports){
/* id: target element id /* id: target element id
* opts: json obj, is optional * opts: json obj, is optional
@@ -28,8 +23,9 @@
var left = (opts && opts.offsetLeft) ? (tipContainer.offsetLeft - opts.offsetLeft): tipContainer.offsetLeft; var left = (opts && opts.offsetLeft) ? (tipContainer.offsetLeft - opts.offsetLeft): tipContainer.offsetLeft;
var top = (opts && opts.offsetTop) ? (tipContainer.offsetTop - opts.offsetTop): tipContainer.offsetTop; var top = (opts && opts.offsetTop) ? (tipContainer.offsetTop - opts.offsetTop): tipContainer.offsetTop;
//modify? //modify?
tip.style.left = left + 'px'; // 当时float div时，删除下面两句代码
tip.style.top = (top + tipContainer.offsetHeight) + 'px'; //tip.style.left = left + 'px';
//tip.style.top = (top + tipContainer.offsetHeight) + 'px';
//default css property //default css property
tip.style.zIndex = 100; tip.style.zIndex = 100;
tip.style.position = 'absolute'; tip.style.position = 'absolute';