javascript兼容
Flare lens effect with JS. Today’s lesson pretty entertaining, we’ll learn how to make a flare lens effect. I hope you know what it is, but if not – just look our online demo. To achieve this effect, we need several images – lenses. These lenses will in 3 different colors (for a more nice result.) One of the lenses will simulate the brightest object of our composition (star). But it could also be the sun (for example). And, for greater interactivity – we will change the lens when moving the mouse.
带有JS的光晕镜头效果。 今天的课程非常有趣，我们将学习如何制作闪光镜效果。 我希望您知道它是什么，但如果没有，请看我们的在线演示。 为了达到这种效果，我们需要几个图像–镜头。 这些镜头将使用3种不同的颜色(以获得更好的效果。)其中一个镜头将模拟我们构图(星)中最亮的物体。 但是也可能是太阳(例如)。 并且，为了提高交互性，我们将在移动鼠标时更换镜头。
Here are samples and downloadable package:
以下是示例和可下载的软件包：
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
Ok, download the example files and lets start coding !
好的，下载示例文件并开始编码！
步骤1. HTML (Step 1. HTML)
As usual, we start with the HTML. This is source code of our sample:
和往常一样，我们从HTML开始。 这是我们示例的源代码：
index.html (index.html)
<html>
<head>
<title>Flare lens effect</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<img id="bg" src="images/background.jpg" />
<div id="main_area">
<img id="l1" class="transp" src="images/l1.png" />
<img id="l2" class="transp" src="images/l2.png" />
<img id="l3" class="transp" src="images/l3.png" />
<img id="l4" class="transp" src="images/l2.png" />
<img id="l5" class="transp" src="images/l1.png" />
<img id="l6" class="transp" src="images/l2.png" />
<img id="l7" class="transp" src="images/l3.png" />
<img id="l8" src="images/flare1.png" style="position:absolute" />
</div>
</body>
</html>
<html>
<head>
<title>Flare lens effect</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<img id="bg" src="images/background.jpg" />
<div id="main_area">
<img id="l1" class="transp" src="images/l1.png" />
<img id="l2" class="transp" src="images/l2.png" />
<img id="l3" class="transp" src="images/l3.png" />
<img id="l4" class="transp" src="images/l2.png" />
<img id="l5" class="transp" src="images/l1.png" />
<img id="l6" class="transp" src="images/l2.png" />
<img id="l7" class="transp" src="images/l3.png" />
<img id="l8" src="images/flare1.png" style="position:absolute" />
</div>
</body>
</html>
Here, we will have some image on our background (space), 7 transparent lens, and one most bright flare image (flare1.png).
在这里，我们将在背景(空间)上有一些图像，7个透明镜头和一个最明亮的耀斑图像(flare1.png)。
步骤2. CSS (Step 2. CSS)
Here are single CSS file with all necessary styles:
这是具有所有必要样式的单个CSS文件：
css / main.css (css/main.css)
html {overflow:hidden}
body{margin:0;padding:0}
#bg{
width:100%;
position:absolute;
top:0;
left:0;
}
#main_area {
position:relative;
height:100%;
}
.transp {
filter:alpha(opacity=20);
opacity:0.2;
left:-1000px;
position:absolute;
}
html {overflow:hidden}
body{margin:0;padding:0}
#bg{
width:100%;
position:absolute;
top:0;
left:0;
}
#main_area {
position:relative;
height:100%;
}
.transp {
filter:alpha(opacity=20);
opacity:0.2;
left:-1000px;
position:absolute;
}
步骤3. JS (Step 3. JS)
Here are our main Javascript:
这是我们的主要Javascript：
js / main.js (js/main.js)
var lfeff = {
// variables
cx:0,
cy:0,
lx:0,
ly:0,
px:0,
py:0,
mobj:0,
max:400,
// initialization
init : function() {
this.mobj = document.getElementById('main_area');
this.resize();
this.lx = this.cx / 2;
this.ly = this.cy / 2;
},
// refreshing mouse positions
mousemove : function(e) {
if (window.event) e = window.event;
this.lx = (e.x || e.clientX);
this.ly = (e.y || e.clientY);
},
// window resizing
resize : function() {
lfeff.cx = lfeff.mobj.offsetWidth * 0.5;
lfeff.cy = lfeff.mobj.offsetHeight * 0.5;
},
// main draw lens function
draw : function() {
lfeff.px -= (lfeff.px - lfeff.lx) * .1;
lfeff.py -= (lfeff.py - lfeff.ly) * .1;
lfeff.drawLens('l1', 0.7, 1, 0, 0);
lfeff.drawLens('l2', 0.5, 2, 0, 0);
lfeff.drawLens('l3', 0.3, 3, 0, 0);
lfeff.drawLens('l4', 0.2, 10, 0, 0);
lfeff.drawLens('l5', 0.7, -1, 0, 0);
lfeff.drawLens('l6', 0.5, -2, 0, 0);
lfeff.drawLens('l7', 0.3, -3, 0, 0);
lfeff.drawLens('l8', 1.0, -0.7, 0, 0);
// looping current function
setTimeout(lfeff.draw, 24);
},
// draw each lens function
drawLens : function(id, scale, distance, x, y) {
var vx = (this.cx - this.px) / distance;
var vy = (this.cy - this.py) / distance;
var d = this.max * scale;
css = document.getElementById(id).style;
css.top = Math.round(vy - (d * 0.5) + this.cy + y) + 'px';
css.left = Math.round(vx - (d * 0.5) + this.cx + x) + 'px'
css.width = Math.round(d) + 'px'
css.height = Math.round(d) + 'px'
}
}
window.onload = function() {
// initialization
lfeff.init();
// start
lfeff.draw();
// binding onmousemove event
document.onmousemove = function(e) {
if (window.event) e = window.event; // for IE
lfeff.mousemove(e);
}
// binding onresize event
window.onresize = lfeff.resize();
}
var lfeff = {
// variables
cx:0,
cy:0,
lx:0,
ly:0,
px:0,
py:0,
mobj:0,
max:400,
// initialization
init : function() {
this.mobj = document.getElementById('main_area');
this.resize();
this.lx = this.cx / 2;
this.ly = this.cy / 2;
},
// refreshing mouse positions
mousemove : function(e) {
if (window.event) e = window.event;
this.lx = (e.x || e.clientX);
this.ly = (e.y || e.clientY);
},
// window resizing
resize : function() {
lfeff.cx = lfeff.mobj.offsetWidth * 0.5;
lfeff.cy = lfeff.mobj.offsetHeight * 0.5;
},
// main draw lens function
draw : function() {
lfeff.px -= (lfeff.px - lfeff.lx) * .1;
lfeff.py -= (lfeff.py - lfeff.ly) * .1;
lfeff.drawLens('l1', 0.7, 1, 0, 0);
lfeff.drawLens('l2', 0.5, 2, 0, 0);
lfeff.drawLens('l3', 0.3, 3, 0, 0);
lfeff.drawLens('l4', 0.2, 10, 0, 0);
lfeff.drawLens('l5', 0.7, -1, 0, 0);
lfeff.drawLens('l6', 0.5, -2, 0, 0);
lfeff.drawLens('l7', 0.3, -3, 0, 0);
lfeff.drawLens('l8', 1.0, -0.7, 0, 0);
// looping current function
setTimeout(lfeff.draw, 24);
},
// draw each lens function
drawLens : function(id, scale, distance, x, y) {
var vx = (this.cx - this.px) / distance;
var vy = (this.cy - this.py) / distance;
var d = this.max * scale;
css = document.getElementById(id).style;
css.top = Math.round(vy - (d * 0.5) + this.cy + y) + 'px';
css.left = Math.round(vx - (d * 0.5) + this.cx + x) + 'px'
css.width = Math.round(d) + 'px'
css.height = Math.round(d) + 'px'
}
}
window.onload = function() {
// initialization
lfeff.init();
// start
lfeff.draw();
// binding onmousemove event
document.onmousemove = function(e) {
if (window.event) e = window.event; // for IE
lfeff.mousemove(e);
}
// binding onresize event
window.onresize = lfeff.resize();
}
It is rather simple. When the page loads – I initialize our main object, and link all the necessary events. Then, after initialization, I loop our main ‘draw’ function, which changing positions of our transparent lens while we moving our mouse.
这很简单。 页面加载时–我初始化我们的主对象，并链接所有必要的事件。 然后，在初始化之后，我循环执行我们的主要“绘制”功能，该功能在移动鼠标时更改透明镜头的位置。
步骤4.图片 (Step 4. Images)
For our demo I used only one image:
对于我们的演示，我只使用了一张图像：
现场演示
结论 (Conclusion)
Today I told you how to create easy flare lens effect to images. Commonly – you can try to play with our JS file to get different results. Hope our javascript lessons still interesting for you. Good luck!
今天，我告诉您如何为图像创建轻松的光晕镜头效果。 通常-您可以尝试使用我们的JS文件来获得不同的结果。 希望我们JavaScript课程对您仍然很有趣。 祝好运！
javascript兼容
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
