综合案例
图片放大镜效果
子集影响父级的bug
<!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)
<!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)
<!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>照片墙效果
可拖拽换为
可随机排序
找最小值和位置
<!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>照片墙的实现
<!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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。