javascript/run.html at master · nithinmohan/javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- jQuery UI font sizes are relative to document's,
so set a base size here. -->
<style type="text/css">
body {
font-size: 12px;
font-family: sans-serif
}
#pic1
{
	width:250px;
	height: auto;
}
</style>
<script src="jquery.js"></script>
<script>
// On DOM loaded, initialize a date picker widget on the input element
// with id of 'datepicker'.
var loadImage=function($image,src,callback) {

	$image.bind("load",function(){
	$image.unbind("load");
	callback($image);
});
	if ($.browser.webkit) {
$image.attr('src', '');
};
	$image.attr("src",src);
};
var createitem =function($image,angle,option)
{    var orgwidth,orgheight,loaded=false;
	$originDiv=$image.wrap('<div style="position:absolute">').parent();
	$image.css({opacity:0});
	var that={
		update:function(ang){
			ang=angle+ang;
			sinval=Math.sin(ang);
			a=(1+option.minScale)/2;
			b=(1-option.minScale)/2;
			scale=a*sinval+b;
			xdiam=option.radiusX*2;
			ydiam=option.radiusY*2;
			x=xdiam/2*Math.cos(ang)+xdiam/2-option.width/2;
			y=ydiam/2*Math.sin(ang)+ydiam/2-option.height/2;
			$originDiv.css({
				left:(x >> 0)+ 'px',
				top:(y >> 0)+ 'px',
				zIndex:(scale*100)>>0
			});
			if(loaded)
			{
			//alert(orgwidth);
			$image.css({
			width: (orgwidth * scale) + 'px',
			height: (orgheight * scale) + 'px',
			top: ((orgheight * (1-scale)) / 2) + 'px',
			left: ((orgwidth * (1-scale)) / 2) + 'px'
			});
			}
			}
			};

			loadImage($image, "hill.png", function ($image) {
			loaded = true;
			// Save the image width and height for the scaling calculations.
			orgwidth = $image.width();
			orgheight = $image.height();
			// Make the item fade-in.
			$image.animate({
			opacity: 1
			}, 1000);
			});
			return that;

		};
$(function(){
	option={
		minScale:.5,
		radiusX:300,
		radiusY:400,
		width:300,
		height:250
	}
	var item=createitem($("#pic"),3.14/2,option);
	item.update(0);
	var x=3.1415;
	//setTimeout(function(){item.update(x);x=x+.1;},4);
});
</script>
</head>
<body>
<img id="pic" class="pics"></img>
<div>
<img scr="hill.png" id="pic1"  class="pics"></img>
</div>
</body>
</html>