純自創新浪部落格前端專案js和html自己寫時操作步驟詳細,用到的圖片已上傳,已90%但非完整專案
阿新 • • 發佈：2019-01-17
//這部分是html檔案
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<script type=text/javascript src="前端-分享側欄.js"></script>
<script type=text/javascript src="前端-分享側欄Base.js"></script>
<script type=text/javascript src="java-drag.js"></script>
<link rel="stylesheet" type="text/css" href="前端-分享側欄.css" />
</head>
<body>
<div id="header">
<div class="logo"><img src="images/logo.gif" alt=""/></div>
<div class="member">個人中心
<ul class="member_ul">
<li><a href="#">設定</a></li>
<li><a href="#">換膚</a></li>
<li><a href="#">幫助</a></li>
<li><a href="#">退出</a></li>
</ul>
</div>
<div class="reg">註冊</div>
<div class="login">登入</div>
</div>
<div id="reg">
<h2 id="h2"><img src="images/close.png" alt="" class="close" />會員註冊</h2>
<dl>
<dd style="padding-left:5px;">用 戶 名：<input type="text" name="user" class="text" /></dd>
<dd>密 碼：<input type="password" name="pass" class="text" /></dd>
<dd>密碼確認：<input type="password" name="notpass" class="text" /></dd>
<dd>提 問：<select name="ques">
<option value="0">- - - - 請選擇 - - - -</option>
<option value="1">- - 您最喜歡吃的菜</option>
<option value="2">- - 您的狗狗的名字</option>
<option value="3">- - 您的出生地</option>
<option value="4">- - 您最喜歡的明星</option>
</select></dd>
<dd>回 答： <input type="text" name="ans" class="text" /></dd>
<dd>電子郵件： <input type="text" name="email" class="text" /></dd>
<dd class="birthday">生 日：<select><option value="0">請選擇</option></select>年
<select><option value="0">請選擇</option></select>月
<select><option value="0">請選擇</option></select>日
</dd>
<dd style="height:105px"><span style="vertical-align:80px">備 注：</span><textarea name="ps" style="resize:none;"></textarea></dd>
<dd style="padding:0 0 0 320px;">還可以輸入200字！</dd>
<dd style="padding:0 0 0 160px;"><input type="button" class="submit"/></dd>
</dl>
</div>
<div id="login">
<h2 id="h2"><img src="images/close.png" alt="" class="close" />網站登入</h2>
<div class="user">賬號：<input type="text" class="text"/></div>
<div class="pass">密碼：<input type="password" class="text"/></div>
<div class="button"><input type="button" class="submit"/></div>
<div class="other">註冊新使用者 | <span>忘記密碼？</span></div>
</div>
<div id="share">
<h2>分享到</h2>
<ul>
<li><a href="###" class="a">一鍵分享</a></li>
<li><a href="###" class="b">新浪微博</a></li>
<li><a href="###" class="c">人人網</a></li>
<li><a href="###" class="d">百度相簿</a></li>
<li><a href="###" class="e">騰訊朋友</a></li>
<li><a href="###" class="f">豆瓣網</a></li>
<li><a href="###" class="g">百度新首頁</a></li>
<li><a href="###" class="h">和訊微博</a></li>
<li><a href="###" class="i">QQ 空間</a></li>
<li><a href="###" class="j">百度搜藏</a></li>
<li><a href="###" class="k">騰訊微博</a></li>
<li><a href="###" class="l">開心網</a></li>
<li><a href="###" class="m">百度貼吧</a></li>
<li><a href="###" class="n">搜狐微博</a></li>
<li><a href="###" class="o">QQ 好友</a></li>
<li><a href="###" class="p">更多...</a></li>
</ul>
<div class="share_footer"><a href="###">百度分享</a><span></span></div>
</div>
<div id="nav">
<ul class="about">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="black">
<li>首頁</li>
<li>博文列表</li>
<li>精彩相簿</li>
<li>動感音樂</li>
<li>關於我</li>
</ul>
<div class="nav_bg">
<ul class="white">
<li>首頁</li>
<li>博文列表</li>
<li>精彩相簿</li>
<li>動感音樂</li>
<li>關於我</li>
</ul>
</div>
</div>
<div id="main">
<div id="sidebar">
<h2>教育博文1</h2>
<ul>
<li><a href="###">靠自己95 後女生被16 所國外名校錄取</a></li>
<li><a href="###">00 後的成長煩惱：壓力巨大成隱形殺手</a></li>
<li><a href="###">一年自學MIT 的33 門課? 瘋狂學習方法</a></li>
<li><a href="###">申請赴美讀研人數下降5% 7 年來首遇冷</a></li>
<li><a href="###">西政“萌招聘”秀出辣椒與美女被贊</a></li>
</ul>
<h2>教育博文2</h2>
<ul>
<li><a href="###">靠自己95 後女生被16 所國外名校錄取</a></li>
<li><a href="###">00 後的成長煩惱：壓力巨大成隱形殺手</a></li>
<li><a href="###">一年自學MIT 的33 門課? 瘋狂學習方法</a></li>
<li><a href="###">申請赴美讀研人數下降5% 7 年來首遇冷</a></li>
<li><a href="###">西政“萌招聘”秀出辣椒與美女被贊</a></li>
</ul>
<h2>教育博文3</h2>
<ul>
<li><a href="###">靠自己95 後女生被16 所國外名校錄取</a></li>
<li><a href="###">00 後的成長煩惱：壓力巨大成隱形殺手</a></li>
<li><a href="###">一年自學MIT 的33 門課? 瘋狂學習方法</a></li>
<li><a href="###">申請赴美讀研人數下降5% 7 年來首遇冷</a></li>
<li><a href="###">西政“萌招聘”秀出辣椒與美女被贊</a></li>
</ul>
</div>
<div id="index"></div>
</div>
<div id="screen"></div>
<p style="clear:both">1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</body>
</html>
//這部分是css樣式
padding:0;
margin:0;
}
body{
background:url(images/header_bg.png) repeat-x;
padding:0;
margin:0;
position:relative;
font-size:12px;
}
#header{
width:900px;
height:30px;
margin:0 auto;
}
#header .logo {
width:100px;
height:30px;
float:left;
}
#header .member{
font-size:14px;
width:80px;
height:30px;
float:right;
line-height:30px;
background:url(images/arrow2.png) no-repeat 70px center;
}
#header .member ul{
opacity:0;
width:90px;
height:0px;
border:1px solid #999;
border-top:none;
background:#FBF7E1;
display:none;
overflow:hidden;
}
#header .member ul li{
list-style:none;
height:30px;
letter-spacing:1px;
line-height:30px;
text-indent:20px;
}
#header .member ul li a{
text-decoration:none;
display:block;
color:#333;
background:url(images/arrow3.gif) no-repeat 5px center;
}
/*
//這裡用css樣式表進行隱藏我們還可以用封裝的方法進行設定顯示和隱藏
#header .member:hover ul{
display:block;
}
#header .member:hover{
background:url(images/arrow.png) no-repeat 70px center;
}*/
#header .member ul li a:hover{
color:red;
background:url(images/arrow4.gif) no-repeat 5px center;
}
#header .login, .reg{
float:right;
width:35px;
height:30px;
line-height:30px;
font-size:14px;
cursor:pointer;
}
#login{
position:absolute;
width:350px;
height:250px;
border:1px solid #ccc;
border-top:none;
display:none;
z-index:9999;
background:#fff;
}
#login h2{
height:40px;
line-height:40px;
text-align:center;
background:url(images/login_header.png);
//position:relative;
}
#login h2 img{
position:absolute;
top:14px;
right:10px;
}
#reg{
position:absolute;
width:600px;
height:550px;
border:1px solid #ccc;
border-top:none;
display:none;
z-index:9999;
background:#fff;
}
#reg h2{
height:40px;
line-height:40px;
text-align:center;
background:url(images/login_header.png);
//position:relative;
}
#reg h2 img{
position:absolute;
top:14px;
right:10px;
}
#reg dl{
font-size:14px;
color:#666;
margin:20px;
padding:0 0 0 0px;
}
#reg dl dd{
height:30px;
padding:5px 0px;
}
#reg dl dd input.text, dl dd select{
width:200px;
height:25px;
border:1px solid #ccc;
font-size:14px;
//color:red; //可以設定文字框裡面的字型的顏色
}
#login .user,#login .pass{
text-align:center;
font-size:14px;
color:#666;
margin-top:20px;
}
#reg dl dd.birthday select{
width:100px;
}
#reg dl dd textarea {
width:360px;
height:100px;
border:1px solid #ccc;
}
#reg dl dd .submit{
width:143px;
height:33px;
background:url(images/reg.png);
border:none;
cursor:pointer;
}
#login .button{
text-align:center;
margin-top:50px;
}
#login .button .submit{
width:107px;
height:30px;
cursor:pointer;
background:url(images/login_button.png);
border:none;
}
#login .other{
font-size:12px;
float:right;
margin-top:30px;
cursor:pointer;
}
#nav{
width:465px;
height:52px;
background:url(images/nav_bg.png) no-repeat;
margin:50px auto 0 auto;
position:relative;
}
#nav ul{
position:absolute;
}
#nav ul.black{
position:absolute;
left:20px;
z-index:1;
}
#nav ul.white{
width:425px;
z-index:3;
color:#fff;
left:0; /*如果這裡left不等於0 ie瀏覽器不支援*/
}
#nav ul.about{
width:425;
z-index:4;
left:20px;
cursor:pointer;
background:red;
opacity:0;
}/* IE瀏覽器需要加上背景顏色,然後再將透明度設定為0 即可支援*/
#nav ul li{
width:85px;
height:52px;
line-height:52px;
list-style:none;
float:left;
text-align:center;
font-weight:bold;
}
#nav .nav_bg{
width:85px;
height:52px;
background:url(images/nav_over.png) no-repeat 0 11px;
position:absolute;
left:20px;
//top:11px;
z-index:2;
overflow:hidden;
}
#main{
width:900px;
margin:50px auto;
}
#sidebar{
width:250px;
height:500px;
float:left;
}
#sidebar ul{
height:150px;
border:1px solid #ccc;
overflow:hidden;
}
#sidebar ul li{
list-style:none;
height:30px;
line-height:30px;
text-indent:30px;
background:url(images/arrow4.gif) no-repeat 10px 50% ; //第一個引數是圖片的距離左邊的位置,第二個引數是上下
}
#sidebar ul li a{
text-decoration:none;
color:#333;
}
#sidebar h2 {
width:248px;
height:30px;
line-height:30px;
font-size:14px;
background:url(images/side_h.png);
text-indent:10px;
border:1px solid #ccc;
border-bottom:none;
margin:0;
}
#index {
width:630px;
height:500px;
background:#eee;
float:right;
}
#screen{
background:#000;
position:absolute;
left:0;
top:0;
z-index:9998;
opacity:0;
display:none;
}
#share{
width:210px;
height:315px;
border:1px solid #ccc;
position:absolute;
//top:150px;
left:-211px;
background:#fff;
}
#share h2{
height:30px;
line-height:30px;
background:#eee;
font-size:14px;
color:#666;
text-indent:10px;
}
#share ul{
height:254px;
padding:3px 0 2px 5px;
}
#share ul li {
width:96px;
height:28px;
float:left;
list-style:none;
padding:2px;
}
#share ul li a{
text-decoration:none;
display:block;
width:95px;
height:26px;
line-height:26px;
color:#666;
text-indent:30px;
background-image:url(images/share_bg.png);
background-repeat:no-repeat;
}
#share ul li a.a {
background-position:5px 4px;
}
#share ul li a.b {
background-position:5px -26px;
}
#share ul li a.c {
background-position:5px -56px;
}
#share ul li a.d {
background-position:5px -86px;
}
#share ul li a.e {
background-position:5px -116px;
}
#share ul li a.f {
background-position:5px -146px;
}
#share ul li a.g {
background-position:5px -176px;
}
#share ul li a.h {
background-position:5px -206px;
}
#share ul li a.i {
background-position:5px -236px;
}
#share ul li a.j {
background-position:5px -266px;
}
#share ul li a.k {
background-position:5px -296px;
}
#share ul li a.l {
background-position:5px -326px;
}
#share ul li a.n {
background-position:5px -356px;
}
#share ul li a.m {
background-position:5px -386px;
}
#share ul li a.o {
background-position:5px -416px;
}
#share ul li a.p {
background-position:5px -446px;
}
#share .share_footer {
height:26px;
background:#eee;
position:relative;
}
#share .share_footer a{
text-decoration:none;
display:block;
position:absolute;
top:5px;
left:140px;
color:#666;
background:#eee url(images/share_bg.png) no-repeat 5px -477px;
text-indent:20px;
}
#share .share_footer span{
display:inline-block;
width:24px;
height:88px;
position:absolute;
left:210px;
top:-250px;
background:url(images/share.png);
cursor:pointer;
}
#share ul li:hover a{
opacity:0.7;
background-color:#eee;
color:#06f;
}
#share .share_footer a:hover {
color:#06f;
opacity:0.7;
}
//這部分是js基礎庫的呼叫js檔案不是Base.js
window.addEventListener('DOMContentLoaded',function(){
//設定導航條的 個人中心
//$().getClass('member').hover(function(){alert('張剛仁');},function(){ert('景甜');});//傳兩個函式 這種事件型別問什麼會亂碼？要怎麼編碼
$('.member').hover(function(){
$('.member_ul').show();
$('.member').css('background','url(images/arrow.png) no-repeat 70px center');
$('.member_ul').animate({
step:30,
mul:{
opacity : 100,
height : 120
}
})
},function(){
$('.member').css('background','url(images/arrow2.png) no-repeat 70px center');
$('.member_ul').animate({
step:30,
mul:{
height : 0 ,
opacity : 30
},
fn : function(){
$('.member_ul').hide();
}
})
})
//登入框的設定
//$().getClass('login').click(function(){$().getId('login').css('display','block');});
//$().getClass('login').click(function(){$().getId('screen').lock();}) //為什麼這樣寫遮罩和登入框不能同時顯示
//因為不能分別設定不同樣的$().getClass('login').click()事件,這樣寫會把前面的事件替換掉,都是同一個標籤下的click事件要寫在一個裡面的
$('#login').center(350,250).resize(function(){
//$().getId('login').center(350,250);
if($('#login').css('display')=='block')
{
$('#screen').lock();
};
});//瀏覽器視窗動時執行的函式 //瀏覽器要改變的事件寫在一起
$('.login').click(function(){
$('#login').css('display','block');
$('#login').center(350,250);
$('#screen').lock().animate({
attr:'o',
target:30,
type:0
})
});
$('#reg').center(600,550).resize(function(){
if($('#reg').css('display')=='block')
{
$('#screen').lock();
};
});
$('.reg').click(function(){
$('#reg').css('display','block');
$('#reg').center(600,550);
$('#screen').lock().animate({
attr:'o',
target:30,
type:0
})
});
//先執行漸變動畫，動畫完畢後再執行關閉unlock
$('#login .close').click(function(){
$('#login').css('display','none');
$('#screen').animate({
attr:'o',
target:0,
type:0,
fn:function(){
$('#screen').unlock();
}
})
});
$('#reg .close').click(function(){
$('#reg').css('display','none');
$('#screen').animate({
attr:'o',
target:0,
type:0,
fn:function(){
$('#screen').unlock();
}
})
});
//拖拽登入框
$('#login').drag($('#login h2').getElements(0));//這裡面以陣列的形式傳進來
//拖拽註冊框
$('#reg').drag($('#reg h2').getElements(0));
//分享側欄的初始位置
$('#share').css('top',(getScroll().top+(window.innerHeight-$('#share').getElements(0).offsetHeight)/2)+'px');
window.addEventListener('scroll',function(){
$('#share').animate({
attr:'y',
target:getScroll().top+(window.innerHeight-$('#share').getElements(0).offsetHeight)/2,
step:30
})//這裡有個bug未解決，就是側欄的上下緩衝動畫和側欄的顯示動畫用的同一個定時器，產生了替代
},false)
//分享側欄的動畫效果
$('#share').hover(function(){
$('#share').animate({
attr:'x',
target:0,
step:30,
type:0
})
},function(){
$('#share').animate({
'attr':'x',
'target':-211,
'step':30,
'type':0
})
})
//滑動導航
$('#nav .about li').hover(function(){
var target = $(this).getElements(0).offsetLeft;//這裡有點搞不懂,為什麼這裡的this可以直接獲取對應的li標籤
$('#nav .nav_bg').animate({
attr : 'x',
target : target+20,
type : 0,
step:15,
fn : function () {
$('#nav .white').animate({
attr : 'x',
target : -target//因為white是第三層在第二層nav_bg裡面，最燃第二層向右移動，
});//但是第三層還是要相對於第二層要向左移動
}
})
},function(){
$('#nav .nav_bg').animate({
attr : 'x',
target : 20,
type : 0,
step:15,
fn : function () {
$('#nav .white').animate({
attr : 'x',
target : 0
});
}
})
})
//選單切換
//這節課的疑問就是這裡的call不能理解
$('#sidebar h2').toggle(function(){
//alert(this);//在沒有用call(this)時,這裡的this為什麼是Arguments
$(this).next().animate({
mul : {
height : 0,
opacity :0
}
});
},function(){
$(this).next().animate({
mul : {
height : 150,
opacity : 100
}
})
})
},false)//最後的括號
//這部分是js封裝庫Base.js檔案
function $(args){
return new Base(args);
}
function Base(args){
this.elements=[];
if(typeof args=='string'){
if(args.indexOf(' ')!=-1){//判斷傳進來的值是否空格,有就返回位置沒有就返回-1
var elements=args.split(' ');//把傳進來的值以裡面的空格為節點,分割成一個數組,所以elements就是一個數組
var childElements=[];//存放臨時節點物件的陣列，解決被覆蓋的問題
var node=[];
for(var i=0;i<elements.length;i++){
if (node.length == 0) node.push(document);//如果預設沒有父節點，就把document放入,就比如,第一個引數放.a或放純標籤
switch(elements[i].charAt(0)){
case '#':
childElements=[];//清理掉臨時節點，以便父節點失效，子節點有效
childElements.push(this.getId(elements[i].substring(1)));
node=childElements;//儲存父節點，因為childElements要清理，所以需要建立node陣列
break;
case '.':
childElements=[];
for(var j=0;j<node.length;j++){
var temps=this.getClass(elements[i].substring(1),node[j]);
for(var k=0;k<temps.length;k++){
childElements.push(temps[k]);
}
}
node=childElements;
break;
default :
childElements=[];
for(var j=0;j<node.length;j++){
var temps=this.getTagName(elements[i],node[j]);
for(var k=0;k<temps.length;k++){
childElements.push(temps[k]);
}
}
node=childElements;
}
}
this.elements=childElements;
//alert(this.elements.length);
}else{
//find方法查詢
switch(args.charAt(0)){//擷取第一個字元
case '#' :
this.elements.push(this.getId(args.substring(1)));//因為這裡getId是返回節點，其它是返回陣列
break;
case '.' :
this.elements=this.getClass(args.substring(1));//這裡不能直接給陣列賦值this.elements=this.getClass(args.substring(1));
break;
default :
this.elements=this.getTagName(args);
}
}
} else if (typeof args == 'object') {
if (args != undefined) {
this.elements[0] = args;
}
}
}
Base.prototype.getId=function(id){//獲取ID方法
return document.getElementById(id);
}
Base.prototype.getTagName=function(tag,parentNode){
var node=null;
var temps=[];
if(parentNode!=undefined){
node=parentNode;
}else{
node=document;
}
var tags=node.getElementsByTagName(tag);//獲取TagName方法
for(var i=0;i<tags.length;i++){
temps.push(tags[i]);
}
return temps;
}
Base.prototype.getClass=function(className,parentNode){//實現了1個引數時，在所有的標籤下面查詢class=red
var node=null;
var temps=[];
if(parentNode!= undefined){
node=parentNode;
}else{
node=document;
}
var all=node.getElementsByTagName('*');
for(var i=0;i<all.length;i++){
if(all[i].className==className){
temps.push(all[i]);
}
}
return temps;
}
Base.prototype.find=function(str){//實現了,$('p').find('span').css('color','red'); p標籤下查詢span標籤
var linshi=[];
for(var i=0;i<this.elements.length;i++){
switch(str.charAt(0)){
case '#':
linshi.push(this.getId(str.substring(1)));
break;
case '.' :
var temps=this.getClass(str.substring(1),this.elements[i]);
for(var j=0;j<temps.length;j++){
linshi.push(temps[j]);
}
break;
default :
var temps=this.getTagName(str,this.elements[i]);
for(var j=0;j<temps.length;j++){
linshi.push(temps[j]);
}
}
}
this.elements=linshi;
return this;
}
//封裝動畫
Base.prototype.animate=function(obj){
for(var i=0;i<this.elements.length;i++){
var elements=this.elements[i];//如果下面直接用this.elements的話，所代表的this物件不同,所以要賦值
var attr = obj['attr'] == 'x' ? 'left' : obj['attr'] == 'y' ? 'top' :
obj['attr'] == 'w' ? 'width' : obj['attr'] == 'o' ? 'opacity' : obj['attr']
== 'h' ? 'height' : obj['attr']!=undefined ? obj['attr'] : 'left';//可選，left和top兩種值，不傳遞則預設left
var step = obj['step'] != undefined ? obj['step'] : 20;//可選，預設每次執行20畫素
var target = obj['target'];//必須，增量，執行的目標點
var type = obj['type'] == 0 ? 'constant' : obj['type'] == 1 ? 'buffer' : 'buffer';
var start=obj['start']!=undefined ? obj['start'] : attr=='opacity' ? parseFloat(getStyle(elements,attr))*100:
parseInt(getStyle(elements,attr));
var mul=obj['mul'];
if(attr=='opacity'){
elements.style[attr]=start / 100;
}else{
elements.style[attr] = start + 'px';//實現的是點選第二次從start的位置開始
}
if(attr=='opacity' && target < parseFloat(getStyle(elements,attr))*100){
step=-step; //實現透明度漸變的步數
}
else if(target<parseInt(getStyle(elements,attr))){
step=-step;
}
if (mul == undefined) {//這句話當同步動畫變成單獨動畫時，加上這句話有點不明
mul = {};
mul[attr] = target;
}
clearInterval(elements.timer);
//timer前面加上elements,實現了多個物件用不同的定時器,防止了執行錯誤
elements.timer=setInterval(function(){//如果這裡的timer不加var 代表的是window下的屬性
var flag=true;
for(var i in mul){
attr=i=='y' ? 'height' : i== 'x' ? 'left' : i!=undefined ? i : 'left';
target=mul[i];
if(type=='buffer'){
/*step = attr == 'opacity' ? (target - parseFloat(getStyle(element, attr)) * 100) / speed :
(target - parseInt(getStyle(element, attr))) / speed;*/
//直接這樣判斷會更簡潔省略了if語句
if(attr=='opacity'){
step=(target-parseFloat(getStyle(elements,attr))*100) / 6;//實現了漸變顏色的緩衝運動
step=step>0 ? Math.ceil(step) : Math.floor(step);
}else{
step=(target-parseInt(getStyle(elements,attr))) / 6;
//step=step>0 ? Math.ceil(step) : step<0 ? Math.floor(step) : Math.floor(step); //這種判斷不好
step=step>0 ? Math.ceil(step) : Math.floor(step);
}
}
/*
問題1：多個動畫執行了多個列隊動畫，我們要求不管多少個動畫只執行一個列隊動畫
問題2：多個動畫數值差別太大，導致動畫無法執行到目標值，原因是定時器提前清理掉了
解決1：不管多少個動畫，只提供一次列隊動畫的機會
解決2：多個動畫按最後一個分動畫執行完畢後再清理即可
*/
if(attr=='opacity'){
if(step==0){
setOpacity();
}
else if(step>0&&Math.abs(parseFloat(getStyle(elements,attr))*100 - target ) <= step){
setOpacity();
}
else if(step<0&&(parseFloat(getStyle(elements,attr))*100 - target ) <= Math.abs(step)){
setOpacity();
}
else{
elements.style[attr] = (parseFloat(getStyle(elements, attr))*100 + step) / 100;
}
if (parseInt(target) != parseInt(parseFloat(getStyle(elements, attr)) * 100)) flag = false;
}else{
if(step==0){
setTarget();
}
else if(step>0&&Math.abs(parseInt(getStyle(elements,attr)) - target ) <= step){
setTarget();
}
else if(step<0&&(parseInt(getStyle(elements,attr)) - target ) <= Math.abs(step)){
setTarget();
}
else{
elements.style[attr] = parseInt(getStyle(elements, attr)) + step + 'px';
}
if(target !=parseInt(getStyle(elements, attr))) flag=false;
}
}
if(flag){
clearInterval(elements.timer);//解決了問題1,2
if(obj.fn!=undefined) obj.fn(); //實現了動畫列隊，動畫挨個播放
}
},50)
function setTarget(){
elements.style[attr]=target+'px';
}
function setOpacity(){
elements.style[attr]=target / 100;
clearInterval(elements.timer);
if(obj.fn!=undefined) obj.fn();//在定時器末未新增結束運動時的函式
}
}
return this;
}
Base.prototype.css=function(attr,value){
for(var i=0;i<this.elements.length;i++){
if(arguments.length==1){
//return this.elements[i].style[attr];//這種方法只能獲取到標籤裡面的行內屬性,不能獲取到css表裡的樣式
//return this.elements[i].currentStyle[attr];
return getStyle(this.elements[i], attr);//window下的方法 以rgb的形式返回顏色、可以獲取css表中的樣式
}
this.elements[i].style[attr]=value;
}
return this;
}
//設定獲取css樣式表中的樣式
function getStyle(duixiang,attr){
return window.getComputedStyle(duixiang,null)[attr];
}
//新增class樣式
Base.prototype.addClass=function(className){
for(var i=0;i<this.elements.length;i++){
//if (!this.elements[i].className.match(new RegExp('(\\s|^)' +className +'(\\s|$)'))) {
if(!this.elements[i].className.match(new RegExp(className,'ig'))){//和上面的表示式一樣，就是防止衝覅新增同樣的class樣式
this.elements[i].className+=' '+className;//這裡如果只用=的話，會直接把className的值給替換掉,所以用+=
}
}
return this;
}
//移除class樣式
Base.prototype.removeClass=function(className){
for(var i=0;i<this.elements.length;i++){
if(this.elements[i].className.match(new RegExp(className,'ig'))){
this.elements[i].className=this.elements[i].className.replace(new RegExp(className,'ig'),' ');
//為什麼這裡直接這樣不行this.elements[i].className.replace(new RegExp(className,'ig'),' ');
}
}
return this;
}
//新增link或style的CSS規則 基本不會用
Base.prototype.addRule = function (num, selectorText, cssText, position) {
var sheet = document.styleSheets[num];
if (typeof sheet.insertRule != 'undefined') {//W3C
sheet.insertRule(selectorText + '{' + cssText + '}', position);
} else if (typeof sheet.addRule != 'undefined') {//IE
sheet.addRule(selectorText, cssText, position);
}
return this;
}
//移除link或style的CSS規則基本不會用
Base.prototype.removeRule = function (num, index) {
var sheet = document.styleSheets[num];
if (typeof sheet.deleteRule != 'undefined') {//W3C
sheet.deleteRule(index);
} else if (typeof sheet.removeRule != 'undefined') {//IE
sheet.removeRule(index);
}
return this;
}
//獲取某個節點並返回他的節點物件
Base.prototype.getElements=function(num){
return this.elements[num];
}
//獲取當前元素節點的下一個元素節點
Base.prototype.next = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i] = this.elements[i].nextSibling;
if (this.elements[i] == null) throw new Error('找不到下一個同級元素節點！');
if (this.elements[i].nodeType == 3) this.next();
}
return this;
};
Base.prototype.eq=function(num){
var element=this.elements[num];
this.elements=[];
this.elements[0]=element;
return this;
}
Base.prototype.click=function (fn){//設定滑鼠點選事件
for(var i=0;i<this.elements.length;i++){
this.elements[i].addEventListener('click',fn,false);
}
return this;
}
//設定滑鼠移入移出事件
Base.prototype.hover=function(over,out){
for(var i=0;i<this.elements.length;i++){
//this.elements[i].onmouseover=over;
//this.elements[i].onmouseout=out;
this.elements[i].addEventListener('mouseover',over,false);
this.elements[i].addEventListener('mouseout',out,false);
}
}
//設定顯示
Base.prototype.show=function(){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.display='block';
}
return this;
}
//設定隱藏
Base.prototype.hide=function(){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.display='none';
}
return this;
}
//設定物體居中
Base.prototype.center=function(width,height){
var top=(document.documentElement.clientHeight - height)/2;
var left=(document.documentElement.clientWidth - width)/2;
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.top=top+'px';
this.elements[i].style.left=left+'px';
}
return this;
}
//設定鎖屏遮罩
Base.prototype.lock=function(){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style.width=window.innerWidth+'px';
this.elements[i].style.height=window.innerHeight+'px';
this.elements[i].style.display='block';
document.documentElement.style.overflow='hidden';//使視窗拖拽不會拖到滾動條裡面
//scrollTop();//這裡如果直接用,會在遮罩的瞬間使scrollTop=0,當滾動條滾動時，就失去效果
//所以這個函式要寫在scroll事件下才有效果
window.addEventListener('scroll',scrollTop,false);
}
return this;
}
//取消遮罩
Base.prototype.unlock = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i].style.display = 'none';
document.documentElement.style.overflow = 'auto';
window.removeEventListener('scroll',scrollTop,false);
//scrollTop()=null;
}
return this;
}
Base.prototype.html=function(str){//同時實現了獲取innerHTML和設定innerHTML
for(var i=0;i<this.elements.length;i++){
if(arguments.length==0){//就是說如果函式傳進來的引數為0
return this.elements[i].innerHTML;
}
this.elements[i].innerHTML=str;
}
return this;
}
//觸發瀏覽器視窗事件
Base.prototype.resize = function (fn) {
for(var i=0;i<this.elements.length;i++){
var _this=this.elements[i];
//window.onresize =function(){
window.addEventListener('resize',function(){
fn();
if(_this.offsetLeft>window.innerWidth - _this.offsetWidth){
_this.style.left=window.innerWidth - _this.offsetWidth+'px';
}
if(_this.offsetTop>window.innerHeight - _this.offsetHeight){
_this.style.top=window.innerHeight - _this.offsetHeight+'px';
}
},false)
};
return this;
}
//外掛入口把外掛單獨寫成一個js檔案如果想用哪個外掛就直接在html檔案中載入相應外掛的js檔案即可
Base.prototype.extend=function(name,fn){
Base.prototype[name]=fn;
}
//讓滾動條等於0//這裡就是解決登入框隨滾動條的滑動而滑動
function scrollTop() {
document.documentElement.scrollTop = 0;//谷歌不支援
document.body.scrollTop = 0;//谷歌支援
}
//切換效果
Base.prototype.toggle=function(){
for(var i=0;i<this.elements.length;i++){
(function(elements,args){
var count=0;
elements.addEventListener('click',function(){
args[count++].call(this);
if(count>=args.length) count=0;
},false);
})(this.elements[i],arguments);//這裡是函式的傳值
}
return this;
}
//跨瀏覽器獲取滾動條高度
function getScroll(){
return {
top:document.documentElement.scrollTop ||document.body.scrollTop,//這裡返回的是個對像，要在第一個後邊加逗號
left:document.documentElement.scrollLeft ||document.body.scrollLeft
}
}
//這部分是ava-drag.js檔案
$().extend('drag',function(){//這裡傳進來的是一個數組,裡面包含能被拖動的標籤物件,傳幾個資料長度就為幾
var tags=arguments;
for(var i=0;i<this.elements.length;i++){
this.elements[i].addEventListener('mousedown',function(e){
//alert(odiv.offsetLeft);//獲取的是login物件所在的框最左邊到螢幕左邊的位置
//alert(e.clientX);//獲取的是點選的位置到螢幕左邊的位置
var chaLeft=e.clientX - this.offsetLeft;//這裡的this代表的是this.elements[i]
var chaTop=e.clientY - this.offsetTop;
var _this = this;
var flag=false;
//alert($().getTagName('h2').getElements(0));
for(var i=0;i<tags.length;i++){
if(e.target==tags[i]){
flag=true;
break;
}
}
if(flag){
window.addEventListener('mousemove',move,false);
window.addEventListener('mouseup',up,false);
}
function move(e){
var left=e.clientX - chaLeft;
var top=e.clientY - chaTop;
if(left<0){ //這兩個if條件語句約束了,登入框不能拉倒邊界外邊
left=0;
}else if(left>window.innerWidth - _this.offsetWidth){
left=window.innerWidth - _this.offsetWidth;
}
if(top<0){
top=0;
}else if(top>window.innerHeight - _this.offsetHeight){
top=window.innerHeight - _this.offsetHeight;
}
_this.style.left=left+'px';
_this.style.top=top+'px';
}
function up(){
window.removeEventListener('mousemove',move,false);
}
},false)
}
return this;
})