js灯光反射效果

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js灯光反射效果的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <link rel="stylesheet" href="css/main.css" />
    <title>js灯光反射效果</title>
</head>

<body>
    <div class="container">
        <div class="demo"></div>
    </div>

    <script type="text/javascript" src="js/realshadow.js"></script>
    <script type="text/javascript">
        (function () {

            var a = ['rect', 'circle', 'round', 'ur', 'll'],
                    c = ['', 'r', 'g', 'b', 'rgb', 'rg', 'gb', 'br'],
                    columns = rows = 6,
                    s = '', i, j;

            for (i = 0; i < columns; ++i) {
                s += '<p>';
                for (j = 0; j < rows; ++j)
                    s += '<span rel="' +
                            c[(i * columns + j) % c.length] +
                            '" class="realshadow block ' +
                            a[(i * columns + j) % a.length] +
                            ' c' +
                            c[(i * columns + j) % c.length] +
                            '"></span>';
                s += '</p>';
            }

            document.getElementsByClassName('demo')[0].innerHTML =
                '<div class="wrapper">' + s + '</div>' +
                '<div class="inset block big">Inset shadows are supported as well<div/>';

            realshadow(document.getElementsByClassName('realshadow'));
            realshadow(document.getElementsByClassName('inset'), { inset: true });

        })();
    </script>
</body>
</html>

JS代码(realshadow.js):

/*! * Real Shadow v1.2.0 * https://github.com/Indamix/real-shadow * * Copyright 2012,Ivan Indamix * Licensed under the MIT license * https://raw.github.com/Indamix/real-shadow/master/license.txt */
(function(window,undefined){
	var settings ={
	followMouse:true,length:7}
,params ={
	nMax:2.3,pow:.8,div:1500}
,pi = Math.PI,els = [],exported = false;
	if (typeof window.jQuery === 'function'){
	$.fn.realshadow = init;
	$.fn.realshadow.update = update;
	exported = true;
}
if (typeof define !== 'undefined' && define.amd){
	define(function (){
	return init;
}
);
	exported = true;
}
if (typeof module !== 'undefined' && module.exports){
	module.exports = init;
	exported = true;
}
if (!exported){
	window.realshadow = init;
}
function init(elements,options){
	if (this === window){
}
else{
	options = elements;
	elements = this;
}
for (var i in options) settings[i] = options[i];
	if (!els.length && settings.followMouse) document.body.addEventListener('mousemove',frame);
	window.addEventListener('resize',update);
	for (i = 0;
	i < elements.length;
	++i) add(elements[i]);
	frame();
	return elements;
}
function add(el){
	var c = el.getAttribute('rel'),p ={
	dom:el,x:el.offsetLeft + (el.clientWidth >> 1),y:el.offsetTop + (el.clientHeight >> 1)}
;
	if (c) p.c ={
	r:c.indexOf('r') !== -1,g:c.indexOf('g') !== -1,b:c.indexOf('b') !== -1}
;
	else if (settings.c) p.c = settings.c;
	p.inset = settings.inset ? 'inset':'';
	els.push(p);
}
function update(){
	var i = els.length,el,$el;
	while (i--){
	el = els[i];
	$el = el.dom;
	el.x = $el.offsetLeft + ($el.clientWidth >> 1);
	el.y = $el.offsetTop + ($el.clientHeight >> 1);
}
frame();
}
function castShadows(el,angle,n,length){
	var shadows = [],cos = Math.cos(angle),sin = Math.sin(angle),r;
	for (var i = 1;
	i < length;
	++i){
	r = Math.pow(i,n);
	shadows.push( ( r * sin >> 0 ) + 'px ' + ( r * cos >> 0 ) + 'px ' + ( Math.pow(i,1.7) >> 0 ) + 'px rgba(' + (el.c ? (el.c.r ? 100:0) + ',' + (el.c.g ? 100:0) + ',' + (el.c.b ? 100:0) + ',':'0,0,0,' ) + '.05)' + el.inset );
}
el.dom.style.boxShadow = shadows.join(',');
}
function frame(e){
	if (e === undefined) e ={
	pageX:settings.pageX !== undefined ? settings.pageX:window.innerWidth >> 1,pageY:settings.pageY !== undefined ? settings.pageY:0}
;
	var i = els.length,el;
	while (i--){
	el = els[i];
	var x = e.pageX - els[i].x,y = e.pageY - els[i].y,n = Math.pow(x * x + y * y,params.pow);
	n = n / params.div + 1;
	if (n > params.nMax) n = params.nMax;
	castShadows( el,Math.atan2(x,y) - pi,n,settings.length );
}
}
}
)(this);

CSS代码(main.css):

body{background:#fff url(white_brick_wall.png);font:15px "Helvetica Neue",Calibri,Helvetica,Arial,sans-serif;color:#666;padding:0;margin:0;}
h1{margin-bottom:0;color:#999;}
a{color:#66f;text-decoration:none}
.container{text-align:center;padding:10px 0;}
/*.wrapper{margin:0 300px}
*/
.block{margin:20px 30px;display:inline-block;width:50px;height:50px;}
.big{width:380px;height:100px;line-height:100px;margin-bottom:200px;border-radius:10px;}
.c{background:rgba(193,193,193,.5)}
.cr{background:rgba(255,0,0,.5)}
.cg{background:rgba(0,200,0,.5)}
.cb{background:rgba(0,0,255,.5)}
.crg{background:rgba(255,255,0,.5)}
.cgb{background:rgba(0,200,255,.5)}
.cbr{background:rgba(255,0,255,.5)}
.crgb{background:rgba(255,255,255,.5)}
.round{border-radius:10px}
.circle{border-radius:30px}
.ur{border-radius:5px 50px 5px 5px}
.ll{border-radius:5px 5px 5px 50px}
.rffdgad{position:absolute;right:10px;top:183px;}
a#forkme_banner{position:absolute;top:0;left:0;width:138px;height:138px;display:block;background:transparent url(images/fork-sprite.png) 0 0 no-repeat;text-indent:-9000px;z-index:3;}
a#forkme_banner:hover{background-position:0 -138px;}
.flattr,.twitter-share-button,.twitter-follow-button,.IN-widget,.fb-like{position:absolute!important;left:10px;}
.flattr{top:140px}
.twitter-share-button{top:215px}
.twitter-follow-button{top:255px}
.IN-widget{top:295px}
.fb-like{top:328px}

附件:下载该文件资源,减少时间成本(增值服务)