柳意梧情

心在哪里收获就在哪里
加载
首页 » 建站教程 » HTML5网状焦点悬停放大特效代码

HTML5网状焦点悬停放大特效代码

HTML5网状焦点悬停放大特效<a href='https://blog.liuyiwuqing.cn/tag/%E4%BB%A3%E7%A0%81' target=_blank title='进入代码相关页面' style='color:#6F8EC5;font-weight: bold;padding: 0 3px 0 3px;'>代码</a>.png

下面是HTML代码部分
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5网状焦点悬停放大特效</title>

<style>
body{ margin: 0; overflow: hidden; }
canvas{ background: #000; width: 100vw; height: 100vh; }
</style>

</head>
<body>

<canvas id="stage"></canvas>

<script>
/*******************************************************************************
    Necessary Variables
*******************************************************************************/

var stage        = document.querySelector('#stage'),
    cb           = stage.getBoundingClientRect(),
    ctx          = stage.getContext('2d'),
    ratio        = window.devicePixelRatio || 1,
    mouse        = {x: 0, y: 0},
    dots         = [],
    wide         = 36,
    high         = wide/2.2,
    size         = 30,
    padding      = 50


/*******************************************************************************
    Events
*******************************************************************************/

window.onmousemove = function(e){
    mouse.x = e.pageX * ratio;
    mouse.y = e.pageY * ratio;
}

window.onresize = function(){
    ctx.canvas.width  = window.innerWidth * ratio;
    ctx.canvas.height = window.innerHeight * ratio;
    cb = stage.getBoundingClientRect();
}

window.onresize();

/*******************************************************************************
    Setup
*******************************************************************************/

function create(){
    var d = 20;
    for(var i=-1; ++i<wide;){
        var x = Math.floor((((cb.width-padding*2) / (wide-1)) * i) + padding) * ratio;

        for(var j=-1; ++j<high;){

            var y = Math.floor((((cb.height-padding*2) / (high-1)) * j) + padding) * ratio;

            dots.push({
                x: x,
                y: y,
                ox: x,
                oy: y
            });
        }
    }
}

create();


/*******************************************************************************
    Rendering and frame calculations
*******************************************************************************/

function render(){
    // clear the canvas
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    // choose the dot color
    ctx.fillStyle = '#fff';

    // for each line
    for(var i=0;i<dots.length;i++){
        var s = dots[i];

        var v = getV(s)

        ctx.beginPath();
        ctx.moveTo(s.x, s.y);
        ctx.lineTo(s.x + v.x, s.y + v.y);
        ctx.strokeStyle = '#333'
        ctx.lineWidth = 1 * ratio
        ctx.stroke();
        ctx.closePath();
    }

    // for each dot
    for(var i=0;i<dots.length;i++){
        var s = dots[i];

        var v = getV(s)

        ctx.circle(s.x + v.x, s.y + v.y, s.size * ratio, true);
        ctx.fill();
    }

    
}

function getV(dot) {
    // find the distance from the line to the mouse
    var d = getDistance(dot, mouse);

    // reverse the distance, so that the number is bigger when the mouse is closer.
    dot.size = (200-d)/20
    dot.size = dot.size < 1 ? 1 : dot.size;

    dot.angle = getAngle(dot, mouse);

    return {
        x: (d > 20 ? 20 : d) * Math.cos(dot.angle * Math.PI / 180),
        y: (d > 20 ? 20 : d) * Math.sin(dot.angle * Math.PI / 180)
    }
}

function getAngle(obj1, obj2){
    var dX = obj2.x - obj1.x;
    var dY = obj2.y - obj1.y;
    var angleDeg = Math.atan2(dY,dX)/Math.PI*180;
    return angleDeg;
}

function getDistance(obj1, obj2){
    var dx = obj1.x-obj2.x;
    var dy = obj1.y-obj2.y;
    return Math.sqrt(dx * dx + dy * dy);
}


/*******************************************************************************
    Drawing circles
*******************************************************************************/

CanvasRenderingContext2D.prototype.circle = function (x, y, r) {
    this.beginPath();
    this.arc(x, y, r, 0, 2 * Math.PI, false);
    this.closePath();
}


/*******************************************************************************
    Animation Setup
*******************************************************************************/

window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame   ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        function( callback ){
            window.setTimeout(callback, 1000 / 60);
        };
})();

(function animloop(){
    
    render();

    requestAnimationFrame(animloop);
    
})();
</script>

</body>
</html>
收录详情:百度已收录
版权声明:本文内容源自互联网,由(柳意梧情)整编。
文章标题:HTML5网状焦点悬停放大特效代码
本文地址:https://blog.liuyiwuqing.cn/Site/121.html
本文最后更新于2019-6-5,已超过半年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
版权所有,转载注意明处:柳意梧情博客 » HTML5网状焦点悬停放大特效代码

WRITTEN BY:柳意梧情

avatar

评论

游客

切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

1432 sitemap