Παυση κινησης (javascript)...

chrism4111 · 18 Νοεμβρίου 2009

Γεια σας αγαπητοί χρήστες του Insomnia....

Ας μπω κατευθειαν στο θέμα ...

Λοιπόν εχω τον παρακάτω κωδικα html στον οποιο τρεχει και ενα scriptακι κινησης καρε μιας λιστας:

>	 
<html>
<head>
<style type="text/css">

#wrap {
height: 150px;
width: 180px;
display: block;
overflow: hidden;
position: relative;
}


#rotator {
width: 10000px;
margin-top: 0px;
margin-bottom: 0px;
margin-right: 0px;
margin-left: -1080px;
padding: 0;
position: absolute;
}

#rotator li {
height: 150px;
width: 180px;
margin: 0;
padding: 0;
float: left;
display: inline;
}
body {
margin: 0;
padding: 0;
}
h1 {
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
h1 a {
width: 180px;
height: 150px;
display: block;
color: #eee;
text-decoration: none;
font-family: sans-serif;
font-size: 11pt;
text-indent: -1200px;
}
</style>
<script type="text/javascript">

var AmountOfFrames = 6;

var posX = 0;

var width = 180;

var newPosX = 0;

var movementTimeout, frameTimeout;

var maxWidth = 180*AmountOfFrames;

var frameID = -1;

var frameDelays = new Array();

var t = 0;

frameDelays[0] = 1000 * 2.5;
frameDelays[1] = 1000 * 2.5;
frameDelays[2] = 1000 * 2.5;
frameDelays[3] = 1000 * 2.5;
frameDelays[4] = 1000 * 2.5;
frameDelays[5] = 1000 * 2.5;


function resetRotator(pos){
var elem = document.getElementById("rotator");
elem.style.marginLeft ="0px";
posX = 0;
}

function moveElem( pos){
var elem = document.getElementById("rotator");
elem.style.marginLeft = -pos + "px";
}

function moveFrame(){
if( t < 1 ){
var p = ( 1.0 - Math.cos( t * 3.14159) )*0.5;
moveElem( posX*(1-p) + p*newPosX);
t += 0.07;
movementTimeout = setTimeout("moveFrame()", 40);
}
else{
moveElem(newPosX);
posX = newPosX;
t = 0;
}
}

function makeTransition(){
newPosX = posX + width;

if( newPosX < maxWidth ){
moveFrame();
}

}

function slideShow(){

if (frameID == -1){ 
resetRotator();
}

if( frameID >= 0 ){
makeTransition();
}
frameID += 1;
var timeout = frameDelays[ frameID ];
frameTimeout = setTimeout( "slideShow()", timeout );
if(frameID >= 20) frameID = -1;
}

</script>
</head>
<body onload="slideShow()">
<h1>
</h1>
<div id="wrap">
<ul id="rotator" style="margin-left: 180px;">
<li>
<a href="www.mplamplampla.gr"><img src="5-150x180.jpg"></a>
</li>
<li>
<img src="exhcange150x180.jpg">
</li>
<li>
<img src="150x180-business_advantages_full.gif">
</li>
<li>
<img src="fashion_150_150x180.jpg">
</li>
<li>
<img src="hiv.humanism.gr-banner-150x180.jpg">
</li>
<li>
<img src="Haravgi - Sample.jpg">
</script>
</li>
<noscript><li></li>
</noscript>
</ul>
</div>
<span id="tmp"></span>
</body>
</html>

Λοιπον αυτο που θέλω να κανω ειναι το εξης:

Οπως βλεπουμε τα αντικειμενα τις λιστας να γυρνανε οταν παω το βελος πανω σε ενα αντκειμενο να σταματαει και οταν το βελος φυγει απο εκει να συνεχιζει με την προβολη των υπολειπων αντικειμενων..

ρωτησα την teacher μου και μου απαντησε οτι ισως γινετε την συναρτηση onMouseOver.

Εψαξα αλλα δεν βρηκα τπτ.

Μήπως ξερει κανειςνα μ πει τη παραπάνω πρεπει να προσθεσω για να το πετυχω?

Ευχαριστω πολυ!!

Leatherwolfgr · 18 Νοεμβρίου 2009

Καλημέρα. Γιατί δεν δοκιμάζεις να το κάνεις με jQuery. Πιστεύω ότι θα σου φανεί πολύ πιο εύκολο. Οπως και να έχει η απάντηση στο πρόβλημά σου είναι απλή. Οταν φορτώσει η σελίδα καλείς το function slideShow το οποίο καλεί κάποια άλλα functions και με το setTimeout καλεί "τον εαυτό του" για να ξανακάνει το animation. Το μόνο που έχεις να κάνεις για να σταματήσεις το animation είναι να το αποτρέψεις το function slideShow να καλέσει τον εαυτό του δηλαδή να κάνεις clearInterval όταν το mouse πάει πάνω στο div με id wrap. Μετά για να συνεχίσεις το animation πρέπει να ξανακαλέσεις το function slideShow όταν το mouse φύγει απο το div.

Κάνε το:

Ετσι:

chrism4111 · 18 Νοεμβρίου 2009

Καλημέρα. Γιατί δεν δοκιμάζεις να το κάνεις με jQuery. Πιστεύω ότι θα σου φανεί πολύ πιο εύκολο. Οπως και να έχει η απάντηση στο πρόβλημά σου είναι απλή. Οταν φορτώσει η σελίδα καλείς το function slideShow το οποίο καλεί κάποια άλλα functions και με το setTimeout καλεί "τον εαυτό του" για να ξανακάνει το animation. Το μόνο που έχεις να κάνεις για να σταματήσεις το animation είναι να το αποτρέψεις το function slideShow να καλέσει τον εαυτό του δηλαδή να κάνεις clearInterval όταν το mouse πάει πάνω στο div με id wrap. Μετά για να συνεχίσεις το animation πρέπει να ξανακαλέσεις το function slideShow όταν το mouse φύγει απο το div.

Κάνε το:

<div id="wrap">...</div>

Ετσι:

<div id="wrap" onMouseOver="clearInterval(frameTimeout)" onMouseOut="slideShow()">...</div>

Ευχαριστω για την απάντηση βοήθησε παρα πολυ και με λιγο ψαξιμο και βοηθεια μπορουμε να διορθωσουμε ενα ψιλοcrash που παιζει δηλ οτι οταν πηγαινω πανω με το ποντικι ναι μεν σταματαει αλλα οταν το ποντικι φευγει απο εκει τοτε κανει μεταπιδησει ολες τις εικονες και μου βγαζει κενο και μετα απολιγο συνεχιζει to animation..

Δεν πειραζει ομως γιατι μια εργασια ειναι θελουμε (δηλ μας βαλαν στην σχολη στο λουκι να μαθουμε asp.Net την Visual Studio 2008 και να παραδωσουμε ενα ηλεκτρονικο καταστημα σαν Project και ειπαμε να βαλουμε μερικα σκριπτακια(γι'αυτο χρησιμοποιησαμε μονο και μονο javascript).

Ερωτηση :

1. Με ποιον τροπο γινετε καλυτερα ο σχεδιασμος μιας ιστοσελιδας στο Visual Studio( πια τεχνικη εννοω)??

2.Πως μπορω να βαλω background-image με repeat (εχω κανει τα παντα αλλα image δεν βλέπω)

3.Επειδη ειμαι καινουριος στον xωρο του VS.net πως μπορω ενα κουτι κειμενου να το συνδεσω με ενα submit button και το button αυτο να κανει υποβολη του κειμενου που θα εχει γραφτει μεσα στο κουτι σε ενα και μοναδικο e-mail?

Leatherwolfgr · 18 Νοεμβρίου 2009

Δυστυχώς δεν κατέχω από VS. Είμαι παιδί της PHP οπότε δεν μπορώ να σε βοηθήσω σε σχέση με αυτό. Το μόνο που μπορώ να κάνω είναι να σε κατευθύνω λίγο για την υλοποίηση του contact form και ο πιο εύκολος τρόπος να το κάνω είναι το google. Δες σε αυτό το search τι βρήκα. Ελπίζω να σε βοηθήσει. Σχετικά με το background απλά πρέπει να βάλεις στο css σου το παρακάτω:

body {

margin: 0;

padding: 0;

background-image:url(../images/image.jpg);

}

Όπου "../images/image.jpg" είναι το path και το όνομα του αρχείου που θες να βάλεις σαν background. Αυτόματα το image θα κάνει tile σε όλο το ύψος και πλάτος της σελίδας σου. Αν θες μόνο σε πλάτος ή ύψος τότε προσθέτεις και το background-repeat:repeat-x; ή background-repeat:repeat-y; αντίστοιχα.

chrism4111 · 18 Νοεμβρίου 2009

Δυστυχώς δεν κατέχω από VS. Είμαι παιδί της PHP οπότε δεν μπορώ να σε βοηθήσω σε σχέση με αυτό. Το μόνο που μπορώ να κάνω είναι να σε κατευθύνω λίγο για την υλοποίηση του contact form και ο πιο εύκολος τρόπος να το κάνω είναι το google. Δες σε αυτό το search τι βρήκα. Ελπίζω να σε βοηθήσει. Σχετικά με το background απλά πρέπει να βάλεις στο css σου το παρακάτω:

body {

margin: 0;

padding: 0;

background-image:url(../images/image.jpg);

}

Όπου "../images/image.jpg" είναι το path και το όνομα του αρχείου που θες να βάλεις σαν background. Αυτόματα το image θα κάνει tile σε όλο το ύψος και πλάτος της σελίδας σου. Αν θες μόνο σε πλάτος ή ύψος τότε προσθέτεις και το background-repeat:repeat-x; ή background-repeat:repeat-y; αντίστοιχα.

Δεν ειμαι καινουριος στον χωρο του design .Css και html ξερω και κατα την γνωμη μ αρκετα καλα το θεμα ειναι οτι φτιαχνω την σελιδα στο Visual Studio με πινακες και επισης με χρηση css την εντολη position:absolute; και position:releative; και ολα δουλεβουν κανονικα. Βαζω ομως

background-image:url("image/eikona.jpg") repeat-x;

και δεν δειχνει τιποτα αλλα αφου δεν εχεις ασχοληθει με VS.net τοτε δεν θα μπορεις να βοηθησεις ...δεν πειραζει

Αν καποιος μπορει να με διαφωτησει στο θεμα του background sthn VS.net ......εχω φαει τοπο και δεν γινετε τιποτα

---------- Το μήνυμα προστέθηκε στις 19:28 ----------

Ξεχασα και κατι αλλο ευχαριστω πολυ για το search πολυ διαφωτιστικο ηταν αυτο που ηθελα.....

djpaul1963 · 19 Νοεμβρίου 2009

Δεν υπάρχει τίποτα περίεργο στο VS σχετικά με το θέμα του background. Ετσι κι αλλιώς δεν είναι server side για να έφταιγε σε κάτι το VS αλλά τρέχει στον browser του καθενός. Θα έλεγα να τσεκάρεις το path. Αν το ίδιο κομάτι κώδικα το βάλεις σε ένα απλό html βλέπεις το bacground δηλαδή?

chrism4111 · 19 Νοεμβρίου 2009

Δεν υπάρχει τίποτα περίεργο στο VS σχετικά με το θέμα του background. Ετσι κι αλλιώς δεν είναι server side για να έφταιγε σε κάτι το VS αλλά τρέχει στον browser του καθενός. Θα έλεγα να τσεκάρεις το path. Αν το ίδιο κομάτι κώδικα το βάλεις σε ένα απλό html βλέπεις το bacground δηλαδή?

Το ξανα ελεγξα και καταφερα να βαλω backgroun-image αλλα βαζει μονο σε contentplaceholder και οχι σε υποπινακες μεσα σε αυτο. Πχ εχω μια master page με εναν πινακα 3χ3 σε καποιο κελι τοποθετω ενα contentplaceholder και δημιουργω τωρα μεσα σε αυτο αλλον εναν πινακα 1χ1 και μεσα σε αυτον αλλον εναν 1χ6 για να τον κανω μενου. Ωραια τωρα στον τελευταιο πινακα 1χ6 που ειναι μενου θελω να βαλω μια εικονα σαν background me repeat-x.Εχω ψαξει ολα τα πιθανα λαθη που μπορει να υπαρχουν αλλα παντα στο πλαισιο Css Propeptories διαγραφει αυτην την ιδιοτητα. Τι να πω απλα μαλλον δεν θα κανω χρηση images για τετοιες περιπτωσεις .

----------------------------------------------

Και μολις ελεγξα αυτο που με ρωτησες οτι αν τον ιδιο κωδικα τον βαλω σε ενα απλο html .... Ναι μου το δειχνει το background σε απλο html στο VS οχι..

Σύνδεση

Παυση κινησης (javascript)...

Προτεινόμενες αναρτήσεις

chrism4111

Leatherwolfgr

chrism4111

Leatherwolfgr

chrism4111

djpaul1963

chrism4111

Αρχειοθετημένο

Σύνδεση