mirror of
https://github.com/wu736139669/vczero.github.io.git
synced 2026-08-05 06:23:38 +00:00
add demo
This commit is contained in:
wlh
@@ -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;}
|
||||
.show{margin-left:10px;}
|
||||
.hide{display:none;}
|
||||
a{color:#FFF;text-decoration:none;}
|
||||
|
||||
/*-----------------------------------------------------*/
|
||||
#calendar{width:390px; height:300px;}
|
||||
|
||||
+14
-13
@@ -2,15 +2,14 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>JavaScript组件</title>
|
||||
<title>写一些工具类或者效果</title>
|
||||
<link type="text/css" rel="stylesheet" href="css/main.css"/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<ul>
|
||||
<li>写个工具自己玩</li>
|
||||
<li>GitHub</li>
|
||||
<li>About</li>
|
||||
<li>纯属自己玩</li>
|
||||
<li><a href="https://github.com/vczero/component">GitHub</a></li>
|
||||
</ul>
|
||||
</header>
|
||||
|
||||
@@ -76,16 +75,18 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="mask_codeshow" class="codeshow hide">
|
||||
<div id="mask_container">
|
||||
<div class="code fl">
|
||||
<img src="img/mask.png"/>
|
||||
<div id="mask_container" style="width:846px;height:400px;position:absolute;top:70px;left:240px;">
|
||||
<section id="mask_codeshow">
|
||||
<div>
|
||||
<div class="code fl">
|
||||
<img src="img/mask.png"/>
|
||||
</div>
|
||||
<div class="show fl mask_div">
|
||||
<img src="img/guxiang.png"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="show fl mask_div">
|
||||
<img src="img/guxiang.png"/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="js/calendar.js" ></script>
|
||||
<script type="text/javascript" src="js/guid.js" ></script>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
var guid_codeshow = document.getElementById('guid_codeshow');
|
||||
var cookie_codeshow = document.getElementById('cookie_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'));
|
||||
@@ -42,7 +42,7 @@
|
||||
setShow('tip_codeshow');
|
||||
break;
|
||||
case '#mask':
|
||||
setShow('mask_codeshow');
|
||||
setShow('mask_container');
|
||||
break;
|
||||
default:
|
||||
setShow('calendar_codeshow');
|
||||
@@ -86,7 +86,7 @@
|
||||
|
||||
document.getElementById('mask').onclick = function(){
|
||||
window.location.hash = 'mask';
|
||||
setShow('mask_codeshow');
|
||||
setShow('mask_container');
|
||||
};
|
||||
|
||||
|
||||
@@ -97,7 +97,7 @@
|
||||
guid_codeshow.style.display = 'none';
|
||||
cookie_codeshow.style.display = 'none';
|
||||
tip_codeshow.style.display = 'none';
|
||||
mask_codeshow.style.display = 'none';
|
||||
mask_container.style.display = 'none';
|
||||
|
||||
switch(name){
|
||||
case 'calendar_codeshow':
|
||||
@@ -112,8 +112,8 @@
|
||||
case 'tip_codeshow':
|
||||
tip_codeshow.style.display = 'block';
|
||||
break;
|
||||
case 'mask_codeshow':
|
||||
mask_codeshow.style.display = 'block';
|
||||
case 'mask_container':
|
||||
mask_container.style.display = 'block';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
|
||||
@@ -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){
|
||||
var Mask = function(id/*target element id*/, otherCssObj /*is a json obj, like css text*/){
|
||||
var mask = document.getElementById(id);
|
||||
@@ -10,8 +7,8 @@
|
||||
this.div = document.createElement('div');
|
||||
|
||||
this.div.style.position = 'absolute';
|
||||
this.div.style.left = mask.offsetLeft + 'px';
|
||||
this.div.style.top = mask.offsetTop + 'px';
|
||||
// this.div.style.left = mask.offsetLeft + 'px';
|
||||
// this.div.style.top = mask.offsetTop + 'px';
|
||||
this.div.style.zIndex = 300;
|
||||
this.div.style.width = width + 'px';
|
||||
this.div.style.height = height + 'px';
|
||||
|
||||
+4
-8
@@ -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){
|
||||
/* id: target element id
|
||||
* opts: json obj, is optional
|
||||
@@ -28,8 +23,9 @@
|
||||
var left = (opts && opts.offsetLeft) ? (tipContainer.offsetLeft - opts.offsetLeft): tipContainer.offsetLeft;
|
||||
var top = (opts && opts.offsetTop) ? (tipContainer.offsetTop - opts.offsetTop): tipContainer.offsetTop;
|
||||
//modify?
|
||||
tip.style.left = left + 'px';
|
||||
tip.style.top = (top + tipContainer.offsetHeight) + 'px';
|
||||
// 当时float div时，删除下面两句代码
|
||||
//tip.style.left = left + 'px';
|
||||
//tip.style.top = (top + tipContainer.offsetHeight) + 'px';
|
||||
//default css property
|
||||
tip.style.zIndex = 100;
|
||||
tip.style.position = 'absolute';
|
||||
|
||||
Reference in New Issue
Block a user