Image shaking effect with javascript. Today’s lesson quite entertaining, we’ll learn how to construct a shaking effect. For clarity, we will apply this effect to the picture. You will need to hold down by mouse a certain area in the image and move it to another location (drag). Now, I sure that better to see our online demonstration. How did it achieve? In principle, simply enough, the entire ‘image’ divided into 4 sectors. Place, where we will begin to drag by mouse – is the boundary separating of our four pictures. And shaking effect itself – will only change the sizes of our sectors and pictures in them. Read more.
图像抖动与javascript。 今天的课程非常有趣，我们将学习如何构建震撼效果。 为了清楚起见，我们将这种效果应用于图片。 您将需要用鼠标按住图像中的某个区域，然后将其移动到另一个位置(拖动)。 现在，我相信最好看一下我们的在线演示。 它是如何实现的？ 原则上，很简单，整个“图像”分为四个部分。 我们将开始用鼠标拖动的地方–是四张图片的边界。 抖动效果本身–只会更改我们的扇区和其中的图片的大小。 阅读更多。
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>Image shaking effect using pure JavaScript</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="example">
<div id="main_object">
<div class="tl"><img alt="" src="image.jpg"></div>
<div class="tr"><img alt="" src="image.jpg"></div>
<div class="bl"><img alt="" src="image.jpg"></div>
<div class="br"><img alt="" src="image.jpg"></div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>Image shaking effect using pure JavaScript</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="example">
<div id="main_object">
<div class="tl"><img alt="" src="image.jpg"></div>
<div class="tr"><img alt="" src="image.jpg"></div>
<div class="bl"><img alt="" src="image.jpg"></div>
<div class="br"><img alt="" src="image.jpg"></div>
</div>
</div>
</body>
</html>
Here are main object with 4 images inside
这是里面有4张图像的主要对象
步骤2. CSS (Step 2. CSS)
Here are single CSS file with all necessary styles:
这是具有所有必要样式的单个CSS文件：
css / main.css (css/main.css)
body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:900px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
#main_object{position:relative;width:900px;height:675px;overflow:hidden;cursor:pointer}
#main_object div{position:absolute;overflow:hidden}
#main_object img{position:absolute;-ms-interpolation-mode:nearest-neighbor}
#main_object .tl,#main_object .tl img{top:0;left:0}
#main_object .tr,#main_object .tr img{top:0;right:0}
#main_object .bl,#main_object .bl img{bottom:0;left:0}
#main_object .br,#main_object .br img{right:0;bottom:0}
body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:900px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
#main_object{position:relative;width:900px;height:675px;overflow:hidden;cursor:pointer}
#main_object div{position:absolute;overflow:hidden}
#main_object img{position:absolute;-ms-interpolation-mode:nearest-neighbor}
#main_object .tl,#main_object .tl img{top:0;left:0}
#main_object .tr,#main_object .tr img{top:0;right:0}
#main_object .bl,#main_object .bl img{bottom:0;left:0}
#main_object .br,#main_object .br img{right:0;bottom:0}
步骤3. JS (Step 3. JS)
Here are our main Javascript:
这是我们的主要Javascript：
js / main.js (js/main.js)
var ishk = {
// variables
speedD : .98, // degree of attenuation
speedX : 50, // speed by X
speedY : 60, // speed by X
// inner variables
xm : 0,
ym : 0,
sx : 1,
sy : 1,
svx : 0,
svy : 0,
xd : 1,
yd : 1,
drag : false,
// initialization
init : function() {
// firstly we will pass through all inner div`s and its images and collect styles
this.mobj = document.getElementById('main_object');
var div = this.mobj.getElementsByTagName('div');
this.d = [];
this.i = [];
for (var i = 0; i<4; i++) {
this.d[i] = div[i].style;
this.i[i] = div[i].getElementsByTagName('img')[0].style;
}
// set initial params of our generated result
this.resize();
// prevent text selection in IE
document.onselectstart = function() {
return false;
}
// prevent IE from trying to drag an image
this.mobj.ondrag = function() {
return false;
}
// mouse down event, we will set 'drag flag to true, change cursor and positions
this.mobj.onmousedown = function() {
ishk.drag = true;
ishk.mobj.style.cursor = 'move';
ishk.xd = ishk.xm - ishk.nx;
ishk.yd = ishk.ym - ishk.ny;
return false;
}
// on mouse up - release 'drag' flag, change pointer
document.onmouseup = function() {
ishk.drag = false;
ishk.mobj.style.cursor = 'pointer';
return false;
}
// set max sizes to last image
this.i[3].width = ishk.nw;
this.i[3].height = ishk.nh;
// and initial positions too
ishk.sx = ishk.nx;
ishk.sy = ishk.ny;
// start looping
this.shake();
},
// refreshing mouse positions
mousemove : function(e) {
this.xm = e.clientX;
this.ym = e.clientY;
},
// sub init of initial positions, plus, in case of window resizing - repeat too
resize : function() {
var o = ishk.mobj;
for (ishk.nx = 0, ishk.ny = 0; o != null; o = o.offsetParent)
ishk.nx += o.offsetLeft, ishk.ny += o.offsetTop;
ishk.nw = ishk.mobj.offsetWidth;
ishk.nh = ishk.mobj.offsetHeight;
},
// main shaking function
shake : function() {
// in case of mouse move and dragging - change center position
if (ishk.drag) {
ishk.sx = ishk.xm;
ishk.sy = ishk.ym;
} else { // otherwise - attenuation
ishk.svx = ishk.speedD * ishk.svx - (ishk.sx - ishk.xd - ishk.nx) / ishk.speedX;
ishk.svy = ishk.speedD * ishk.svy - (ishk.sy - ishk.yd - ishk.ny) / ishk.speedY;
ishk.sx += ishk.svx;
ishk.sy += ishk.svy;
}
// calculation new widths and heights of our div`s and images
var w0 = Math.max(0, Math.round(ishk.sx) - ishk.nx);
var h0 = Math.max(0, Math.round(ishk.sy) - ishk.ny);
var w1 = Math.max(0, ishk.nw - (Math.round(ishk.sx) - ishk.nx));
var h1 = Math.max(0, ishk.nh - (Math.round(ishk.sy) - ishk.ny));
var w2 = Math.max(0, Math.round((w0 * ishk.nw) / ishk.xd));
var h2 = Math.max(0, Math.round((h0 * ishk.nh) / ishk.yd));
var w3 = Math.max(0, Math.round((w1 * ishk.nw) / (ishk.nw - ishk.xd)));
var h3 = Math.max(0, Math.round((h1 * ishk.nh) / (ishk.nh - ishk.yd)));
// apply new widths
ishk.d[0].width = w0 + 'px';
ishk.d[1].width = w1 + 'px';
ishk.d[2].width = w0 + 'px';
ishk.d[3].width = w1 + 'px';
ishk.d[0].height = h0 + 'px';
ishk.d[1].height = h0 + 'px';
ishk.d[2].height = h1 + 'px';
ishk.d[3].height = h1 + 'px';
ishk.i[0].width = w2 + 'px';
ishk.i[1].width = w3 + 'px';
ishk.i[2].width = w2 + 'px';
ishk.i[3].width = w3 + 'px';
ishk.i[0].height = h2 + 'px';
ishk.i[1].height = h2 + 'px';
ishk.i[2].height = h3 + 'px';
ishk.i[3].height = h3 + 'px';
// looping current function
setTimeout(ishk.shake, 20); // 1/50*1000 = 20ms (for 50 fps) :)
}
};
window.onload = function() {
ishk.init(); // first initialization
// binding mouse move event
document.onmousemove = function(e) {
if (window.event) e = window.event; // for IE
ishk.mousemove(e);
}
// binding onresize event
window.onresize = ishk.resize;
}
var ishk = {
// variables
speedD : .98, // degree of attenuation
speedX : 50, // speed by X
speedY : 60, // speed by X
// inner variables
xm : 0,
ym : 0,
sx : 1,
sy : 1,
svx : 0,
svy : 0,
xd : 1,
yd : 1,
drag : false,
// initialization
init : function() {
// firstly we will pass through all inner div`s and its images and collect styles
this.mobj = document.getElementById('main_object');
var div = this.mobj.getElementsByTagName('div');
this.d = [];
this.i = [];
for (var i = 0; i<4; i++) {
this.d[i] = div[i].style;
this.i[i] = div[i].getElementsByTagName('img')[0].style;
}
// set initial params of our generated result
this.resize();
// prevent text selection in IE
document.onselectstart = function() {
return false;
}
// prevent IE from trying to drag an image
this.mobj.ondrag = function() {
return false;
}
// mouse down event, we will set 'drag flag to true, change cursor and positions
this.mobj.onmousedown = function() {
ishk.drag = true;
ishk.mobj.style.cursor = 'move';
ishk.xd = ishk.xm - ishk.nx;
ishk.yd = ishk.ym - ishk.ny;
return false;
}
// on mouse up - release 'drag' flag, change pointer
document.onmouseup = function() {
ishk.drag = false;
ishk.mobj.style.cursor = 'pointer';
return false;
}
// set max sizes to last image
this.i[3].width = ishk.nw;
this.i[3].height = ishk.nh;
// and initial positions too
ishk.sx = ishk.nx;
ishk.sy = ishk.ny;
// start looping
this.shake();
},
// refreshing mouse positions
mousemove : function(e) {
this.xm = e.clientX;
this.ym = e.clientY;
},
// sub init of initial positions, plus, in case of window resizing - repeat too
resize : function() {
var o = ishk.mobj;
for (ishk.nx = 0, ishk.ny = 0; o != null; o = o.offsetParent)
ishk.nx += o.offsetLeft, ishk.ny += o.offsetTop;
ishk.nw = ishk.mobj.offsetWidth;
ishk.nh = ishk.mobj.offsetHeight;
},
// main shaking function
shake : function() {
// in case of mouse move and dragging - change center position
if (ishk.drag) {
ishk.sx = ishk.xm;
ishk.sy = ishk.ym;
} else { // otherwise - attenuation
ishk.svx = ishk.speedD * ishk.svx - (ishk.sx - ishk.xd - ishk.nx) / ishk.speedX;
ishk.svy = ishk.speedD * ishk.svy - (ishk.sy - ishk.yd - ishk.ny) / ishk.speedY;
ishk.sx += ishk.svx;
ishk.sy += ishk.svy;
}
// calculation new widths and heights of our div`s and images
var w0 = Math.max(0, Math.round(ishk.sx) - ishk.nx);
var h0 = Math.max(0, Math.round(ishk.sy) - ishk.ny);
var w1 = Math.max(0, ishk.nw - (Math.round(ishk.sx) - ishk.nx));
var h1 = Math.max(0, ishk.nh - (Math.round(ishk.sy) - ishk.ny));
var w2 = Math.max(0, Math.round((w0 * ishk.nw) / ishk.xd));
var h2 = Math.max(0, Math.round((h0 * ishk.nh) / ishk.yd));
var w3 = Math.max(0, Math.round((w1 * ishk.nw) / (ishk.nw - ishk.xd)));
var h3 = Math.max(0, Math.round((h1 * ishk.nh) / (ishk.nh - ishk.yd)));
// apply new widths
ishk.d[0].width = w0 + 'px';
ishk.d[1].width = w1 + 'px';
ishk.d[2].width = w0 + 'px';
ishk.d[3].width = w1 + 'px';
ishk.d[0].height = h0 + 'px';
ishk.d[1].height = h0 + 'px';
ishk.d[2].height = h1 + 'px';
ishk.d[3].height = h1 + 'px';
ishk.i[0].width = w2 + 'px';
ishk.i[1].width = w3 + 'px';
ishk.i[2].width = w2 + 'px';
ishk.i[3].width = w3 + 'px';
ishk.i[0].height = h2 + 'px';
ishk.i[1].height = h2 + 'px';
ishk.i[2].height = h3 + 'px';
ishk.i[3].height = h3 + 'px';
// looping current function
setTimeout(ishk.shake, 20); // 1/50*1000 = 20ms (for 50 fps) :)
}
};
window.onload = function() {
ishk.init(); // first initialization
// binding mouse move event
document.onmousemove = function(e) {
if (window.event) e = window.event; // for IE
ishk.mousemove(e);
}
// binding onresize event
window.onresize = ishk.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 ‘shake’ function, which changing sizes of all our 4 images (sectors).
这很简单。 页面加载时–我初始化我们的主对象，并链接所有必要的事件。 然后，在初始化之后，我循环我们的主要“摇动”功能，该功能会更改所有4个图像(扇区)的大小。
步骤4.图片 (Step 4. Images)
For our demo I used only one image:
对于我们的演示，我只使用了一张图像：
现场演示
结论 (Conclusion)
Today I told you how to create easy shaking effect to images. Commonly – you can try to play with any another objects too. Hope our javascript lessons still interesting for you. Good luck!
今天，我告诉您如何对图像创建轻松的抖动效果。 通常-您也可以尝试与其他任何物体一起玩。 希望我们JavaScript课程对您仍然很有趣。 祝好运！
翻译自: https://www.script-tutorials.com/cross-browser-image-shaking-effect-using-javascript/
扫一扫
98
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
