File: Img_in_movement.html

Recommend this page to a friend!
  Classes of Michele Prigijhjhj   Image in Movement   Img_in_movement.html   Download  
File: Img_in_movement.html
Role: Example script
Content type: text/plain
Description: Example
Class: Image in Movement
Move a large image inside a smaller page element
Author: By
Last change: a change
Date: 12 years ago
Size: 1,239 bytes


Class file image Download
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Immagine in movimento</title> <style type="text/css"> body{ background:rgb(255,220,220)} #container{ position:relative; margin:20px auto; width:350px; height:250px; /*border:1px solid;*/ } #box{ position: absolute; top:0; left:0; width:350px; height:250px; overflow: hidden; } </style> <script type="text/javascript" src="jquery-1.7.1.min.js"> </script> <script type="text/javascript" src="Muovi_Img.js"> </script> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery(function($){ $("#box").MuoviImg(6000); // the argument set the movement-speed of the image }); }); </script> </head> <body> <h2>Immagine in movimento</h2> <p> You can set the movement speed of the image in the only one parameter. <br /> Try to put the mouse on the image. <b>You need jQuery library</b> </p> <div id="container"> <div id="box"> <img src="Image.jpg" /> </div> </div><!-- container--> </body> </html>