css案例（三）

最新推荐文章于 2024-05-21 13:52:06 发布

原创最新推荐文章于 2024-05-21 13:52:06 发布 · 296 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

10 篇文章

订阅专栏

苹果菜单案例：

*{margin:0;padding:0;list-style: none;}
.waper{width: 100%;position: absolute;bottom:0; text-align: center;}
.waper img{width: 50px;}

window.onload = function(){
    var oBox = document.getElementById('box');
    var aImg = document.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 + oBox.offsetTop;

            var b = ev.clientX - x;
            var a = ev.clientY - y;
            var c = Math.sqrt(Math.pow(b,2) + Math.pow(a,2));
            var scale = 1 - c/200;
            if(scale < 0.5){
                scale = 0.5;
            }
            aImg[i].style.width = scale * 100 +"px";
            aImg[i].style.height = scale * 100 +"px";
        }
    }
}

<div class="waper" id="box">
    <img src="10img/icon1.png">
    <img src="10img/icon2.png">
    <img src="10img/icon3.png">
    <img src="10img/icon4.png">
    <img src="10img/icon5.png">
</div>

圆周运动案例：

#dot{width: 10px;height: 10px;border-radius: 50%;background: red;position: absolute;left: 800px;top: 300px;}
.box{border: 1px solid #000;position:absolute;}

window.onload = function(){
    var oDot = document.getElementById('dot');
    var r = 100;
    var x = 700;
    var y = 300;
    var num = 0;
    setInterval(function(){
        num++;
        var a = Math.sin(num*Math.PI/180) * r;
        var b = Math.cos(num*Math.PI/180) * r;
        oDot.style.left = x + b + "px";
        oDot.style.top = y + a + "px";
        var oBox = document.createElement("div");   // 创建一个新的div
        oBox.className = "box";
        document.body.appendChild(oBox);
        oBox.style.left = oDot.offsetLeft + "px";
        oBox.style.top = oDot.offsetTop + "px";
    },10);
}

<div id="dot"></div>

三维的圆周运动

#dot{width: 20px;height: 20px;border-radius: 50%;background: red;position: absolute;left: 800px;top: 300px;}
.box{border: 1px solid #000;position:absolute;}

window.onload = function(){
    var oDot = document.getElementById('dot');
    var r = 100;
    var x = 700;
    var y = 300;
    var num = 0;
    setInterval(function(){
        num++;
        var a = Math.sin(num*Math.PI/180) * r;
        var b = Math.cos(num*Math.PI/180) * r;
        oDot.style.left = x + b + "px";
        oDot.style.width = a/100*10 + 20 + "px";
        oDot.style.height = a/100*10 + 20 + "px";
    },10);
}

<div id="dot"></div>

265网站实例：

*{margin:0;padding:0;list-style: none;}
#box{width:171px;height:68px;position:absolute;top:200px;left: 300px;background: url(13img/bg.png) no-repeat 0 0;}
#dot1{border:2px solid #000;border-radius: 50%;position: absolute;left: 118px;top: 33px;}
#dot2{border:2px solid #000;border-radius: 50%;position: absolute;left: 140px;top: 33px;}

var oBox = document.getElementById('box');
var oDot1 = document.getElementById('dot1');
var oDot2 = document.getElementById('dot2');
var r = 4  // dot移动的范围
var L1 = 118;
var T1 = 33;
var L2 = 140;
var T2 = 33;
document.onmousemove = function(ev){
    var ev = ev || window.event;
    changeFn(oDot1,ev.clientX,ev.clientY,L1,T1);
    changeFn(oDot2,ev.clientX,ev.clientY,L2,T2);
    function changeFn(obj,x,y,l,t){
        var changeX = 0;
        var changeY = 0;
        var b = Math.abs( x - ( obj.offsetLeft + obj.parentNode.offsetLeft) );
        var a = Math.abs( y - ( obj.offsetTop + obj.parentNode.offsetTop) );
        if( x > obj.offsetLeft + obj.parentNode.offsetLeft && y < obj.offsetTop + obj.parentNode.offsetTop){        // 右上
            var changeX = Math.sin(Math.atan(b/a)) * r; 
            var changeY = Math.cos(Math.atan(b/a)) * -r; 
        }else if(x > obj.offsetLeft + obj.parentNode.offsetLeft && y > obj.offsetTop + obj.parentNode.offsetTop){       // 右下
            var changeX = Math.sin(Math.atan(b/a)) * r; 
            var changeY = Math.cos(Math.atan(b/a)) * r; 
        }else if(x < obj.offsetLeft + obj.parentNode.offsetLeft && y > obj.offsetTop + obj.parentNode.offsetTop){       // 左下
            var changeX = Math.sin(Math.atan(b/a)) * -r; 
            var changeY = Math.cos(Math.atan(b/a)) * r; 
        }else if(x < obj.offsetLeft + obj.parentNode.offsetLeft && y < obj.offsetTop + obj.parentNode.offsetTop){       // 左上
            var changeX = Math.sin(Math.atan(b/a)) * -r; 
            var changeY = Math.cos(Math.atan(b/a)) * -r; 
        }
        obj.style.left = l + changeX + "px";
        obj.style.top = t + changeY + "px";
    }
}

<div id="box">
    <div id="dot1"></div>
    <div id="dot2"></div>
</div>

sin函数的轨迹案例：

#box{width: 5px;height: 5px;background: red;position:absolute;top: 200px;left: 100px;}
.box{border:1px solid #000;position:absolute;}

var oBox = document.getElementById('box');
var T = 200;
var L = 100;
var val = 70;
var n = 0;
setInterval(function(){
    n++;
    oBox.style.left = L + (n*Math.PI/180)*val + "px";
    oBox.style.top = T - Math.sin(n*Math.PI/180)*val + "px";
    var oDiv = document.createElement('div');
    oDiv.className = "box";
    document.body.appendChild(oDiv);
    oDiv.style.left = oBox.offsetLeft + "px";
    oDiv.style.top = oBox.offsetTop + "px";
},10);

<div id="box"></div>