方法一 【注】需把控件的 CSS 的 position 属性设置为 relative 或 absolute。 [javascript] view plaincopy...">
Home » Source Code » 用jquery实现控件左右移动的三种方法

用jquery实现控件左右移动的三种方法

liuliu
2013-10-13 22:21:31
The author
View(s):
Download(s): 0
Point (s): 1 
Category Category:
Web FrameworkWeb Framework JavaScriptJavaScript

Description

family:Arial;line-height:26px;white-space:normal;background-color:#FFFFFF;">

方法一

【注】需把控件的 CSS 的 position 属性设置为 relative 或 absolute。


[javascript] view plaincopy
  1. <script type="text/javascript" src="js/jquery-1.8.0.js"></script>  
  2. <script language="javascript">  
  3. $(document).ready(function(){  
  4.     $("#right1").click(function(){  
  5.         $(".block1").animate({left: '+=50px'}, "slow");  
  6.     });  
  7.     $("#left1").click(function(){  
  8.         $(".block1").animate({left: '-=50px'}, "slow");  
  9.     });  
  10. });  
  11. </script>  


方法二



[javascript] view plaincopy
  1. <script type="text/javascript" src="js/jquery-1.8.0.js"></script>  
  2. <script language="javascript">  
  3. $(document).ready(function(){  
  4.     $("#right2").click(function(){  
  5.         $(".block2").css("margin-left","+=50px");  
  6.     });  
  7.     $("#left2").click(function(){  
  8.         $(".block2").css("margin-left","-=50px");  
  9.     });  
  10. });  
  11. </script>  


方法三



[javascript] view plaincopy
  1. <script type="text/javascript" src="js/jquery-1.8.0.js"></script>  
  2. <script language="javascript">  
  3. $(document).ready(function(){  
  4.     $("#right3").click(function(){  
  5.         $(".block3").animate({width:"+=50px"}, 222);  
  6.     });  
  7.     $("#left3").click(function(){  
  8.         $(".block3").animate({width:"-=50px"}, 222);  
  9.     });  
  10. });  
  11. </script>  


全部代码



[html] view plaincopy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script type="text/javascript" src="js/jquery-1.8.0.js"></script>  
  7. <script language="javascript">  
  8.   
  9. $(document).ready(function(){  
  10.     $("#right1").click(function(){  
  11.         $(".block1").animate({left: '+=50px'}, "slow");  
  12.     });  
  13.     $("#left1").click(function(){  
  14.         $(".block1").animate({left: '-=50px'}, "slow");  
  15.     });  
  16.       
  17.     $("#right2").click(function(){  
  18.         $(".block2").css("margin-left","+=50px");  
  19.     });  
  20.     $("#left2").click(function(){  
  21.         $(".block2").css("margin-left","-=50px");  
  22.     });  
  23.       
  24.     $("#right3").click(function(){  
  25.         $(".block3").animate({width:"+=50px"}, 222);  
  26.     });  
  27.     $("#left3").click(function(){  
  28.         $(".block3").animate({width:"-=50px"}, 222);  
  29.     });  
  30. });  
  31. </script>  
  32. </head>  
  33. <body style="text-align:center;">  
  34.   
  35.     <button id="left1">«</button>  
  36.     <button id="right1">»</button>  
  37.     <div class="block1" id="block" style="position:relative;">  
  38.         <img src="img/csdn_res.jpg"/>  
  39.     </div>  
  40.     <button id="left2">«
    Sponsored links

File list

Tips: You can preview the content of files by clicking file names^_^
Name Size Date
?-??45.50 kB2013-10-14|10:20
...
Sponsored links

Comments

(Add your comment, get 0.1 Point)
Minimum:15 words, Maximum:160 words
  • 1
  • Page 1
  • Total 1

用jquery实现控件左右移动的三种方法 (10.00 kB)

Need 1 Point(s)
Your Point (s)

Your Point isn't enough.

Get 22 Point immediately by PayPal

Point will be added to your account automatically after the transaction.

More(Debit card / Credit card / PayPal Credit / Online Banking)

Submit your source codes. Get more Points

LOGIN

Don't have an account? Register now
Need any help?
Mail to: support@codeforge.com

切换到中文版?

CodeForge Chinese Version
CodeForge English Version

Where are you going?

^_^"Oops ...

Sorry!This guy is mysterious, its blog hasn't been opened, try another, please!
OK

Warm tip!

CodeForge to FavoriteFavorite by Ctrl+D