This example shows how to use a Dial widget to animate an image sprite.
Drag the Dial handle, or use the keyboard arrow keys to see the duck image "animate".
Hand carved and signed by Thomas Jefferson. circa 1785. Native hardwoods, stains, pigments. Glass bead eyes.
Opening bid 93,000ドル
The <div id="duck"></div> element will have the sprite as its background-image.
The <div id="demo"></div> element will contain the dial.
Note: be sure to add the yui3-skin-sam classname to the
page's <body> element or to a parent element of the widget in order to apply
the default CSS skin. See Understanding Skinning.
<body class="yui3-skin-sam"> <!-- You need this skin class -->
<div class="container"> <div id="duck"></div> <div id="demo"></div> <div id="text"> <h3>Lot #562</h3> <h2>Duck Decoy - Thomas Jefferson</h2> <p> Hand carved and signed by Thomas Jefferson. circa 1785. Native hardwoods, stains, pigments. Glass bead eyes. </p> <p> Opening bid 93,000ドル </p> </div> </div>
The stepsPerRevolution attribute of the Dial
is given a value equal to the number of frames in the sprite.
On valueChange of the dial, the background-position of <div id="duck">
is changed to a new multiple of the
width of one frame in the sprite.
<script type="text/javascript">
YUI().use("dial", function(Y) {
var oneFrameWidth = 300,
framesInSprite = 13;
var dial = new Y.Dial({
min: 0,
max: 26000,
value: 13000, // initial value in the middle of a large range allows rotation both ways
minorStep: 1,
majorStep: 2,
stepsPerRevolution: framesInSprite,
diameter: 150
});
dial.render('#demo');
// Reposition the duck sprite background image
dial.on( "valueChange", function(e){
// Handle values greater than one revolution
var moduloValue = (e.newVal % framesInSprite);
Y.one('#duck').setStyle('backgroundPosition', (moduloValue * -oneFrameWidth) + 'px 0px');
}, '#duck' );
});
</script>
<style>
.example {
background-color: #59554F;
text-align: center;
}
.example .container {
text-align: left;
position: relative;
width: 554px;
margin: 10px auto;
padding: 0;
font-family: georgia;
}
.example #demo {
position: absolute;
top: -10px;
left: 350px;
}
.example #duck {
width:300px;
height:188px;
background:url(../assets/dial/images/sprite_duck.jpg) no-repeat;
background-position: 0 0;
border:solid 1px #958A71;
-moz-box-shadow:7px 7px 10px rgba(0,0,0,0.3);
-webkit-box-shadow:7px 7px 10px rgba(0,0,0,0.3);
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.example .yui3-dial-label {
visibility:hidden;
}
.example .yui3-dial-north-mark {
visibility:hidden;
}
.example .yui3-skin-sam #demo .yui3-dial-ring {
-moz-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
}
.example #text {
color:#C5B291;
}
.example #text h2 {
font-size:261%;
color:#EEE5D6;
text-shadow: 2px 2px 7px #000;
margin: 0;
font-family: georgia;
}
.example #text h3 {
color:#EEE5D6;
font-size: 100%;
margin: 0.6em 0;
font-family: georgia;
}
.example #text p {
margin: 0.5em 0;
font-size:135%;
line-height: 1.2em;
}
</style>
<div class="container">
<div id="duck"></div>
<div id="demo"></div>
<div id="text">
<h3>Lot #562</h3>
<h2>Duck Decoy - Thomas Jefferson</h2>
<p>
Hand carved and signed by Thomas Jefferson.
circa 1785. Native hardwoods, stains, pigments.
Glass bead eyes.
</p>
<p>
Opening bid 93,000ドル
</p>
</div>
</div>
<script type="text/javascript">
YUI().use("dial", function(Y) {
var oneFrameWidth = 300,
framesInSprite = 13;
var dial = new Y.Dial({
min: 0,
max: 26000,
value: 13000, // initial value in the middle of a large range allows rotation both ways
minorStep: 1,
majorStep: 2,
stepsPerRevolution: framesInSprite,
diameter: 150
});
dial.render('#demo');
// Reposition the duck sprite background image
dial.on( "valueChange", function(e){
// Handle values greater than one revolution
var moduloValue = (e.newVal % framesInSprite);
Y.one('#duck').setStyle('backgroundPosition', (moduloValue * -oneFrameWidth) + 'px 0px');
}, '#duck' );
});
</script>