JavaScript基礎（十）動畫、事件委託、3DBanner
動畫、事件委託、3DBanner
動畫
一個簡單的動畫
#box{width <div id="box">盒子</div>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function getStyle(obj, attr){
return obj.currentStyle ? QQ客戶懸浮窗
body{height:2000px;}
#box1{width:100px;height:200px;background:red;position:fixed;top:100px;left:-100px;}
#box2{width:30px;height:65px;background:pink;text-align:center;position:absolute;right:-30px;top:50%;margin-top:-40px;}
<div id="box1">
<div id="box2">QQ客服</div>
</div>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function getStyle(obj, attr){
return obj.currentStyle ? ob.currentStyle[attr] : getComputedStyle(obj)[attr];
}
</script>
<script type="text/javascript">
window.onload = function(){
var oBox1 = $('box1');
oBox1.onmouseover = function(){
// this.style.left = '0';
startRun();
}
oBox1.onmouseout = function(){
// this.style.left = '-100px';
endRun();
}
var timer = null;
// 開始動畫效果
function startRun(){
var target = 0;
var speed = 10;
clearInterval(timer);
timer = setInterval(function(){
//獲取開始位置
var pos = parseInt( getStyle(oBox1, 'left') );
if(pos == target){
clearInterval(timer);
}else{
oBox1.style.left = pos + speed + 'px';
}
},30);
}
// 結束動畫效果
function endRun(){
var target = -100;
var speed = -10;
clearInterval(timer);
timer = setInterval(function(){
//獲取開始位置
var pos = parseInt( getStyle(oBox1, 'left') );
if(pos == target){
clearInterval(timer);
}else{
oBox1.style.left = pos + speed + 'px';
}
},30);
}
}
</script>
動畫封裝
function Run(dom, json, callback){
// 清除以前的動畫
clearInterval(dom.timer);
dom.timer = setInterval(function(){
var flag = true; // 設定標識
// 迴圈所有的動畫屬性
for(var attr in json){
// 獲取開始位置
var pos = null;
if(attr == 'opacity'){// 透明度屬性
pos = getStyle(dom, attr)*100;
}else{// 其他屬性
pos = parseInt( getStyle(dom, attr) ) || 0;
}
// 獲取目標值
var target = json[attr];
// 定義速度，減速運動
var speed = (target - pos) * 0.2;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
if(pos!=target){
if(attr == 'opacity'){
dom.style[attr] = (pos + speed)/100;
}else{
dom.style[attr] = pos + speed + 'px';
}
flag = false;
}
}
if(flag){
// 執行完畢，清除動畫
clearInterval(dom.timer);
// 多個動畫執行，改變this的指標
if(callback){
callback.call(dom);
}
}
},30);
}
#box{width: 100px;height: 100px;background: green;line-height: 100px;text-align: center;color:#fff;opacity: .5;/*IE相容*/filter: alpha(opacity=50)}
<div id="box">盒子</div>
<script type="text/javascript" src="js/run.js"></script>
<script type="text/javascript">
window.onload = function(){
var oBox = $('#box');
oBox.onmouseover = function(){
Run(this, {width: 200, height: 400, lineHeight: 400, opacity: 100});
}
// oBox.onmouseout = function(){
// Run(this, {width: 100, height: 100, lineHeight: 100});
// }
}
</script>
案例-Banner輪播圖
焦點淡入淡出
* {padding: 0;margin: 0px;}
ul li {list-style:none;float:left;}
#box {width: 700px;margin: 50px auto;overflow: hidden;position: relative;}
#imgbox {width: 1000%;height: 300px;}
#imgbox li {opacity: 0;position: absolute;top: 0;left: 0;}
#imgbox li img{width: 700px;height: 300px;}
#list {width: 120px; height: 30px;position: absolute;bottom: 10px;left: 50%;margin-left: -60px;}
#list li {width: 20px;height: 20px;line-height: 20px;background: #000;color: #fff;text-align: center;border-radius: 50%;margin: 5px;cursor: pointer;}
#list .active {background: grey;}
<div id="box">
<ul id="imgbox">
<li style="opacity: 1;">
<img src="img/1.jpg">
</li>
<li>
<img src="img/2.jpg">
</li>
<li>
<img src="img/3.jpg">
</li>
<li>
<img src="img/4.jpg">
</li>
</ul>
<ul id="list">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script type="text/javascript" src="js/run.js"></script>
<script type="text/javascript">
var lis = $('#list').children;
var lisLen = lis.length;
var imgs = $('#imgbox').children;
for(var i=0; i<lisLen; i++){
lis[i].index = i;
lis[i].onmouseover = function(){
for(var i=0; i<lisLen; i++){
lis[i].className = '';
// imgs[i].style.display = 'none';
Run(imgs[i], {opacity: 0})
}
this.className = 'active';
// imgs[this.index].style.display = 'block';
Run(imgs[this.index], {opacity: 100})
}
}
</script>
向上向下
var lis = $('#list').children;
var lisLen = lis.length;
$('#imgbox').innerHTML += $('#imgbox').innerHTML;
var imgs = $('#imgbox').children;
var imgHeight = imgs[0].offsetHeight;
for(var i=0; i<lisLen; i++){
lis[i].index = i;
lis[i].onmouseover = function(){
for(var i=0; i<lisLen; i++){
lis[i].className = '';
}
this.className = 'active';
Run($('#imgbox'), {top: -imgHeight*this.index})
}
}
向左向右
var lis = $('#list').children;
var lisLen = lis.length;
var imgs = $('#imgbox').children;
var imgWidth = imgs[0].offsetWidth;
for(var i=0; i<lisLen; i++){
lis[i].index = i;
lis[i].onmouseover = function(){
for(var i=0; i<lisLen; i++){
lis[i].className = '';
}
this.className = 'active';
Run($('#imgbox'), {left: -imgWidth*this.index})
}
}
無縫自動播放
window.onload = function(){
var lis = $('#list').children;
var lisLen = lis.length;
var imgs = $('#imgbox').children;
var imgWidth = imgs[0].offsetWidth;
var timer = null;
var index = 0;
for(var i=0; i<lisLen; i++){
lis[i].index = i;
lis[i].onmouseover = function(){
for(var i=0; i<lisLen; i++){
lis[i].className = '';
imgs[i].removeAttribute('style');
}
this.className = 'active';
Run($('#imgbox'), {left: -imgWidth*this.index})
index = this.index;
index2 = this
相關推薦
JavaScript基礎（十）動畫、事件委託、3DBanner
動畫、事件委託、3DBanner
動畫
一個簡單的動畫
QQ客戶懸浮窗
動畫封裝
案例-Banner輪播圖
焦點淡入淡出
向上向下
向左向右
無縫自動播放
JavaScript基礎（十五）多型、多繼承、設計模式
多型、多繼承、設計模式
多型
多繼承
單繼承
多繼承
設計模式
簡單工廠
安全工廠
抽象工廠
介面卡模式
多型
多型：同一個方法多種呼叫方式 例如：有一個需
JavaScript基礎（十二）面向物件、ajax
面向物件、ajax
面向物件
面向物件程式設計
new、prototype
案例-面向物件程式設計實現banner圖
包裝物件
Ajax
封裝
jsonp
面向物件
JavaScript基礎（十一）正則表示式、3D拖拽相簿
正則表示式、3D拖拽相簿
正則表示式
需求：找出一串字串中的數字
初識正則表示式
正則表示式-匹配子項
正則表示式-轉義字元
\b應用案例
\1的使用
正則表示式-字符集
正
JavaScript基礎（3）-JS中的面向物件、定時器、BOM、位置資訊
一、建立物件的幾種常用方式、
1、使用Object或物件字面量建立物件；
a、使用Object()內建的建構函式來建立物件，例如：
var student = new Object(); // 建立一個studen
JavaScript基礎（三） 事件
shift 當前 鼠標移動 sub 獲取 以及 dom ner doc 事件流
事件流意味著頁面上不止一個元素可響應相同的事件如：當我們點擊頁面上的按鈕時，實際上我們是點擊了按鈕，以及按鈕的容器——整個頁面。
事件冒泡window ← document ← html ← b
swift基礎（十）：型別檢查操作符is、型別轉換操作符as(包括!及?的區別)、AnyObject和Any型別
參考文件：《The Swift programming
language 中文版 V1.2》
目錄:
1.型別檢查操作符is
2.型別轉換操作符as(包括!及?的區別)
3.AnyObject型別
4.Any型別
//1.型別檢查操作符:is
//用
JavaScript基礎（十三）原型、繼承
原型、繼承
原型prototype
原型鏈
原型的預設方法和屬性
hasOwnProperty
constructor
instanceof
toString
繼承
Javascript基礎（五）:屬性、方法和for迴圈
一、屬性和方法的區別
有很多同學在學習js時分不清屬性和方法，那麼到底怎麼區分兩者呢？
首先，從定義上來看：
屬性：屬性是一個變數，是給設定一個物件的特徵，如寬高、顏色等；
方法：方法是一個函式
Javascript 基礎（一）
個數 復制 oat con test 代碼 轉換成 com ros 彈窗：
alret（“要彈出的內容”）；彈出來之後不點確定網頁不會執行下去
confirm("要彈出的內容");確定對話框，點確定返回True，點取消返回False，可用變量接受
promp
JavaScript基礎（一）
case 一段 基本 doc 什麽 function rac click 基於
JavaScript基礎（一）
什麽是JavaScript
基於頁面的腳本語言
輕量級
可以插入到html中
基本上所有的瀏覽器都支持
和java完全不同
標簽
瀏覽器會執行這個標簽裏
Python 基礎（三）——流程控制之break 、continue 、else
sim 流程 tin rime con python 基礎 完整 .py gpo break
break 語句和 C 中的類似，用於跳出最近的一級 for 或 while 循環。
循環可以有一個 else 子句；它在循環叠代完整個列表（對於 for ）或執行條件為 fals
redis使用基礎（十） ——Redis存儲Session
art 方式 pda 公眾 pub 存儲位置 center eight cal redis使用基礎（十）
——Redis存儲Session
（轉載請附上本文鏈接——linhxx）
一、概述
PHP默認是將session存於服務器的文件中。當並發量大
並發基礎（七） Thread 類的sleep()、yeild()、join()
trac public ron 其它 join() log join方法 args read 1、Thread.sleep(long millis )
sleep( )是一個靜態方法，讓當前正在執行的線程休眠（暫停執行），而且在睡眠的過程是不釋放資源的，保持著鎖。
在睡眠的
Java基礎（十） 面試題
程序員面試 Java基礎 面試題:
wait(),notify(),notifyAll() 這些方法為什麽會定義在Object類中呢?
這些方法好像就屬於線程的方法,但是Thread類中並沒有這些方法,多線程中同步鎖對象:任意的Java類這些方法都和鎖對象有關系,所以定義在Object類面試題:
Java基礎（十）
Java基礎 線程安全 網絡編程 （一）線程安全（1）如何解決多線程的安全問題?校驗一個多線程程序是否有安全問題的隱患的前提條件:1)當前程序是否是多線程環境2)是否有共享數據3)是否有多條語句對共享數據進行操作
看當前案例是否有多線程的安全問題:1)是否是多線程環境 是2)是否有共享數
c++基礎（十）
就是 輸入 進行 沒有 作用 分配內存 under 變量作用域 基於 第四部分：指針與函數
指針作為函數參數：使用指針作為參數的原因：1、需要數據的雙向傳遞；2、需要傳遞一組數據，只傳首地址運行效率比較高。
案例：
#include <iostream>
us
JavaScript基礎（1）
控制 () ava chrome 嵌套 ror 調試 下回 出錯 1. 調試JavaScript
利用Chrome瀏覽器的開發者工具調試JavaScript。
在Chrome瀏覽器中，選擇菜單項“更多工具”——“開發者工具”，打開開發者工具欄，快捷鍵“F12”或“Ctrl+
Web開發——JavaScript基礎（繼承）
ola mas lse for 實現 func doc 閱讀 基礎 當前參考學習《JavaScript語言精粹》
在基於類的語言中，對象是類的實例，並且類可以從另一個類繼承。JavaScript是一門基於原型的語言，這意味著對象直接從其它對象繼承。
1、偽類
當
jQuery（2）動畫和事件
基本動畫
元素.show([speed],[callback])
元素.hide([speed],[callback])
元素.toggle([speed],[callback])
元素.slideDown([speed],[callback])
元素.slideUp([speed],[callba