ƵµÀÀ¸Ä¿
¶ÁÊ鯵µÀ > ÍøÕ¾ > ÍøÒ³Éè¼Æ > JavaScriptÍøÒ³¶¯»­Éè¼Æ
1.3¡¡¹¦ÄÜ
2019-12-15 16:17:35     ÎÒÀ´ËµÁ½¾ä
Êղؠ  ÎÒҪͶ¸å

±¾ÎÄËùÊôͼÊé > JavaScriptÍøÒ³¶¯»­Éè¼Æ

±¾ÊéÓÉÒµ½ç×îÏȽøµÄ¶¯»­¿âVelocity jsµÄ×÷ÕßËùÖø£¬ÊéÖÐÄÚÈݹ²·ÖΪ8Õ£¬¼òÃ÷¶óÒªµØ×ܽáÁËÔÚÍøÒ³ÉÏʹÓö¯»­µÄ¼¼Êõ¼¼ÇÉ£¬ÈöÁÕßÕÆÎÕÈçºÎÓÐЧÀûÓö¯»­ÊµÏÖÎÞÓëÂױȵÄÓû§ÌåÑé¡£¾ßÌåÄÚÈݰüÀ¨£ºJavaScript¶¯»­ÓÅÊÆ£¬Ve  Á¢¼´È¥µ±µ±Íø¶©¹º
×·ÇóËٶȵ±È»²»ÊÇʹÓÃJavaScriptµÄΨһÀíÓÉ£¬Ëü»¹¾ßÓÐÒ»´ó¶ÑÆäËûͬµÈÖØÒªµÄ¹¦ÄÜ¡£ÈÃÎÒÃÇ´óÖ¿´¼¸¸öJavaScriptËù¶ÀÓв¢ÖµµÃ¹Ø×¢µÄ¶¯»­¹¦ÄÜ¡£
1.3.1¡¡Ò³Ãæ¹ö¶¯
Ò³Ãæ¹ö¶¯ÊÇ»ùÓÚJavaScriptµÄ¶¯»­×îΪÁ÷ÐеÄÓ¦ÓÃÖ®Ò»¡£×î½ü£¬ÍøÒ³Éè¼ÆµÄÇ÷ÊÆÊÇ´´½¨ºÜ³¤µÄÒ³Ãæ¡£Ëæ×ÅÒ³ÃæÏòϹö¶¯£¬ÈÃÿһ²¿·ÖеÄÄÚÈÝ×Ô¶¯¹öµ½¿ÉÊÓÇøÓòÖÐÀ´¡£
ÀýÈçVelocityÕâÑùµÄJavaScript¶¯»­¿âÌṩÁËÒ»ÖÖ½«ÔªËعö¶¯ÖÁ¿ÉÊÓÇøÓòµÄ¼òµ¥º¯Êý£º
$element.velocity("scroll", 1000);
ÒÔÉÏ´úÂëͨ¹ýʹÓÃVelocityµÄ"scroll"ÃüÁîÈÃä¯ÀÀÆ÷ÓÃ1000ºÁÃëµÄʱ¼ä¹ö¶¯ÖÁ$elementµÄÉÏ·½±ßԵλÖá£×¢Ò⣬VelocityµÄÓï·¨ÓëjQueryµÄ$.animate()º¯Êý¼¸ºõһģһÑù£¬Õâ»áÔÚ±¾ÕºóÃæµÄ²¿·Ö½øÐÐÏêÊö¡£
1.3.2¡¡¶¯»­·´×ª
¶¯»­·´×ªÊÇÓÃÓÚ³·ÏûÔªËØÇ°Ò»¸ö¶¯»­µÄ¼ò±ã·½·¨¡£Í¨¹ýµ÷Ó÷´×ªÃüÁÄã»áÊ¹ÔªËØÒÔ¶¯»­ÐÎʽ±ä¶¯»ØÉÏÒ»¸ö¶¯»­¿ªÊ¼Ö®Ç°µÄÖµ¡£·´×ªµÄ³£¼ûÓÃ;ÊǶ¯Ì¬ÏÔʾһ¸öģ̬¶Ô»°¿ò£¬È»ºóÔÚÓû§µã»÷“¹Ø±Õ”ºóÔÙ½«ÆäÒþ²ØÆðÀ´¡£
Èç¹ûÏëʵÏÖ¶¯»­·´×ª£¬µ«È´Ã»ÓÐÓÅ»¯¹¤×÷Á÷³ÌµÄ»°£¬Äã»áÕâô×ö£º°ÑÉÏ´ÎÔÚÿ¸öÔªËØÉ϶¯Ì¬ÏÔʾµÄÌØ¶¨ÊôÐÔ¸ú×ټǼÏÂÀ´£¬ÒÔ±¸ºóÐø·´×ª¶¯»­Ö®Óᣵ«ÊÇÔÚUI´úÂëÖиú×Ù֮ǰµÄ¶¯»­×´Ì¬ºÜ¿ì¾Í»á±äµÃÄÑÒÔ¿ØÖÆ¡£ÓëÖ®ÐγÉÏÊÃ÷¶Ô±ÈµÄÊÇVelocity£¬Í¨¹ýreverseÃüÁî¾Í¿ÉÒÔ¼ÇסһÇС£
ÓëVelocityÖÐscrollÃüÁîµÄÓï·¨ÏàËÆ£¬reverseÃüÁîÒ²ÊÇͨ¹ý½«"reverse"×÷ΪVelocityµÄµÚÒ»¸ö²ÎÊý´«Èë¶øµ÷ÓõÄ£º
// µÚÒ»¸ö¶¯»­£ºÉèÖÃÔªËØµÄopacityÊôÐԱ䶯ÖÁ0µÄ¶¯»­
$element.velocity({ opacity: 0 });
// µÚ¶þ¸ö¶¯»­£ºÉèÖÃÔªËØµÄopacityÊôÐÔÖµ±ä¶¯»Ø³õʼֵ1µÄ¶¯»­
$element.velocity("reverse");
µ±Ì¸µ½JavaScriptµÄ¶¯»­¶¨Ê±¿ØÖÆÊ±£¬¾Í²»½ö½öÊÇ·´×ªÄÇô¼òµ¥ÁË£ºJavaScript»¹ÔÊÐí¶ÔÈ«²¿ÕýÔÚÔËÐе͝»­½øÐÐÈ«¾Ö¼õËÙ»ò¼ÓËÙ¡£µÚ4Õ»á½éÉÜÕâһǿ´ó¹¦ÄܵÄÏà¹ØÖªÊ¶¡£
1.3.3¡¡»ùÓÚÎïÀíµÄ¶¯Ð§
¶¯Ð§Éè¼ÆÖеÄÎïÀíÔ­Ôò·´Ó³Á˳ɾÍÓÅÐãÓû§ÌåÑ飨UX£©µÄºËÐÄÔ­Ôò£ºÄǾÍÊǰéËæ×ÅÓû§µÄÊäÈ룬½çÃæ³öÏÖ×ÔÈ»µÄ·´Ó¦¡£»»ÑÔÖ®£¬½çÃæÉè¼Æ×ñ´ÓÎïÌåÔÚÕæÊµÊÀ½çÖеÄÔ˶¯¹æÂÉ¡£
ÔÚVelocityÖÐÓÐÒ»¸ö¼òµ¥ÇÒÇ¿´óµÄÈëÃż¶ÎïÀí¶¯Ð§£¬¼´»ùÓÚµ¯»ÉÔ˶¯Ô­ÀíµÄ»º¶¯ÀàÐÍ¡££¨ÎÒÃÇ»áÔÚÏÂÒ»ÕÂÏêϸ̽ÌÖ»º¶¯µÄ¸ÅÄî¡££©Ê¹ÓõäÐ͵Ļº¶¯Ñ¡Ï¿ÉÒÔ´«ÈëÒ»¸öÓëÔ¤Ïȶ¨ÒåµÄ»º¶¯ÇúÏߣ¨ÀýÈ磬"ease"»ò"easeInOutSine"£©Ïà¶ÔÓ¦µÄ×Ö·û´®¡£Ïà·´£¬µ¯»ÉÎïÀí»º¶¯ÀàÐͽÓÊÜÒ»¸öº¬ÓÐÁ½¸öÏîµÄÊý×é×÷Ϊ²ÎÊý¡£
// Ê¹ÓÃ500¸öÕÅÁ¦µ¥Î»ºÍ20¸öĦ²ÁÁ¦µ¥Î»µÄµ¯»ÉÎïÀí»º¶¯£¬ÉèÖý«ÔªËصĿí¶È±ä¶¯ÖÁ"500px"µÄ¶¯»­
$element.velocity({ width: "500px" }, { easing: [ 500, 20 ] });
»º¶¯Êý×éÖеĵÚÒ»Ïî´ú±íµ¯»ÉµÄÕÅÁ¦£¬¶øµÚ¶þÏî´ú±íĦ²ÁÁ¦¡£ÕÅÁ¦ÖµÔ½´ó£¬¶¯»­µÄ×ÜÌåËٶȾÍÔ½¿ì£¬×ÜÌå·´µ¯·ù¶È¾ÍÔ½´ó¡£Ä¦²ÁÁ¦ÖµÔ½µÍ£¬¶¯»­Î²²¿Õñ¶¯µÄËٶȾÍÔ½¿ì¡£Í¨¹ýµ÷ÕûÕâЩÊýÖµ£¬¿ÉÒÔÎªÒ³ÃæÉÏÿһ¸ö¶¯»­ÊµÏÖ¶ÀÌØµÄÔ˶¯Ð§¹û£¬ÕâÓÐÖúÓÚÇ¿»¯²»Í¬ÐÐΪ֮¼äµÄ²îÒì¡£
Äú¶Ô±¾ÎÄÕÂÓÐʲôÒâ¼û»ò×ÅÒÉÎÊÂð£¿Çëµ½ÂÛ̳ÌÖÂÛÄúµÄ¹Ø×¢ºÍ½¨ÒéÊÇÎÒÃÇǰÐеIJο¼ºÍ¶¯Á¦  
ÉÏһƪ£º1.2¡¡Ç¿´óµÄÐÔÄÜ
ÏÂһƪ£º1.4¡¡Ò×ά»¤µÄ¹¤×÷Á÷
Ïà¹ØÎÄÕÂ
ͼÎÄÍÆ¼ö
ÅÅÐÐ
ÈÈÃÅ
×îÐÂÊéÆÀ
ÌØ±ðÍÆ¼ö

¹ØÓÚÎÒÃÇ | ÁªÏµÎÒÃÇ | ¹ã¸æ·þÎñ | Ͷ×ʺÏ×÷ | °æÈ¨ÉêÃ÷ | ÔÚÏß°ïÖú | ÍøÕ¾µØÍ¼ | ×÷Æ··¢²¼ | Vip¼¼ÊõÅàѵ | ¾Ù±¨ÖÐÐÄ

°æÈ¨ËùÓÐ: µÚÒ»ÃÅ»§--ÖÂÁ¦ÓÚ×öʵÓõÄIT¼¼ÊõÑ§Ï°ÍøÕ¾