File: mouse_example.html

Recommend this page to a friend!
  Classes of Arturs Sosins  >  Lightning effect  >  mouse_example.html  >  Download  
File: mouse_example.html
Role: Example script
Content type: text/plain
Description: Lightning on mouse move
Class: Lightning effect
Draw a random lightning bolt on the page
Author: By
Last change:
Date: 10 years ago
Size: 2,774 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<!--
/*************************************************************
 * This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
 * Feel free to distribute and modify code, but keep reference to its creator
 *
 * Lightning draws a randomly generated lightning with glow effect on html page
 * from x and y coordinates, to other x and y coordinates.
 *
 * For more information, examples and online documentation visit: 
 * http://webcodingeasy.com/JS-classes/Javascript-lightning-effect
**************************************************************/
-->
<html>
<head>
</head>
<body style='background-color: #000;'>
<h1 style='color: #fff; text-align: center;'>Just hold down your mouse and move it around</h1>
<script type="text/javascript" src="./lightning.packed.js" ></script>
<script type="text/javascript">
//get viewport dimensions
var viewport = function(){
	var viewport = new Object();
	viewport.width = 0;
	viewport.height = 0;
	// the more standards compliant browsers (mozilla/netscape/opera/IE7) 
	//use window.innerWidth and window.innerHeight
	if (typeof window.innerWidth != 'undefined')
	{
		viewport.width = window.innerWidth,
		viewport.height = window.innerHeight
	}
	else if (typeof document.documentElement != 'undefined'
	&& typeof document.documentElement.clientWidth !=
	'undefined' && document.documentElement.clientWidth != 0)
	{
		viewport.width = document.documentElement.clientWidth,
		viewport.height = document.documentElement.clientHeight
	}
	else
	{
		viewport.width = document.getElementsByTagName('body')[0].clientWidth,
		viewport.height = document.getElementsByTagName('body')[0].clientHeight
	}
	return viewport;
};

var v = viewport();
	
//generate random coordinates at one of the sides
function randomSide(){
	var startX;
	var startY;
	var rand = Math.random();
	if(rand <= 0.25){
		startX = Math.random(0,v.width);
		startY = 0
	}
	else if(rand <= 0.5){
		startX = Math.random(0,v.width);
		startY = v.height;
	}
	else if(rand <= 0.75){
		startX = 0;
		startY = Math.random(0,v.height);
	}
	else if(rand <= 1){
		startX = v.width;
		startY = Math.random(0,v.height);
	}
	var ob = {};
	ob.startX = startX;
	ob.startY = startY;
	return ob;
}

var lt = new lightning({glow: false});
var draw = false;
document.body.onmousedown = function(e){
	var ob = randomSide();
	lt.show(ob.startX, ob.startY, e.clientX, e.clientY);
	draw = true;
}
document.body.onmousemove = function(e){
	if(draw)
	{
		lt.hide();
		var ob = randomSide();
		lt.show(ob.startX, ob.startY, e.clientX, e.clientY);
	}
}
document.body.onmouseup = function(e){
	draw = false;
	lt.hide();
}
//lt.hide();
</script>
</body>
</html>