Home > Developer > Web Develop
Body{Background-color:#F2F2F2;text-align:Center;}. Container{position:relative;width:500px;Height:500px;margin:0 Auto;}. pic{position:Absolute;width:100px;Height:100px;Border-radius:50px;Overflow:Hidden;transition:width ease 2s, height ease 2s, border-radius ease 2s, left ease 2s, top ease 2s;}. Pic.active{-webkit-box-shadow:0 0 10px Rgba (203, 242, 1);Box-shadow:0 0 10px Rgba (203, 242, 1);}. Pic.show{width:200px;Height:200px;Border-radius:100px;Z-index:2;}/*. pic.show {-moz-animation:show 2s ease; -webkit-animation:show 2s; -o-animation:show 2s; Animation:show 2s;}*/. pic img{width:100px;Height:100px;transition:width ease 2s, height ease 2s;}. pic.show img{width:200px;Height:200px;}. Start{position:Absolute; Left:225px;Top:225px;width:50px;Height:50px;Line-height:50px;text-align:Center;Background-color:#5cb85c;Border-radius:25px;cursor:Pointer;}. Shade{position:Absolute;Top:0; Left:0;Opacity:. 6;width:1500px;Height:1500px;background:#000;Z-index:1;}
$(function() {initdial (); Initevent ();})varRADIUS = 200, ImgWidth= 100, ImgHeight= 100;/** * Initialize turntable*/functioninitdial () {var$container = $ (' #container '), Origin= {}; for(vari = 0; I < 8; i++) { var$pic, Radian, X, y; $pic= $ (' <div class= "pic" ></div> "); Radian= 2 * math.pi/360 * 45 *i; X= + Math.Cos (radian) * RADIUS-IMGWIDTH/2; Y= + Math.sin (radian) * RADIUS-IMGHEIGHT/2; $pic. CSS (' Left ', x); $pic. CSS (' Top ', y); //$pic. addclass (' active ');$container. Append ($pic); } var$startBtn = $ (' <div class= "Start > Start </div> '); $container. Append ($startBtn);}/** * Initialize event*/functioninitevent () {var$start = $ ('. Start ')); $start. On (' Click ',function() {nextpic (Math.random ()* 50); })}/***time: Time between calls to Nextpic, plus a little time for each call*/functionNextpic (time) {var$activePic,//the picture you are currently going toPicindex;//Activepic Index //Processing TimeTime = time + 5 * TIME/30; $activePic= $ ('. Pic.active ')); if($activePic. Length = = 0) {Picindex= Math.Round (Math.random () * 7); $activePic= $ ($ ('. Pic ')). Get (Picindex)); } Else{Picindex= $activePic. Data (' Picindex '); Picindex= Picindex >= 7? 0:picindex+1; $activePic= $ ($ ('. Pic ')). Get (Picindex)); } $('. Pic '). Removeclass (' active '); $activePic. addclass (' Active '); $activePic. Data (' Picindex ', Picindex); if(Time > 800) {show (); } Else{window.settimeout (function() {nextpic (time); }, time); }}/** * Displays the selected picture*/functionShow () {var$activePic = $ ('. Pic.active ')); if($activePic. Length = = 0) { return; } $activePic. addclass (' Show '); $activePic. CSS (' Left ', ' 150px '); $activePic. CSS (' Top ', ' 150px '); $(' Body '). Append (' <div class= ' shade ' ></div> ')}
<!DOCTYPE HTML><HTMLLang= "zh"> <Head> <MetaCharSet= "Utf-8"/> <title>Realize a big draw of the turntable</title> <Linkrel= "stylesheet"type= "Text/css"href= "Css/style.css"> <Scripttype= "Text/javascript"src=".. /js/jquery-1.11.0.js "></Script> <Scripttype= "Text/javascript"src= "Js/script.js"></Script> </Head> <Body> <P>2015 years, still single? For the programmer to send benefits to, randomly extracted girlfriend, is now withdrawn away!</P> <Divclass= "Container"ID= "Container"> </Div> </Body></html>
[jquery Programming Challenge]002: Implement a Carousel Draw
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
