参考内容:妙味课堂
<style>
#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;}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var oSpan = oDiv.getElementsByTagName('span')[0];
oDiv.onmouseover = function(){
oSpan.style.display = 'block';
};
oDiv.onmouseout = function(){
oSpan.style.display = 'none';
};
oDiv.onmousemove = function(ev){
var ev = ev || window.event;
//让oSpan相对鼠标向左上角偏移oSpan的一半
oSpan.style.left = ev.clientX - oDiv.offsetLeft - oSpan.offsetWidth/2 + 'px';
oSpan.style.top = ev.clientY - oDiv.offsetTop - oSpan.offsetHeight/2 + 'px';
};
};
</script>
<body>
<div id="div1">
<img src="b2.jpg">
<span></span>
</div>
</body>
//不处理下面所述问题,低版本IE浏览器将会出现子级元素闪烁状态,效果不好
//测试 子级影响父级
<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');
/*
onmouseover,momouseout存在的问题是,当鼠标进入子级元素时,会触发离开父级和再次进入父级
事件;当鼠标离开子级元素时,会再次触发离开父级及进入父级事件。
*/
oDiv.onmouseover = function(){
console.log('1') ;
};
oDiv.onmouseout = function(){
console.log ('2');
};
};
</script>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
//--------------------------------------------------------
//解决方案:
/*1.js : onmouseenter onmouseleave ( 子级不会影响到父级 )
最早 ie firefox chrome , 做兼容非常的麻烦 */
window.onload = function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseenter = function(){
console.log('1');
};
oDiv.onmouseleave = function(){
console.log('2');
};
};
//兼容IE
window.onload = function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
oDiv1.onmouseover = function(ev){
var ev = ev || window.event;
var a = this, b = ev.relatedTarget;
//console.log(a.innerHTML);
//console.log(b.innerHTML);
if( !elContains(a,b) && a!=b ){
document.title += '1';
}
};
oDiv1.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){ //判断两个元素是否是嵌套关系
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(b) & 16);
}
//2.css 加一个层
<style>
#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;}
#mark{ width:180px; height:180px; background:red; position:absolute; left:0; top:0;opacity:0; filter:alpha(opacity=0);}
#div2{ width:500px; height:500px; position:absolute; left:250px; top:50px; overflow:hidden;}
#div2 img{ position:absolute; left:0; top:0;}
</style>
<script>
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.onmouseover = function(){
oSpan.style.display = 'block';
};
oDiv.onmouseout = 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>
<body>
<div id="div1">
<img src="b2.jpg">
<span></span>
<div id="mark"></div>
</div>
<div id="div2">
<img src="b1.jpg">
</div>
</body>
//苹果菜单
<style>
*{ margin:0; padding:0;}
#div1{ width:100%; height:auto; position:absolute; bottom:0; text-align:center;}
#div1 img{ width:64px;}
</style>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
var oDiv = document.getElementById('div1');
var aImg = oDiv.getElementsByTagName('img');
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;
aInput[i].value = 'X轴:'+x+',Y轴:' + y;
}
};
</script>
<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>
//-------------------------------------------------------------------
<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 = scale;
aImg[i].style.width = scale * 128 + 'px';
aImg[i].style.height = scale * 128 + 'px';
}
};
};
</script>
//照片墙
//实现照片的拖拽
<style>
*{ 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 = [];
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;
}
for(var i=0;i<aLi.length;i++){
drag(aLi[i]);
}
function drag(obj){
var disX = 0;
var disY = 0;
obj.onmousedown = function(ev){
obj.style.zIndex = izIndex++;
var ev = ev || window.event;
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';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
}
};
</script>
<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>
//--------------------------------------------------
//移动后,找出与移动照片重叠的其它照片
<script>
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var izIndex = 2;
var arr = [];
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;
}
for(var i=0;i<aLi.length;i++){
drag(aLi[i]);
}
function drag(obj){
var disX = 0;
var disY = 0;
obj.onmousedown = function(ev){
obj.style.zIndex = izIndex++;
var ev = ev || window.event;
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 red solid';
}
else{
aLi[i].style.border = '';
}
}
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
}
//判断是否重叠
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;
}
}
};
</script>
//--------------------------------------------------------------
//找出距离最近且相交的那张照片
<script>
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var izIndex = 2;
var arr = [];
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;
}
for(var i=0;i<aLi.length;i++){
drag(aLi[i]);
}
function drag(obj){
var disX = 0;
var disY = 0;
obj.onmousedown = function(ev){
obj.style.zIndex = izIndex++;
var ev = ev || window.event;
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++){
aLi[i].style.border = '';
}
var nL = nearLi(obj);
if(nL){
nL.style.border = '2px red solid';
}
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
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;
}
}
};
</script>
//----------------------------------------------------------------
//定义移动函数move.js
// JavaScript Document
//前往目的地的动作函数
function startMove(obj,json,endFn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var bBtn = true;
for(var attr in json){
//声明当前变量此时所处的状态属性,通过getStyle()获取属性值
var iCur = 0;
if(attr == 'opacity'){
if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
/*过滤掉Math.round(parseFloat(getStyle(obj,attr))*100)=0的情况,不然的话,
iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100恒等于100
而不会出现iCur=0的情况。
*/
iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
}
else{
iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
}
}
else{
iCur = parseInt(getStyle(obj,attr)) || 0;
}
//定义变化,移动速度
var iSpeed = (json[attr] - iCur)/8;
iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(iCur!=json[attr]){
//类似开关,json[attr]为目标值
bBtn = false;
}
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
obj.style.opacity = (iCur + iSpeed)/100;
}
else{
obj.style[attr] = iCur + iSpeed + 'px';
}
}
if(bBtn){
clearInterval(obj.timer);
if(endFn){
endFn.call(obj);
}
}
},30);
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}
else{
return getComputedStyle(obj,false)[attr];
}
}
//--------------------------------------------------------------------
<script src="move.js"></script>
<script>
window.onload = function(){
var aLi = document.getElementsByTagName('li');
var izIndex = 2;
var arr = [];
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;
}
for(var i=0;i<aLi.length;i++){
aLi[i].index = i;
drag(aLi[i]);
}
function drag(obj){
var disX = 0;
var disY = 0;
obj.onmousedown = function(ev){
obj.style.zIndex = izIndex++;
var ev = ev || window.event;
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++){
aLi[i].style.border = '';
}
var nL = nearLi(obj);
if(nL){
nL.style.border = '2px red solid';
}
};
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;
}
}
};
</script>
//----------------------------------------------------------------
//随机移动
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];
}
};