您現在的位置: 365建站網 > 365學習 > jQuery/js實現跟隨鼠標移動的特效代碼實例

jQuery/js實現跟隨鼠標移動的特效代碼實例

文章來源:365jz.com     點擊數:367    更新時間:2018-11-07 09:25   參與評論

js實現鼠標跟隨效果

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0
        }
        img {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
<img src="001.jpg" alt="" width="50" height="50" id="pic"/>
<script>
    var timer = null;
    var pic = document.getElementById("pic");
    //在頁面上 點擊的時候 獲取鼠標在頁面上的位置 讓圖片 慢慢 到這個位置
    document.onmousemove = function (event) {
        clearInterval(timer);
        var event = event || window.event;
        //獲取鼠標在頁面上的位置
        var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
        //讓圖片 慢慢 到這個位置
        timer = setInterval(function () {
            //step = (target - leader) / 10
            //leader = leader + step
            var targetX = pageX - pic.offsetWidth / 2;//水平方向的目標
            var targetY = pageY - pic.offsetHeight / 2;//
            var leaderX = pic.offsetLeft;//水平方向的當前位置
            var leaderY = pic.offsetTop;//
            var stepX = (targetX - leaderX) / 10;
            var stepY = (targetY - leaderY) / 10;
            stepX = stepX > 0 ? Math.ceil(stepX) : Math.floor(stepX);
            stepY = stepY > 0 ? Math.ceil(stepY) : Math.floor(stepY);
            leaderX = leaderX + stepX;
            leaderY = leaderY + stepY;
            pic.style.left = leaderX + "px";//單位一定不要忘記
            pic.style.top = leaderY + "px";//單位一定不要忘記
            if (leaderX === targetX && leaderY === targetY) {
                clearInterval(timer);
            }
        }, 1);
    };
</script>
</body>
</html>

jQuery實現div跟隨鼠標移動的代碼


<!DOCTYPE html>
<html>
  <head>
    <meta charset="{utf-8}">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
      .aa{
        height: 100px;
        width: 200px;
        position: absolute;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <p class="aa"></p>
  </body>
</html>
<script>
  $(".aa").mousedown(function(e){
    //設置移動后的默認位置
    var endx=0;
    var endy=0;
 
    //獲取p的初始位置,要注意的是需要轉整型,因為獲取到值帶px
    var left= parseInt($(".aa").CSS("left"));
    var top = parseInt($(".aa").css("top"));
 
    //獲取鼠標按下時的坐標,區別于下面的es.pageX,es.pageY
    var downx=e.pageX;
    var downy=e.pageY;   //pageY的y要大寫,必須大寫??!
 
   //  鼠標按下時給p掛事件
  $(".aa").bind("mousemove",function(es){
 
    //es.pageX,es.pageY:獲取鼠標移動后的坐標
    var endx= es.pageX-downx+left;   //計算p的最終位置
    var endy=es.pageY-downy+top;
 
    //帶上單位
    $(".aa").css("left",endx+"px").css("top",endy+"px")  
  });  
 })
  $(".aa").mouseup(function(){
    //鼠標彈起時給p取消事件
    $(".aa").unbind("mousemove")
  })
</script>


canvas跟隨鼠標特效

<style>
    * {
margin:0;
padding:0;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
html,body {
margin:0;
padding:0;
font:16px/1.4 'Lato',sans-serif;
color:#fefeff;
-webkit-font-smoothing:antialiased;
font-smoothing:antialiased;
}
body {
background:rgb(8,5,16);
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
h1 {
font:2.75em 'Cinzel',serif;
font-weight:400;
letter-spacing:0.35em;
text-shadow:0 0 25px rgba(254,254,255,0.85);
}
h2 {
font:1.45em 'Cinzel',serif;
font-weight:400;
letter-spacing:0.5em;
text-shadow:0 0 25px rgba(254,254,255,0.85);
text-transform:lowercase;
}
[class^="letter"] {
-webkit-transition:opacity 3s ease;
-moz-transition:opacity 3s ease;
transition:opacity 3s ease;
}
.letter-0 {
transition-delay:0.2s;
}
.letter-1 {
transition-delay:0.4s;
}
.letter-2 {
transition-delay:0.6s;
}
.letter-3 {
transition-delay:0.8s;
}
.letter-4 {
transition-delay:1.0s;
}
.letter-5 {
transition-delay:1.2s;
}
.letter-6 {
transition-delay:1.4s;
}
.letter-7 {
transition-delay:1.6s;
}
.letter-8 {
transition-delay:1.8s;
}
.letter-9 {
transition-delay:2.0s;
}
.letter-10 {
transition-delay:2.2s;
}
.letter-11 {
transition-delay:2.4s;
}
.letter-12 {
transition-delay:2.6s;
}
.letter-13 {
transition-delay:2.8s;
}
.letter-14 {
transition-delay:3.0s;
}
h1,h2 {
visibility:hidden;
-webkit-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
h1.transition-in,h2.transition-in {
visibility:visible;
}
h1 [class^="letter"],h2 [class^="letter"] {
opacity:0;
}
h1.transition-in [class^="letter"],h2.transition-in [class^="letter"] {
opacity:1;
}
#container {
display:table;
position:absolute;
z-index:20;
width:100%;
height:100%;
text-align:center;
cursor:none;
}
#container > div {
display:table-cell;
vertical-align:middle;
}
#container p {
position:absolute;
width:100%;
left:0;
bottom:25px;
font-size:0.8em;
letter-spacing:0.1em;
font-weight:300;
color:#76747a;
-webkit-font-smoothing:subpixel-antialiased;
font-smoothing:subpixel-antialiased;
}
#container p strong {
color:#b3abc5;
}
#container p span {
font-size:0.75em;
padding:0 2px;
}
#canvas {
position:absolute;
z-index:10;
top:0;
left:0;
width:100%;
height:100%;
cursor:none;
}
#stats {
position:absolute;
z-index:10;
left:10px;
top:10px;
}
.dg.ac {
z-index:100 !important;
}
</style>
 <div id="container">
        <div>
             <h1 id="h1">
                365建站! </h1>
            <h2 id="h2">讓建站和SEO變得簡單</h2>
        </div>
</div>
<canvas id="canvas"></canvas>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    var Stats = function() {
    var e = Date.now(),
        t = e,
        i = 0,
        n = 1 / 0,
        r = 0,
        s = 0,
        o = 1 / 0,
        a = 0,
        l = 0,
        h = 0,
        c = document.createElement("div");
    c.id = "stats", c.addEventListener("mousedown", function(e) {
        e.preventDefault(), v(++h % 2)
    }, !1), c.style.cssText = "width:80px;opacity:0.9;cursor:pointer";
    var u = document.createElement("div");
    u.id = "fps", u.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#002", c.appendChild(u);
    var d = document.createElement("div");
    d.id = "fpsText", d.style.cssText = "color:#0ff;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px", d.innerHTML = "FPS", u.appendChild(d);
    var p = document.createElement("div");
    for (p.id = "fpsGraph", p.style.cssText = "position:relative;width:74px;height:30px;background-color:#0ff", u.appendChild(p); 74 > p.children.length;) {
        var f = document.createElement("span");
        f.style.cssText = "width:1px;height:30px;float:left;background-color:#113", p.appendChild(f)
    }
    var m = document.createElement("div");
    m.id = "ms", m.style.cssText = "padding:0 0 3px 3px;text-align:left;background-color:#020;display:none", c.appendChild(m);
    var g = document.createElement("div");
    g.id = "msText", g.style.cssText = "color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px", g.innerHTML = "MS", m.appendChild(g);
    var y = document.createElement("div");
    for (y.id = "msGraph", y.style.cssText = "position:relative;width:74px;height:30px;background-color:#0f0", m.appendChild(y); 74 > y.children.length;) {
        var f = document.createElement("span");
        f.style.cssText = "width:1px;height:30px;float:left;background-color:#131", y.appendChild(f)
    }
    var v = function(e) {
            switch (h = e) {
                case 0:
                    u.style.display = "block", m.style.display = "none";
                    break;
                case 1:
                    u.style.display = "none", m.style.display = "block"
            }
        },
        b = function(e, t) {
            var i = e.appendChild(e.firstChild);
            i.style.height = t + "px"
        };
    return {
        REVISION: 11,
        domElement: c,
        setMode: v,
        begin: function() {
            e = Date.now()
        },
        end: function() {
            var h = Date.now();
            return i = h - e, n = Math.min(n, i), r = Math.max(r, i), g.textContent = i + " MS (" + n + "-" + r + ")", b(y, Math.min(30, 30 - 30 * (i / 200))), l++, h > t + 1e3 && (s = Math.round(1e3 * l / (h - t)), o = Math.min(o, s), a = Math.max(a, s), d.textContent = s + " FPS (" + o + "-" + a + ")", b(p, Math.min(30, 30 - 30 * (s / 100))), t = h, l = 0), h
        },
        update: function() {
            e = this.end()
        }
    }
};
;
(function(window) {
    var ctx,
        hue,
        logo,
        form,
        buffer,
        target = {},
        tendrils = [],
        settings = {};
    settings.debug = true;
    settings.friction = 0.5;
    settings.trails = 20;
    settings.size = 50;
    settings.dampening = 0.25;
    settings.tension = 0.98;
    Math.TWO_PI = Math.PI * 2;
    // ========================================================================================
    // Oscillator
    // ----------------------------------------------------------------------------------------
    function Oscillator(options) {
        this.init(options || {});
    }
    Oscillator.prototype = (function() {
        var value = 0;
        return {
            init: function(options) {
                this.phase = options.phase || 0;
                this.offset = options.offset || 0;
                this.frequency = options.frequency || 0.001;
                this.amplitude = options.amplitude || 1;
            },
            update: function() {
                this.phase += this.frequency;
                value = this.offset + Math.sin(this.phase) * this.amplitude;
                return value;
            },
            value: function() {
                return value;
            }
        };
    })();
    // ========================================================================================
    // Tendril
    // ----------------------------------------------------------------------------------------
    function Tendril(options) {
        this.init(options || {});
    }
    Tendril.prototype = (function() {
        function Node() {
            this.x = 0;
            this.y = 0;
            this.vy = 0;
            this.vx = 0;
        }
        return {
            init: function(options) {
                this.spring = options.spring + (Math.random() * 0.1) - 0.05;
                this.friction = settings.friction + (Math.random() * 0.01) - 0.005;
                this.nodes = [];
                for (var i = 0, node; i < settings.size; i++) {
                    node = new Node();
                    node.x = target.x;
                    node.y = target.y;
                    this.nodes.push(node);
                }
            },
            update: function() {
                var spring = this.spring,
                    node = this.nodes[0];
                node.vx += (target.x - node.x) * spring;
                node.vy += (target.y - node.y) * spring;
                for (var prev, i = 0, n = this.nodes.length; i < n; i++) {
                    node = this.nodes[i];
                    if (i > 0) {
                        prev = this.nodes[i - 1];
                        node.vx += (prev.x - node.x) * spring;
                        node.vy += (prev.y - node.y) * spring;
                        node.vx += prev.vx * settings.dampening;
                        node.vy += prev.vy * settings.dampening;
                    }
                    node.vx *= this.friction;
                    node.vy *= this.friction;
                    node.x += node.vx;
                    node.y += node.vy;
                    spring *= settings.tension;
                }
            },
            draw: function() {
                var x = this.nodes[0].x,
                    y = this.nodes[0].y,
                    a, b;
                ctx.beginPath();
                ctx.moveTo(x, y);
                for (var i = 1, n = this.nodes.length - 2; i < n; i++) {
                    a = this.nodes[i];
                    b = this.nodes[i + 1];
                    x = (a.x + b.x) * 0.5;
                    y = (a.y + b.y) * 0.5;
                    ctx.quadraticCurveTo(a.x, a.y, x, y);
                }
                a = this.nodes[i];
                b = this.nodes[i + 1];
                ctx.quadraticCurveTo(a.x, a.y, b.x, b.y);
                ctx.stroke();
                ctx.closePath();
            }
        };
    })();
    // ----------------------------------------------------------------------------------------
    function init(event) {
        document.removeEventListener('mousemove', init);
        document.removeEventListener('touchstart', init);
        document.addEventListener('mousemove', mousemove);
        document.addEventListener('touchmove', mousemove);
        document.addEventListener('touchstart', touchstart);
        mousemove(event);
        reset();
        loop();
    }
    function reset() {
        tendrils = [];
        for (var i = 0; i < settings.trails; i++) {
            tendrils.push(new Tendril({
                spring: 0.45 + 0.025 * (i / settings.trails)
            }));
        }
    }
    function loop() {
        if (!ctx.running) return;
        ctx.globalCompositeOperation = 'source-over';
        ctx.fillStyle = 'rgba(8,5,16,0.4)';
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.globalCompositeOperation = 'lighter';
        ctx.strokeStyle = 'hsla(' + Math.round(hue.update()) + ',90%,50%,0.25)';
        ctx.lineWidth = 1;
        if (ctx.frame % 60 == 0) {
            console.log(hue.update(), Math.round(hue.update()), hue.phase, hue.offset, hue.frequency, hue.amplitude);
        }
        for (var i = 0, tendril; i < settings.trails; i++) {
            tendril = tendrils[i];
            tendril.update();
            tendril.draw();
        }
        ctx.frame++;
        ctx.stats.update();
        requestAnimFrame(loop);
    }
    function resize() {
        ctx.canvas.width = window.innerWidth;
        ctx.canvas.height = window.innerHeight;
    }
    function start() {
        if (!ctx.running) {
            ctx.running = true;
            loop();
        }
    }
    function stop() {
        ctx.running = false;
    }
    function mousemove(event) {
        if (event.touches) {
            target.x = event.touches[0].pageX;
            target.y = event.touches[0].pageY;
        } else {
            target.x = event.clientX
            target.y = event.clientY;
        }
        event.preventDefault();
    }
    function touchstart(event) {
        if (event.touches.length == 1) {
            target.x = event.touches[0].pageX;
            target.y = event.touches[0].pageY;
        }
    }
    function keyup(event) {
        switch (event.keyCode) {
            case 32:
                save();
                break;
            default:
                // console.log(event.keyCode);
        }
    }
    function letters(id) {
        var el = document.getElementById(id),
            letters = el.innerHTML.replace('&', '&').split(''),
            heading = '';
        for (var i = 0, n = letters.length, letter; i < n; i++) {
            letter = letters[i].replace('&', '&');
            heading += letter.trim() ? '<span class="letter-' + i + '">' + letter + '</span>' : ' ';
        }
        el.innerHTML = heading;
        setTimeout(function() {
            el.className = 'transition-in';
        }, (Math.random() * 500) + 500);
    }
    function save() {
        if (!buffer) {
            buffer = document.createElement('canvas');
            buffer.width = screen.availWidth;
            buffer.height = screen.availHeight;
            buffer.ctx = buffer.getContext('2d');
            form = document.createElement('form');
            form.method = 'post';
            form.input = document.createElement('input');
            form.input.type = 'hidden';
            form.input.name = 'data';
            form.appendChild(form.input);
            document.body.appendChild(form);
        }
        buffer.ctx.fillStyle = 'rgba(8,5,16)';
        buffer.ctx.fillRect(0, 0, buffer.width, buffer.height);
        buffer.ctx.drawImage(canvas,
            Math.round(buffer.width / 2 - canvas.width / 2),
            Math.round(buffer.height / 2 - canvas.height / 2)
        );
        buffer.ctx.drawImage(logo,
            Math.round(buffer.width / 2 - logo.width / 4),
            Math.round(buffer.height / 2 - logo.height / 4),
            logo.width / 2,
            logo.height / 2
        );
        window.open(buffer.toDataURL(), 'wallpaper', 'top=0,left=0,width=' + buffer.width + ',height=' + buffer.height);
        // form.input.value = buffer.toDataURL().substr(22);
        // form.submit();
    }
    window.requestAnimFrame = (function() {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(fn) {
            window.setTimeout(fn, 1000 / 60)
        };
    })();
    window.onload = function() {
        ctx = document.getElementById('canvas').getContext('2d');
        ctx.stats = new Stats();
        ctx.running = true;
        ctx.frame = 1;
        logo = new Image();
        logo.src = 'http://labs.nikrowell.com/lightsandmotion/ultraviolet/images/logo.png';
        hue = new Oscillator({
            phase: Math.random() * Math.TWO_PI,
            amplitude: 85,
            frequency: 0.0015,
            offset: 285
        });
        letters('h1');
        letters('h2');
        document.addEventListener('mousemove', init);
        document.addEventListener('touchstart', init);
        document.body.addEventListener('orientationchange', resize);
        window.addEventListener('resize', resize);
        window.addEventListener('keyup', keyup);
        window.addEventListener('focus', start);
        window.addEventListener('blur', stop);
        resize();
        if (window.DEBUG) {
            var gui = new dat.GUI();
            // gui.add(settings, 'debug');
            settings.gui.add(settings, 'trails', 1, 30).onChange(reset);
            settings.gui.add(settings, 'size', 25, 75).onFinishChange(reset);
            settings.gui.add(settings, 'friction', 0.45, 0.55).onFinishChange(reset);
            settings.gui.add(settings, 'dampening', 0.01, 0.4).onFinishChange(reset);
            settings.gui.add(settings, 'tension', 0.95, 0.999).onFinishChange(reset);
            document.body.appendChild(ctx.stats.domElement);
        }
    };
})(window);
</script>



如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (367人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 啪啪全程无遮挡60分钟| 国产精品亚洲二区在线观看| 亚洲乱码中文字幕综合234| 国模吧| 啊好大进不去了求求你| 超清精品丝袜国产自在线拍| 亚洲自偷自拍另类第1页| 伊人久久五月丁婷婷| j8又粗又硬又大又爽又长网站| 亚洲毛片不卡av在线播放一区| 亚洲综合久久一本伊一区| 理论片| 在办公室狂摸老师下面视频| 翁熄性放纵好紧| 香蕉久久国产超碰青草| 女人把私人部位张开的视频| 隔壁的放荡邻居在线看| 极品粉嫩学生无套视频| 国产精品第一区揄拍| 香港三级视频手机免费版| japanxxxxhd videos12| 美国特级A毛片免费网站| 亚洲av片不卡无码久久尤物| 日本人体艺术| 国产无套护士在线观看| 日韩av在线一区免费| 中国嫩模被黑人强行视频| 日日摸夜夜添夜夜添破第一次| 我和公大货车上发生了性关系| free欧美高清猪马牛| 超帅小伙被ktv直男少爷口| http://www.expressionisfree.com