360好搜动感光波模式效果源代码已破解（源代码下载分享）

更新：2016-01-04 14:07:51

人气：10740

来源：本站原创

A+

今天无意间使用360好搜，发现在搜索框中输入内容时出现了特殊效果（像烟花一样跳动），自己很好奇，网上找了一下这个名字叫“360动感光波模式”，好多朋友都在询问如何实现这个效果。自己也是琢磨了很久，觉得特别有意思，花了一上午的时间，终于把这段代码给扒下来了。现在提供给大家：

360好搜动感光波模式

前端HTML页面：

<!DOCTYPE html>
<head>
<meta charset="utf-8">
</head>
<body >
	<div id="header">
		<form class="form" >
			<input type="text" class="input_key" maxlength="100" autocomplete="off">
		</form>
	</div>
	
	<script src="183.js" ></script>
	<script src="typing.js" ></script>
</body>
</html>

这里需要注意，id="header"、class="form"、class="input_key"，这几项的ID和NAME是必须使用的，但具体ID和CLASS名字大家可以在typing.js文件中修改。

typing.js文件（这个是核心文件）：

(function() {
    function p() {
        window.requestAnimFrame(p), a = d(0, 360), s.globalCompositeOperation = "destination-out", s.fillStyle = "rgba(0, 0, 0, 0.5)", s.fillRect(0, 0, e, t), s.globalCompositeOperation = "source-over";
        var n = u.length;
        while (n--) u[n].draw(), u[n].update(n)
    }

    function d(e, t) {
        return Math.random() * (t - e) + e
    }

    function v() {
        i = $('<canvas width="' + e + '" height="' + t + '" />').appendTo(n).css({
            position: "absolute",
            left: -20,
            top: -44,
            zIndex: 999,
            pointerEvents: "none"
        }), s = i[0].getContext("2d"), r = $("<div />").appendTo(n).css({
            fontSize: "16px",
            fontFamily: "arial",
            height: 1,
            position: "absolute",
            left: 15,
            top: 50,
            zIndex: 0,
            visibility: "hidden",
            whiteSpace: "nowrap"
        })
    }
    if (/msie/i.test(navigator.userAgent)) return;
    var e = 600,
        t = 100,
        n = $("#header .form"),
        r = null,
        i = null,
        s = null,
        o = !1,
        u = [],
        a = 120,
        f = 8,
        l = 0,
        c = 0,
        h = function(e, t, n) {
            var r = this;
            r.x = e, r.y = t, r.dir = n, r.coord = {}, r.angle = d(0, -Math.PI), r.speed = d(2, 8), r.friction = .95, r.gravity = 1, r.hue = d(a - 10, a + 10), r.brightness = d(50, 80), r.alpha = 1, r.decay = d(.03, .05), r.init()
        };
    h.prototype = {
        init: function() {
            var e = this;
            e.coord = {
                x: e.x,
                y: e.y
            }
        },
        update: function(e) {
            var t = this;
            t.coord = {
                x: t.x,
                y: t.y
            }, t.speed *= t.friction, t.x += Math.cos(t.angle) * t.speed + t.dir, t.y += Math.sin(t.angle) * t.speed + t.gravity, t.alpha -= t.decay, t.alpha <= t.decay && u.splice(e, 1)
        },
        draw: function() {
            var e = this;
            s.fillStyle = "hsla(" + e.hue + ", 100%, " + e.brightness + "%, " + e.alpha + ")", s.beginPath(), s.arc(e.coord.x, e.coord.y, 2, 0, 2 * Math.PI, !0), s.closePath(), s.fill()
        }
    }, window.requestAnimFrame = function() {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || function(e) {
            window.setTimeout(e, 1e3 / 60)
        }
    }(), $(".input_key").on("focus", function() {
        o || (v(), o = !0, p());
        var e = $(this.form),
            t = -20,
            n = -44;
        i.appendTo(e), e.attr("name") == "f3" && ($("body").hasClass("layout1") ? t = 97 : t = -20), i.css({
            left: t,
            top: n
        })
    }).on("keydown", function(e) {
        var t = $(this.form);
        if (!(this.selectionStart >= 0 && r)) return;
        var n = this.selectionStart,
            i = this.value.substring(0, n).replace(/ /g, "&nbsp;"),
            s = r.html(i).width(),
            o = 0;
        i.length > c ? o = -2 : o = 2, c = i.length, s >= 500 && (s = 500);
        var a = f;
        while (a--) u.push(new h(s + 50, 60, o));
        t.css({
            "-webkit-transform": "translate(-1px, 1px)",
            "-moz-transform": "translate(-1px, 1px)",
            "-o-transform": "translate(-1px, 1px)",
            transform: "translate(-1px, 1px)"
        }), setTimeout(function() {
            t.css({
                "-webkit-transform": "none",
                "-moz-transform": "none",
                "-o-transform": "none",
                transform: "none"
            })
        }, 10)
    })
})();

这个文件直接拷贝过去使用就行了！

再补充一点，如果不想要文本框抖动的效果，只保留烟花的效果，可以将以下代码去掉或注释掉：

t.css({
    "-webkit-transform": "translate(-1px, 1px)",
    "-moz-transform": "translate(-1px, 1px)",
    "-o-transform": "translate(-1px, 1px)",
    transform: "translate(-1px, 1px)"
}), 
//即setTimeout(function() {  前面的代码去掉（千万不要忘记setTimeout前面的逗号）

至于183.js只是360引用的JQ文件，我替换成jquery-1.8.3.min.js进行测试也顺利通过了，具体的183.js的源代码就不贴出来了，大家根据需要调整自己常用的版本吧。现在，是不是也想把动感光波模式应用到自己网站呢？

顺便把这几个文件打包分享给大家下载： 360动感光波模式_源代码.rar （解压密码：mdaima.com）

转载请注明：360好搜动感光波模式效果源代码已破解（源代码下载分享） | 李雷博客 - PHP博客

登录中利用JS前端加密PHP后端解密保证数据非明文传输的安全方法

PHP将带有html标签格式的字符串过滤为纯文本的方法

MySQL数据库设置主从同步设置方法

# 发表我的评论

/ /

# 最近评论

博主℃李雷 V / 2016-01-04 16:34

回复1楼

大家可以看看我博客的搜索功能，要的是不是这个效果？

还没注册的回复博主℃李雷 / 2016-01-05 12:30

回复-1楼

楼主特效展示的位置怎么一直在左上角？

博主℃李雷 V 回复还没注册的 / 2016-01-05 13:38

回复-2楼

是说的压缩包里的代码吧，这个需要自己在JS里调一下，具体的我也不太懂，反正就是那几个数值改改试试吧！

资深游客 / 2016-01-06 20:25

回复2楼

博主可以的啊!

635 / 2020-07-19 10:09

回复3楼

635

Ads by Google

随手记

PHP经验分享

联系博主

Hello，本博客系统采用PHP和MySql开发，程序开发完全是因为个人爱好，是自己纯手写PHP源代码，未采用任何PHP框架！

QQ：858353007 微信号：lileihot123

标签：PHP技术博客 PHP经验分享

网站地图 XML地图随手记本站声明博客移动版	会员服务 PHP经验分享帮助中心	关于我们联系我们获取积分 QQ：858353007	广告服务广告优势付款方式 mdaima@126.com	加我微信	移动端访问


Copyright © 2014- 2026 www.mdaima.com All Rights Reserved. 李雷博客，专注PHP经验、PHP教程及PHP源代码开源下载分享的PHP博客！ ICP备案号：京ICP备10202169号-4