Here is the current index (HTML and JavaScript):
var maxZ = 1000;
window.onload = function() {
var add = document.getElementById("add");
add.onclick = addSquare;
var colors = document.getElementById("colors");
colors.onclick = changeColors;
var squareCount = parseInt(Math.random() * 21) + 30;
for (var i = 0; i < squareCount; i++) {
addSquare();
}
}
//Generates color
function getRandomColor() {
var letters = "0123456789abcdef";
var result = "#";
for (var i = 0; i < 6; i++) {
result += letters.charAt(parseInt(Math.random() * letters.length));
}
return result;
}
function addSquare() {
var square = document.createElement("div");
var squareArea = document.getElementById("squareArea");
square.className = "square";
square.style.left = parseInt(Math.random() * 650) + "px";
square.style.top = parseInt(Math.random() * 250) + "px";
square.style.backgroundColor = getRandomColor();
square.onclick = squareClick;
squareArea.appendChild(square);
}
function changeColors() {
var squares = document.querySelectorAll("#squareArea div");
for (i = 0; i < squares.length; i++) {
squares[i].style.backgroundColor = getRandomColor();
}
}
function squareClick() {
var oldZ = parseInt(this.style.zIndex);
if (oldZ == maxZ) {
this.parentNode.removeChild(this);
} else {
maxZ++;
this.style.zIndex = maxZ;
}
}
<html>
<head>
<title>Colored Squares</title>
<script src="Squares.js" type="text/javascript"></script>
<link href="Squares.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="squareArea"></div>
<div>
<button id="add">Add Square</button>
<button id="colors">Change Color</button>
</div>
<p>Click a square to move it to the front.</p>
</body>
</html>
Here is the goal:
Edit Colored squares to add the following functionality.
Users will be able to click a square and drag it to any position on the screen. - When the user lets go of the click it will stay in that position.
In order to accomplish this you will need to add Prototype and Scriptaculous to the scripts loaded in the html and use their functionality.
You will also need to create 3 functions in the JavaScript file:
function squareMouseMove(event)
function squareMouseDown(event)
function squareMouseUp(event)
Add appropriate global variables
Change the creation of the squares to added observers for the mouse events that execute the functions.
The issue that you have with your code is that the squares are empty, so they collapse to nothing and you will not see them. Add a width and height to them so you can see them.
Another issue is that you're specifying the left and right, but these properties will have no effect unless you make them absolutely positioned.
Here is your code working with the width, height, and position properties added:
var maxZ = 1000;
window.onload = function() {
var add = document.getElementById("add");
add.onclick = addSquare;
var colors = document.getElementById("colors");
colors.onclick = changeColors;
var squareCount = parseInt(Math.random() * 21) + 30;
for (var i = 0; i < squareCount; i++) {
addSquare();
}
}
//Generates color
function getRandomColor() {
var letters = "0123456789abcdef";
var result = "#";
for (var i = 0; i < 6; i++) {
result += letters.charAt(parseInt(Math.random() * letters.length));
}
return result;
}
function addSquare() {
var square = document.createElement("div");
var squareArea = document.getElementById("squareArea");
square.className = "square";
square.style.left = parseInt(Math.random() * 650) + "px";
square.style.top = parseInt(Math.random() * 250) + "px";
square.style.width = "100px";
square.style.height = "100px";
square.style.position = "absolute";
square.style.backgroundColor = getRandomColor();
square.onclick = squareClick;
squareArea.appendChild(square);
}
function changeColors() {
var squares = document.querySelectorAll("#squareArea div");
for (i = 0; i < squares.length; i++) {
squares[i].style.backgroundColor = getRandomColor();
}
}
function squareClick() {
var oldZ = parseInt(this.style.zIndex);
if (oldZ == maxZ) {
this.parentNode.removeChild(this);
} else {
maxZ++;
this.style.zIndex = maxZ;
}
}
<html>
<head>
<title>Colored Squares</title>
<script src="Squares.js" type="text/javascript"></script>
<link href="Squares.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="squareArea"></div>
<div>
<button id="add">Add Square</button>
<button id="colors">Change Color</button>
</div>
<p>Click a square to move it to the front.</p>
</body>
</html>
Related
I know this is basic. You'll have to excuse me. I'm a js student and I'm having such a hard time with an issue here.
So... I have this code:
<html>
<head>
<title>RocketSeat - Challenge 1</title>
</head>
<body>
<button onclick="MakeSquare()" style="margin-top: 100px;">Make a square</button>
</body>
<script>
function MakeSquare(){
const square = document.createElement('div')
const elementBody = document.querySelector('body')
square.style.backgroundColor ='red'
square.style.width = '50px'
square.style.height = '50px'
square.style.marginTop= '50px'
square.setAttribute('onmouseover','getRandomColor()')
elementBody.appendChild(square)
}
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)]
}
square.style.backgroundColor = color // I know this is not gonna work - I just put here to give the idea.
}
</script>
</html>
As you can see, the button is creating squares.
Now - the issue that I'm having is that it is suppose to change the respective square backcolor as I hover it with my mouse. How could I do it? I have the function to give me a hexcolor but I don't know how to set the element color.
In your MakeSqaure function do the following instead of the setAttribute:
square.addEventListener('mouseover', getRandomColor)
and then:
function getRandomColor( e ) {
const letters = "0123456789ABCDEF";
let color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)]
}
e.target.style.backgroundColor = color
}
Full thing:
<html>
<head>
<title>RocketSeat - Challenge 1</title>
</head>
<body>
<button onclick="MakeSquare()" style="margin-top: 100px;">Make a square</button>
</body>
<script>
function MakeSquare(){
const square = document.createElement('div')
const elementBody = document.querySelector('body')
square.style.backgroundColor ='red'
square.style.width = '50px'
square.style.height = '50px'
square.style.marginTop= '50px'
square.addEventListener('mouseover',getRandomColor)
elementBody.appendChild(square)
}
function getRandomColor( e ) {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)]
}
e.target.style.backgroundColor = color // I know this is not gonna work - I just put here to give the idea.
}
</script>
</html>
Ìnstead of square.setAttribute('onmouseover','getRandomColor()') you need to use AddEventListener, like this: square.addEventListener('mouseover',getRandomColor).
** Edit: I made the code do what you wanted **
<html>
<head>
<title>RocketSeat - Challenge 1</title>
</head>
<body>
<button onclick="MakeSquare()" style="margin-top: 100px;">Make a square</button>
</body>
<script>
function MakeSquare(){
const square = document.createElement('div')
const elementBody = document.querySelector('body')
square.style.backgroundColor ='red'
square.style.width = '50px'
square.style.height = '50px'
square.style.marginTop= '50px'
square.addEventListener('mouseover', () => giveSquareRandomColor(square));
elementBody.appendChild(square)
}
function giveSquareRandomColor(square) {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)]
}
square.style.backgroundColor = color // I know this is not gonna work - I just put here to give the idea.
}
</script>
</html>
var colors = generateRandomColors(6);
var squares = document.querySelectorAll(".square");
var pickedColor = pickColor();
var colorDisplay = document.getElementById("colorDisplay");
var messageDisplay = document.querySelector("#message");
var h1 = document.querySelector("h1");
var resetButton = document.querySelector("#reset");
resetButton.addEventListener("click", function() {
//generate all new colors
colors = generateRandomColors(6);
//pick a new random color from array
pickedColor = pickColor();
//change colorDisplay to match picked Color
colorDisplay.textContent = pickedColor;
//change colors of squares
for(var i = 0; i < squares.length; i++) {
squares[i].style.background = colors[i];
}
h1.style.background = "#232323";
});
colorDisplay.textContent = pickedColor;
for(var i = 0; i < squares.length; i++){
// add initial colors to squares
squares[i].style.background = colors[i];
//add click listeners to squares
squares[i].addEventListener("click", function() {
//grab color of clicked squares
var clickedColor = this.style.background;
//compare color to pickedColor
if(clickedColor === pickedColor) {
messageDisplay.textContent = "Correct!";
resetButton.textContent = "Play Again?";
changeColors(clickedColor);
h1.style.background = clickedColor;
} else {
this.style.background = "#232323";
messageDisplay.textContent = "Try Again";
}
});
}
function changeColors(color) {
//loop through all squares
for(var i = 0; i < squares.length; i++) {
//change each color to match given color
squares[i].style.background = color;
}
}
function pickColor() {
var random = Math.floor(Math.random() * colors.length);
return colors[random];
}
function generateRandomColors(num) {
//make an array
var arr = [];
//add num random colors to arr
for(var i = 0; i < num; i++) {
//get random color and push into arr
arr.push(randomColor());
}
//return that array
return arr;
}
function randomColor() {
//pick a "red" from 0 - 255
var r = Math.floor(Math.random() * 256);
//pick a "green" from 0 - 255
var g = Math.floor(Math.random() * 256);
//pick a "blue" from 0 - 255
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + ", " + g + ", " + b + ")";
}
body {
background-color: #232323;
}
.square {
width: 30%;
background: purple;
padding-bottom: 30%;
float: left;
margin: 1.66%;
}
#container {
margin: 0px auto;
max-width: 600px;
}
h1 {
color: white;
}
#stripe {
background: white;
height: 30px;
text-align: center;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<title>Color Game</title>
<link rel="stylesheet" type="text/css" href="colorGame.css">
</head>
<body>
<h1>The Great <span id="colorDisplay">RGB</span> Color Game</h1>
<div id="stripe">
<button id="reset">New Colors</button>
<span id="message"></span>
</div>
<div id="container">
<div class="square"> </div>
<div class="square"> </div>
<div class="square"> </div>
<div class="square"> </div>
<div class="square"> </div>
<div class="square"> </div>
</div>
<script type="text/javascript" src="colorGame.js"></script>
</body>
</html>
I keep getting the "TypeError: null is not an object (evaluating 'resetButton.addEventListener')" error when I check the html console.
I was under the impression that we're all "copying code" from somewhere so I used Diffchecker to clean up my syntax but that wasn't enough. Modifying i < squares to i < getSquare.length worked only when I moved the resetButton.add code to the bottom of my JS code
var colors = generateRandomColors(6);
var squares = document.querySelectorAll(".square");
var pickedColor = pickColor();
var colorDisplay = document.getElementById("colorDisplay");
var messageDisplay = document.querySelector("#message");
var h1 = document.querySelector("h1");
var resetButton = document.querySelector("#reset");
resetButton.addEventListener("click", function() {
//generate all new colors
colors = generateRandomColors(6);
//pick a new random color from array
pickedColor = pickColor();
//change colorDisplay to match picked Color
colorDisplay.textContent = pickedColor;
//change colors of squares
for(var i = 0; i < squares.length; i++) {
squares[i].style.background = colors[i];
}
h1.style.background = "#232323";
});
colorDisplay.textContent = pickedColor;
for(var i = 0; i < squares.length; i++){
// add initial colors to squares
squares[i].style.background = colors[i];
//add click listeners to squares
squares[i].addEventListener("click", function() {
//grab color of clicked squares
var clickedColor = this.style.background;
//compare color to pickedColor
if(clickedColor === pickedColor) {
messageDisplay.textContent = "Correct!";
resetButton.textContent = "Play Again?";
changeColors(clickedColor);
h1.style.background = clickedColor;
} else {
this.style.background = "#232323";
messageDisplay.textContent = "Try Again";
}
});
}
function changeColors(color) {
//loop through all squares
for(var i = 0; i < squares.length; i++) {
//change each color to match given color
squares[i].style.background = color;
}
}
function pickColor() {
var random = Math.floor(Math.random() * colors.length);
return colors[random];
}
function generateRandomColors(num) {
//make an array
var arr = [];
//add num random colors to arr
for(var i = 0; i < num; i++) {
//get random color and push into arr
arr.push(randomColor());
}
//return that array
return arr;
}
function randomColor() {
//pick a "red" from 0 - 255
var r = Math.floor(Math.random() * 256);
//pick a "green" from 0 - 255
var g = Math.floor(Math.random() * 256);
//pick a "blue" from 0 - 255
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + ", " + g + ", " + b + ")";
}
I got error notices elsewhere. All of my squares are purple.
My question is as follows, how could I pass images that are inside an array to a div?
I've multiplied the div#imagem and I need to pass the array images to it.
But I do not know how.. Can someone help me?!
My JavaScript/JQuery
var divBoard = $("<div id='board'></div>");
$("body").after(divBoard);
var titleGame = $("<h1></h1>").text("Memory Game");
var btnReset = $("<input id='btn-reset' type='button' onclick='reset()' value='Reset'>");
$("#board").append(titleGame);
$("#board").append(btnReset);
(function (){
var images = ['img/facebook.png','img/android.png','img/chrome.png','img/firefox.png','img/html5.png','img/googleplus.png','img/twitter.png','img/windows.png','img/cross.png'];
$(window).load(function () {
$('#board').html('');
var numCards = 16;
for (var i = 1; i <= numCards; i++) {
$("#board").append("<div class='image" + i + " images'></div>") &&
$(".image" + i).clone().appendTo("#board");
}
var cards = $(".images");
for (var i = 0; i < cards.length; i++) {
var target = Math.floor(Math.random() * cards.length - 1) + 1;
var target2 = Math.floor(Math.random() * cards.length - 1) + 1;
var target3 = Math.floor(Math.random() * cards.length - 1) + 1;
}
})();
app.start();
});
My HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>JavaScript Memory Game</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script charset="utf8">
var app = { nrComponents:0 };
app.getComponent = function(name) {
if (!app[name]) {
app[name] = {};
app[app.nrComponents++] = name;
}
return app[name];
};
</script>
<script src="script.js" charset="utf8"></script>
</body>
</html>
Here are critical 2 problems I listed. Some line in your code seems not neccecery and hard to debug for it. I would suggest to simplify your code for better debugging.Hope it helps..
$("body").after(divTabuleiro); I think this will insert content after 'body' instead of putting 'divTabuleiro' inside the 'body'.
$("#tabuleiro").append(""); should have tag inside for insert images.
// Create a start function and move you initial code here....
app.start = function(){
var imagens = [
'https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg',
'http://www.pressunion.org/wp-content/uploads/2016/11/1-2.jpg',
'http://www.feixiubook.com/wp-content/uploads/2016/06/01-25.jpg'
];
var divTabuleiro = $("<div id='tabuleiro'></div>");
$("body").append(divTabuleiro);
var titulo = $("<h1></h1>").text("Jogo da Memória");
var btnReset = $("<input id='btn-reset' type='button' onclick='reset()' value='Reset'>");
$("#tabuleiro").append(titulo);
$("#tabuleiro").append(btnReset);
$('#tabuleiro').html('');
var numCards = 3;
for (var i = 0; i < numCards; i++) {
var img = imagens[i];
$("#tabuleiro").append("<div class='my-image-" + i + " my-image'><img src='" + img + "'></div>") && $(".my-image-" + i).clone().appendTo("#tabuleiro");
}
// randomize cards in stack
var cards = $(".my-image");
for (var i = 0; i < cards.length; i++) {
var target = Math.floor(Math.random() * cards.length - 1) + 1;
var target2 = Math.floor(Math.random() * cards.length - 1) + 1;
var target3 = Math.floor(Math.random() * cards.length - 1) + 1;
cards.eq(target).before(cards.eq(target2)).before(cards.eq(target3));
}
};
// Maybe create another function
app.reset = function(){
};
$(window).ready(function() {
// Because you have created a start function above. you can call it when document ready
app.start();
});
.my-image {
width: 200px;
height: 200px;
overflow: hidden;
float: left;
}
.my-image img {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// Create a namespace of app
var app = { nrComponents:0 };
// Add a function 'getComponent' in to it
app.getComponent = function(name) {
if (!app[name]) {
app[name] = {};
app[app.nrComponents++] = name;
}
return app[name];
};
// So There is no start() function inside......
// we can add start function later..
</script>
Hm.. I somehow don't understand your exact request, but for making images based on an array you can use this as a guide :
var imagens = ['img/facebook.png','img/android.png','img/chrome.png','img/firefox.png','img/html5.png','img/googleplus.png','img/twitter.png','img/windows.png','img/cross.png'];
$.each(imagens,function(index,imageSrc){
$("Parent Element").append('<img src="'+imageSrc+'" />');
});
hope it helps.
I want to populate the entire window with rectangles, no matter what size of window it is. eg. If rectangles are 250px wide, and window is 1000px wide, then it shold be 4 rec. in one row. I managed to fill just one row. Here is the code below
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
width: 250px;
height: 150px;
border: 1px solid black;
border-collapse: collapse;
display: block;
position: fixed;
}
</style>
<script>
function ubaci_div() {
var sto = 0;
var ipsilon = "px";
for (var x = 0; sto < window.innerWidth; x++) {
var cet = sto + ipsilon;
var divovi = document.createElement("DIV");
document.getElementById("body").appendChild(divovi);
document.getElementsByTagName("DIV")[x].setAttribute("id", "id1");
document.getElementsByTagName("DIV")[x].style.left = cet;
sto += 250;
}
}
</script>
</head>
<body id="body">
<p id="p" onclick="ubaci_div()">Klikni</p>
</body>
</html>
I think you are asking for something like this?
https://jsfiddle.net/DIRTY_SMITH/cfckvvzw/9/
function ubaci_div() {
var i = 0;
var h = window.innerHeight;
var num = (h / 150);
for (i = 0; i < num; i++) {
alert(num);
loop();
var br = document.createElement('br');
}
}
function loop() {
var sto = 0;
var ipsilon = "px";
for (var x = 0; sto < window.innerWidth - 250; x++) {
var cet = sto + ipsilon;
var divovi = document.createElement("DIV");
document.getElementById("body").appendChild(divovi);
document.getElementsByTagName("DIV")[x].setAttribute("id", "id1");
document.getElementsByTagName("DIV")[x].style.left = cet;
sto += 250;
}
}
Something like this?
JSFiddle: https://jsfiddle.net/vc7w608m/
var rectangleWidth = 250;
var rectangleHeight = 100;
var columnCount = Math.ceil(window.innerWidth / rectangleWidth);
var rowCount = Math.ceil(window.innerHeight / rectangleHeight);
console.log(columnCount, rowCount)
for (var rowIndex = 0; rowIndex < rowCount; rowIndex++) {
var rowDiv = document.createElement("div");
rowDiv.style.height = rectangleHeight + "px";
rowDiv.style["white-space"] = "nowrap";
rowDiv.style["overflow"] = "hidden";
document.body.appendChild(rowDiv);
for (var columnIndex = 0; columnIndex < columnCount; columnIndex++) {
var rectangle = document.createElement("div");
rectangle.style.height = rectangleHeight + "px";
rectangle.style.width = rectangleWidth + "px";
rectangle.style.display = "inline-block";
rectangle.style["background-color"] = "rgb(" + (Math.floor(Math.random()*256)) + ", " + (Math.floor(Math.random()*256)) + ", " + (Math.floor(Math.random()*256)) + ")";
rowDiv.appendChild(rectangle);
}
}
As mentioned in the title, I want onmouseover event of an object to scale it to 1.2 of its size, and then on onmouseout event I want it to scale back to its original size (1). But the onmouseout event does not return to its original size. Related code is as follows:
var renderer = PIXI.autoDetectRenderer(800, 500, { backgroundColor: 0x1099bb });
$("#container").append(renderer.view);
var stage = new PIXI.Container();
var container = new PIXI.Container();
stage.addChild(container);
var bunnyArray = new Array();
for (var i = 0; i < 5; i++)
{
bunnyArray[i] = new Array();
}
for (var i = 0; i < 5; i++) {
for (var j = 0; j < 5; j++) {
var rect = new PIXI.Graphics();
var width = 70;
rect.lineStyle(1, randomColor());
rect.interactive = true;
rect.hitArea = new PIXI.Rectangle(width*i,width*j, width + width * rect.scale.x, width + width * rect.scale.y);
//rect.position.x =10;
//rect.position.y = 10;
rect.position.set(width * i, width * j);
rect.zIndex = 2;
rect.drawRect(0, 0, width, width);
bunnyArray[i][j] = rect;
container.addChild(bunnyArray[i][j]);
}
}
for (var i = 0; i < bunnyArray.length; i++)
{
for (var j = 0; j < bunnyArray[i].length; j++)
{
bunnyArray[i][j].on("click", onClick);
bunnyArray[i][j].on("mouseover", onMouseover);
bunnyArray[i][j].on("mouseout", onMouseout);
}
}
container.x = 200;
container.y = 60;
renderImage();
function renderImage()
{
requestAnimationFrame(renderImage);
//renderer.render(container);
renderer.render(container);
//renderer.render(stage);
}
function animate() {
requestAnimationFrame(animate);
var bunny1 = thisPointer;
bunny1.rotation += 0.03;
cancelAnimationFrame(request);
}
function Scale(pointer) {
pointer.scale.x += 0.2;
pointer.scale.y += 0.2;
pointer.zIndex = 4;
return pointer;
}
function ScaleDel(requestPointer) {
//pointer.scale.x -= 0.2;
//pointer.scale.y -= 0.2;
if (requestPointer != undefined || requestPointer != null)
{
requestPointer.mouseover = null;
}
}
var thisPointer;
var request;
function onClick(eventData)
{
thisPointer = calcuatePos(eventData);
request = requestAnimationFrame(animate);
thisPointer.rotation = 0;
}
var requestPointer;
function onMouseover(eventData)
{
var thisPointer = calcuatePos(eventData);
//request = requestAnimationFrame(Scale);
requestPointer= Scale(thisPointer);
}
function onMouseout(eventData)
{
ScaleDel(requestPointer);
}
//生成随机颜色
function randomColor() {
var colorStr = Math.floor(Math.random() * 0xFFFFFF).toString(16).toUpperCase();
return "000000".substring(0, 6 - colorStr) + colorStr;
}
//判断是否点击了这个东西
function calcuatePos(eve)
{
var x = (eve.data.global.x);
var y = (eve.data.global.y);
x =x- container.x;
y =y- container.y;
var increaseRectScale = 70;
for (var i = 0; i < bunnyArray.length; i++) {
for (var j = 0; j < bunnyArray[i].length; j++) {
var instance = bunnyArray[i][j];
//increaseRectScale *= instance.scale.x;
if (instance.position.x <= x && instance.position.x + increaseRectScale >= x && instance.position.y <= y && instance.position.y + increaseRectScale >= y) {
//instance.pivot.set(increaseRectScale/2 , increaseRectScale/2 );
var a = document.createElement('a');
a.href = randomLink();
a.target = '_blank';
a.style.visibility = "hidden";
document.body.appendChild(a);
a.click();
return instance;
}
}
}
}
container.updateLayersOrder = function () {
container.children.sort(function (a, b) {
a.zIndex = a.zIndex || 0;
b.zIndex = b.zIndex || 0;
return b.zIndex - a.zIndex;
});
}
function randomNumber()
{
return Math.ceil(Math.random() * 10);
}
function randomLink()
{
var hyperLink = "";
var number = randomNumber();
switch (number)
{
case 0:
hyperLink = "http://www.baidu.com";
break;
case 1:
hyperLink = "http://www.17173.com";
break;
case 2:
hyperLink = "http://www.stackoverflow.com";
break;
case 3:
hyperLink = "http://www.163.com";
break;
case 4:
hyperLink = "http://www.5173.com";
break;
case 5:
hyperLink = "http://www.sina.com";
break;
case 6:
hyperLink = "http://www.qq.com";
break;
case 7:
hyperLink = "http://www.hp.com";
break;
case 8:
hyperLink = "http://www.youku.com";
break;
case 9:
hyperLink = "http://www.tudou.com";
break;
}
return hyperLink;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://files.cnblogs.com/files/kmsfan/pixi.js"></script>
<div id="container"></div>
You used "+=" for scaling up the Rect and, as Goose Ninja noted, you didn't scaled down in the ScaleDel function. If you want a scale factor of 1.2 just set to this scale.
Turns out you don't need the function calculatePos for detecting the target object, since PIXI binds the this to them in the interactive callbacks - http://www.goodboydigital.com/pixi-js-now-even-better-at-being-interactive/
Here is a codepen: http://codepen.io/anon/pen/qOXKEZ. I just changed the onMouseOver and noMouseOut functions and set the hitArea of each object to a local rectangle: new PIXI.Rectangle(0,0, width,width)
function onMouseover(eventData)
{
//var thisPointer = calcuatePos(eventData);
//request = requestAnimationFrame(Scale);
//requestPointer= Scale(thisPointer);
this.scale.set(1.2,1.2);
}
function onMouseout(eventData)
{
//ScaleDel(calcuatePos(eventData));
this.scale.set(1.0,1.0);
}