欢迎您来到，李雷博客 | PHP博客        登录  |  注册
首页 PHP经验分享 随手记 IT号外 代码库 PHP虚拟主机 关于博主

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

更新：2016-01-04 14:07:51
人气：9762
来源：本站原创
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博客
推荐的文章
BAT命令备份mysql数据库、WinRAR压缩打包、BAT远程下载
PHP扩展类ZipArchive实现压缩解压Zip文件和文件打包下载
MySQL并发相关的参数的调整
GatewayWorker报错：Waring: Events::onMessage is not callable
# 发表我的评论
  /     /  
# 最近评论

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


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

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

博主可以的啊!

635

  Ads by Google
  随手记
  PHP经验分享
  联系博主
Hello，本博客系统采用PHP和MySql开发，程序开发完全是因为个人爱好，是自己纯手写PHP源代码，未采用任何PHP框架！
QQ：858353007   微信号：lileihot123
网站地图
XML地图
随手记
本站声明
博客移动版
会员服务
PHP经验分享
帮助中心
关于我们
联系我们
获取积分
QQ：858353007
  
广告服务
广告优势
付款方式
mdaima@126.com
 加我微信
移动端访问
 
 
Copyright © 2014- 2024 www.mdaima.com All Rights Reserved.
李雷博客，专注PHP经验、PHP教程及PHP源代码开源下载分享的PHP博客！   ICP备案号：京ICP备10202169号-4