欢迎您来到,李雷博客 | PHP博客        登录  |  注册

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

更新:2016-01-04 14:07:51
人气:9407
来源:本站原创
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)

推荐的文章
# 发表我的评论
  /     /  
# 最近评论

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


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

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

博主可以的啊!

635

  Ads by Google
  联系博主
Hello,本博客系统采用PHP和MySql开发,程序开发完全是因为个人爱好,是自己纯手写PHP源代码,未采用任何PHP框架!
QQ:858353007   微信号:lileihot123
网站地图
会员服务
关于我们
QQ:858353007
 
广告服务
加我微信
移动端访问
 
 
Copyright © 2014- 2024 www.mdaima.com All Rights Reserved.
李雷博客,专注PHP经验、PHP教程及PHP源代码开源下载分享的PHP博客!   ICP备案号:京ICP备10202169号-4