JS面向對象2-綜合案例
綜合案例
圖片放大鏡效果
子集影響父級的bugcss
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 {width: 200px; height: 200px; background: red;}
#div2 {width: 100px; height: 100px; background: yellow;}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function(){
document.title += '1';
}
oDiv.onmouseout = function(){
document.title += '2';
}
// 會發現鼠標移到黃色div上的時候，title部分會一會兒出現21，這個2是從div1移到div2觸發的，而1是經過div2冒泡到div1上觸發的
}
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
上述問題的解決方式(1)html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 {width: 200px; height: 200px; background: red;}
#div2 {width: 100px; height: 100px; background: yellow;}
</style>
<script>
// 解決方案：
// 1. js： 用onmouseener和onmouseleave事件替代onmouseover和onmouseout。onmouseenter和onmouseleave事件，子級不會影響到父級
// 2. css
window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseenter = function(){
document.title += '1';
}
oDiv.onmouseleave = function(){
document.title += '2';
}
}
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
上述問題的解決方式(2)json
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1 {width: 200px; height: 200px; background: red;}
#div2 {width: 100px; height: 100px; background: yellow;}
</style>
<script>
// 解決方案：
// 1. js： 用onmouseener和onmouseleave事件替代onmouseover和onmouseout。onmouseenter和onmouseleave事件，子級不會影響到父級
// 上述兩個事件有兼容性問題，可是兼容性問題不大，並且作兼容很是的麻煩 兼容方式以下：
// 2. css
window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function(ev){
var ev = ev || window.event;
var a = this, b = ev.relatedTarget; //ev.relatedTarget是相對目標，能夠理解爲以前的目標
/*
1. 從body移到div1：a - div1；b - body
2. 從div1移到div2：a - div1；b - div1
3. 從div2移到div1：a - div1；b - div2
*/
if(!elContains(a, b) && a!=b){
document.title += '1';
}
}
oDiv.onmouseout = function(ev){
var ev = ev || window.event;
var a = this, b = ev.relatedTarget;
if(!elContains(a, b) && a!=b){
document.title += '2';
}
}
}
function elContains(a, b){ //判斷兩個元素是不是嵌套關係，看a是否包含b
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
}
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
圖片的放大鏡效果框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片放大鏡效果</title>
<style>
html, body {margin: 0; padding: 0;}
#div1 {width: 180px; height: 180px; overflow: hidden; position: relative;}
#div1 span {width: 100px; height: 100px; background: yellow; opacity: 0.5; filter: alpha(opacity=50); position: absolute; left: 0; top: 0; display: none;}
#mask {width: 180px; height: 180px; background: red; position: absolute; left: 0; top: 0; opacity: 0; filter: alpha(oapcity=0);}
#div2 {width: 500px; height: 500px; position: absolute; left: 250px; top: 50px; overflow: hidden;}
#div2 img {position: absolute; left: 0; top: 0;}
</style>
<script>
//這裏的onmouseover和onmouseout是用過CSS方式解決的問題，方法是添加了一個透明的層
window.onload = function(){
var oDiv = document.getElementById('div1');
var oSpan = oDiv.getElementsByTagName('span')[0];
var oDiv2 = document.getElementById('div2');
var img2 = oDiv2.getElementsByTagName('img')[0];
oDiv.onmouseenter = function(){
oSpan.style.display = 'block';
}
oDiv.onmouseleave = function(){
oSpan.style.display = 'none';
}
oDiv.onmousemove = function(ev){
var ev = ev || window.event;
var L = ev.clientX - oDiv.offsetLeft - oSpan.offsetWidth / 2;
var T = ev.clientY - oDiv.offsetTop - oSpan.offsetHeight / 2;
if(L < 0){
L = 0;
} else if (L > oDiv.offsetWidth - oSpan.offsetWidth){
L = oDiv.offsetWidth - oSpan.offsetWidth;
}
if(T < 0){
T = 0;
} else if (T > oDiv.offsetHeight - oSpan.offsetHeight){
T = oDiv.offsetHeight - oSpan.offsetHeight;
}
oSpan.style.left = L + 'px';
oSpan.style.top = T + 'px';
var scaleX = L / (oDiv.offsetWidth - oSpan.offsetWidth);
var scaleY = T / (oDiv.offsetHeight - oSpan.offsetHeight);
img2.style.left = -scaleX * (img2.offsetWidth - oDiv2.offsetWidth) + 'px';
img2.style.top = -scaleY * (img2.offsetHeight - oDiv2.offsetHeight) + 'px';
}
}
</script>
</head>
<body>
<div id="div1">
<img src="b2.jpg">
<span></span>
<div id="mask"></div>
</div>
<div id="div2">
<img src="b1.jpg">
</div>
</body>
</html>
蘋果菜單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>蘋果菜單</title>
<script>
// Math.pow(3, 2); //3的平方
// Math.pow(2, 3); //2的立方
// Math.sqrt(9); //9的開方
// Math.pow(9, 1/3); //9的開立方
</script>
<style>
html, body {margin: 0; padding: 0;}
#div1 img {width: 64px;}
#div1 {width: 100%; height: auto; position: absolute; bottom: 0; text-align: center;}
input {width: 300px;}
</style>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
var oDiv= document.getElementById('div1');
var aImg = oDiv.getElementsByTagName('img');
document.onmousemove = function(ev){
var ev = ev || window.event;
for(var i=0; i<aImg.length; i++){
var x = aImg[i].offsetLeft + aImg[i].offsetWidth/2;
var y = aImg[i].offsetTop + aImg[i].offsetHeight/2 + oDiv.offsetTop;
var a = ev.clientX - x;
var b = ev.clientY - y;
var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
var scale = 1 - c/300;
if(scale < 0.5){
scale = 0.5;
}
aInput[i].value = 'x軸：' + x + '，Y軸：' + y + '，與鼠標距離：' + c;
aImg[i].style.width = scale * 128 + 'px';
aImg[i].style.height = scale * 128 + 'px';
}
}
}
</script>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<div id="div1">
<img src="images/1.png">
<img src="images/2.png">
<img src="images/3.png">
<img src="images/4.png">
<img src="images/5.png">
</div>
</body>
</html>
照片牆效果
可拖拽換爲dom
可隨機排序佈局
找最小值和位置this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>找最小值和位置</title>
<script>
var arr = [34, 71, 8, 934, 10];
var value = 9999;
var index = -1;
for(var i=0; i<arr.length; i++){
if(arr[i]< value){
value = arr[i];
index = i;
}
}
alert('最小值：' + value + '，位置：' + index);
</script>
</head>
<body>
</body>
</html>
照片牆的實現spa
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>妙味照片牆效果</title>
<style>
html, body {margin: 0; padding: 0;}
#ul1 {width: 660px; position: relative; margin: 10px auto;}
li {width: 200px; height: 150px; margin: 10px; float: left; list-style: none;}
</style>
<script>
window.onload = function(){
//佈局轉換，將浮動佈局轉成定位佈局
var aLi = document.getElementsByTagName('li');
var izIndex = 2;
var arr = [];
var oInput = document.getElementById('input1');
for(var i=0; i<aLi.length; i++){
arr.push([aLi[i].offsetLeft, aLi[i].offsetTop]);
}
for(var i=0; i<aLi.length; i++){
aLi[i].style.position = 'absolute';
aLi[i].style.left = arr[i][0] + 'px';
aLi[i].style.top = arr[i][1] + 'px';
aLi[i].style.margin = 0; //去掉影響定位的值。例如margin、padding都已經算到left和top裏面了，因此不須要再算進去
}
for(var i=0; i<aLi.length; i++){
aLi[i].index = i;
drag(aLi[i]);
}
oInput.onclick = function(){
var randomArr = [0, 1, 2, 3, 4, 5, 6, 7, 8];
randomArr.sort(function(n1, n2){
return Math.random() - 0.5;
})
for(var i=0; i<aLi.length; i++){
startMove(aLi[i], {left: arr[randomArr[i]][0], top: arr[randomArr[i]][1]});
aLi[i].index = randomArr[i];
}
}
function drag(obj){
var disX = 0;
var disY = 0;
obj.onmousedown = function(ev){
var ev = ev || window.event;
obj.style.zIndex = izIndex ++;
disX = ev.clientX - obj.offsetLeft;
disY = ev.clientY - obj.offsetTop;
document.onmousemove = function(ev){
var ev = ev || window.event;
obj.style.left = ev.clientX - disX + 'px';
obj.style.top = ev.clientY - disY + 'px';
// for(var i=0; i<aLi.length; i++){
// if(pz(obj, aLi[i]) && obj != aLi[i]){
// aLi[i].style.border = '2px solid red';
// } else {
// aLi[i].style.border = '';
// }
// }
var nL = nearLi(obj);
for(var i=0; i<aLi.length; i++){
aLi[i].style.border = '';
}
if(nL){
nL.style.border = '2px solid red';
}
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
var nL = nearLi(obj);
var tmp = 0;
if(nL){
startMove(nL, {left: arr[obj.index][0], top: arr[obj.index][1]});
startMove(obj, {left: arr[nL.index][0], top: arr[nL.index][1]});
nL.style.border = '';
tmp = obj.index;
obj.index = nL.index;
nL.index = tmp;
} else {
startMove(obj, {left: arr[obj.index][0], top: arr[obj.index][1]});
}
}
return false;
}
}
function nearLi(obj){
var value = 9999;
var index = -1;
for(var i=0; i<aLi.length; i++){
if(pz(obj, aLi[i]) && obj != aLi[i]){
var c = jl(obj, aLi[i]);
if(c<value){
value = c;
index = i;
}
}
}
if(index != -1){
return aLi[index];
} else {
return false;
}
}
function jl(obj1, obj2){
var a = obj1.offsetLeft - obj2.offsetLeft;
var b = obj1.offsetTop - obj2.offsetTop;
return Math.sqrt(a*a + b*b);
}
function pz(obj1, obj2){
var L1 = obj1.offsetLeft;
var R1 = obj1.offsetLeft + obj1.offsetWidth;
var T1 = obj1.offsetTop;
var B1 = obj1.offsetTop + obj1.offsetHeight;
var L2 = obj2.offsetLeft;
var R2 = obj2.offsetLeft + obj2.offsetWidth;
var T2 = obj2.offsetTop;
var B2 = obj2.offsetTop + obj2.offsetHeight;
if(R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2){ //碰不到的狀況
return false;
} else { //其他都是碰到的狀況
return true;
}
}
//如下是運動框架move.js的代碼
function css(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}
function startMove(obj, json, fn){
clearInterval(obj.iTimer);
var iCur = 0;
var iSpeed = 0; //速度初始化
obj.iTimer = setInterval(function(){
var iBtn = true;
for(var attr in json){
var iTarget = json[attr];
if(attr == 'opacity'){
iCur = Math.round(css(obj, 'opacity') * 100);
} else {
iCur = parseInt(css(obj, attr));
}
iSpeed = (iTarget - iCur) / 8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur != iTarget){
iBtn = false;
if(attr == 'opacity'){
obj.style.opacity = (iCur + iSpeed) / 100;
obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
} else {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
}
if(iBtn){
clearInterval(obj.iTimer);
fn && fn.call(obj);
}
}, 30);
}
}
</script>
</head>
<body>
<input type="button" value="隨機" id="input1">
<ul id="ul1">
<li><img src="photo/1.jpg"></li>
<li><img src="photo/2.jpg"></li>
<li><img src="photo/3.jpg"></li>
<li><img src="photo/4.jpg"></li>
<li><img src="photo/5.jpg"></li>
<li><img src="photo/1.jpg"></li>
<li><img src="photo/2.jpg"></li>
<li><img src="photo/3.jpg"></li>
<li><img src="photo/4.jpg"></li>
</ul>
</body>
</html>
相關文章
- 1. js面向對象實例
- 2. JS面向對象實例
- 3. js 面向對象例子
- 4. JS面向對象例子
- 5. 面向對象（OOP）和THIS綜合
- 6. Python之面向對象（綜合練習）
- 7. 面向Python，面向對象（基礎4（手機對象案例））
- 8. 面向對象（OOP）——面向對象的封裝案例（3）
- 9. js面向對象
- 10. JS 面向對象
- 更多相關文章...
- • PHP 面向對象 - PHP教程
- • Lua 面向對象 - Lua 教程
- • PHP Ajax 跨域問題最佳解決方案
- • 常用的分佈式事務解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. eclipse設置粘貼字符串自動轉義
- 2. android客戶端學習-啓動模擬器異常Emulator: failed to initialize HAX: Invalid argument
- 3. android.view.InflateException: class com.jpardogo.listbuddies.lib.views.ListBuddiesLayout問題
- 4. MYSQL8.0數據庫恢復 MYSQL8.0ibd數據恢復 MYSQL8.0恢復數據庫
- 5. 你本是一個肉體，是什麼驅使你前行【1】
- 6. 2018.04.30
- 7. 2018.04.30
- 8. 你本是一個肉體，是什麼驅使你前行【3】
- 9. 你本是一個肉體，是什麼驅使你前行【2】
- 10. 【資訊】LocalBitcoins達到每週交易比特幣的7年低點
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. js面向對象實例
- 2. JS面向對象實例
- 3. js 面向對象例子
- 4. JS面向對象例子
- 5. 面向對象（OOP）和THIS綜合
- 6. Python之面向對象（綜合練習）
- 7. 面向Python，面向對象（基礎4（手機對象案例））
- 8. 面向對象（OOP）——面向對象的封裝案例（3）
- 9. js面向對象
- 10. JS 面向對象