New wiki-page
mNo edit summary |
mNo edit summary |
||
Line 1: | Line 1: | ||
/* Any JavaScript here will be loaded for all users on every page load. */ | /* Any JavaScript here will be loaded for all users on every page load. */ | ||
$.fn.attachDragger = function(){ | |||
var attachment = false, lastPosition, position, difference; | |||
$( $(this).selector ).on("mousedown mouseup mousemove",function(e){ | |||
if( e.type == "mousedown" ) attachment = true, lastPosition = [e.clientX, e.clientY]; | |||
if( e.type == "mouseup" ) attachment = false; | |||
if( e.type == "mousemove" && attachment == true ){ | |||
position = [e.clientX, e.clientY]; | |||
difference = [ (position[0]-lastPosition[0]), (position[1]-lastPosition[1]) ]; | |||
$(this).scrollLeft( $(this).scrollLeft() - difference[0] ); | |||
$(this).scrollTop( $(this).scrollTop() - difference[1] ); | |||
lastPosition = [e.clientX, e.clientY]; | |||
} | |||
}); | |||
$(window).on("mouseup", function(){ | |||
attachment = false; | |||
}); | |||
} | |||
$(document).ready(function(){ | |||
$(".tree").attachDragger(); | |||
}); | |||
//AUTHOR: SATKAR DHAKAL. YOU ARE FREE TO USE, EDIT AND MODIFY THE CODE. | //AUTHOR: SATKAR DHAKAL. YOU ARE FREE TO USE, EDIT AND MODIFY THE CODE. |
Revision as of 00:17, 24 July 2017
/* Any JavaScript here will be loaded for all users on every page load. */ $.fn.attachDragger = function(){ var attachment = false, lastPosition, position, difference; $( $(this).selector ).on("mousedown mouseup mousemove",function(e){ if( e.type == "mousedown" ) attachment = true, lastPosition = [e.clientX, e.clientY]; if( e.type == "mouseup" ) attachment = false; if( e.type == "mousemove" && attachment == true ){ position = [e.clientX, e.clientY]; difference = [ (position[0]-lastPosition[0]), (position[1]-lastPosition[1]) ]; $(this).scrollLeft( $(this).scrollLeft() - difference[0] ); $(this).scrollTop( $(this).scrollTop() - difference[1] ); lastPosition = [e.clientX, e.clientY]; } }); $(window).on("mouseup", function(){ attachment = false; }); } $(document).ready(function(){ $(".tree").attachDragger(); }); //AUTHOR: SATKAR DHAKAL. YOU ARE FREE TO USE, EDIT AND MODIFY THE CODE. var context=document.getElementById("canvas"); var image=document.getElementsByClassName('picture')[0]; var canvasWidth=context.width; var canvasHeight= context.height; var imageWidth=image.width; var imageHeight= image.height; var fogCount=10; var fog=new Image(); var picture=new Image(); var fogs=[]; var FPS=20; var maxVel=1; fog.src = "https://s27.postimg.org/57e6pz0xf/fog.png"; picture.id = "pic"; picture.src=image.src; function fogPart(){ this.x=0; this.y=0; this.xVel=0; this.yVel=0; this.radius=5; this.draw=function(){ context.drawImage(this.image,this.x-100,this.y-100); }; this.update=function(){ this.x += this.xVel; this.y += this.yVel; if (this.x >= canvasWidth) { this.xVel = -this.xVel; this.x = canvasWidth; } else if (this.x <= 0) { this.xVel = -this.xVel; this.x = 0; } if (this.y >= canvasHeight) { this.yVel = -this.yVel; this.y = canvasHeight; } else if (this.y <= 0) { this.yVel = -this.yVel; this.y = 0; } }; this.setImage=function(img){ this.image=img; }; this.setPos = function(x, y) { this.x = x; this.y = y; }; this.setVel = function(x, y) { this.xVel = x; this.yVel = y; }; }; function random(min, max){ return Math.random() * (max - min) + min; } function init() { if (canvas.getContext) { context = canvas.getContext('2d'); for(var i=0; i < fogCount; i++){ var fog = new fogPart(); fog.setPos(random(0, canvasWidth), random(0, canvasHeight)); fog.setVel(random(-maxVel, maxVel), random(-maxVel, maxVel)); fogs.push(fog); } } else { alert("UN-supported browser"); } }; fog.onload=function(){ fogs.forEach(function(part){ part.setImage(fog); }); }; function draw(){ context.drawImage( picture, (canvasWidth / 2) - image.width / 2, (canvasHeight / 2)- image.height / 2, canvasWidth , canvasWidth * image.naturalHeight / image.naturalWidth ); context.globalAlpha = 0.09; fogs.forEach(function(part) { part.draw(); }); }; function update(){ fogs.forEach(function(part){ part.update(); }); }; init(); if (context) { setInterval(function() { update();draw(); }, 1000 / FPS); }