首页 Web开发 Windows程序 编程语言 数据库 移动开发 系统相关 微信 其他好文

jQuery 滑动改变价格

时间：2014-04-29 13:27:21   收藏：0   阅读：595

jQuery 滑动改变价格

mamicode.com,码迷
演示

 

XML/HTML Code
  1. <section id="content" >  
  2. <div class="cube">  
  3. <div class="a"></div>  
  4. <div class="b"></div>  
  5. <div class="c"></div>  
  6. <div class="d"></div>  
  7. <div id="slider-range-min"></div>  
  8. </div>  
  9. <input type="text" id="amount" />  
  10. </section>  

 

CSS Code
  1. <style>  
  2.   
  3. * {  
  4. margin: 0px;  
  5. padding: 0px;  
  6. }  
  7. .cube {  
  8. position: relative;  
  9. width: 500px;  
  10. height: 60px;  
  11. margin: 5rem auto;  
  12. -webkit-transform-style: preserve-3d;  
  13. -moz-transform-style: preserve-3d;  
  14. -ms-transform-style: preserve-3d;  
  15. -o-transform-style: preserve-3d;  
  16. transform-style: preserve-3d;  
  17. -webkit-perspective: 400px;  
  18. -moz-perspective: 400px;  
  19. -ms-perspective: 400px;  
  20. -o-perspective: 400px;  
  21. perspective: 400px;  
  22. }  
  23. /* positions */  
  24. .a, .b, .c, .d {  
  25. position: absolute;  
  26. width: 50%;  
  27. height: 100%;  
  28. left: 0px;  
  29. z-index: 222;  
  30. }  
  31. .a:before, .b:before, .c:before, .d:before, .a:after, .b:after {  
  32. content: ‘‘;  
  33. position: absolute;  
  34. top: 0px;  
  35. left: 0px;  
  36. width: 500px;  
  37. height: 60px;  
  38. }  
  39. .a:before, .b:before, .c:before, .d:before {  
  40. z-index: 111;  
  41. }  
  42. .a:after, .b:after {  
  43. z-index: 333;  
  44. }  
  45. .b {  
  46. top: 0px;  
  47. -webkit-transform: rotateX(75deg) translateY(-60px);  
  48. -moz-transform: rotateX(75deg) translateY(-60px);  
  49. -o-transform: rotateX(75deg) translateY(-60px);  
  50. -ms-transform: rotateX(75deg) translateY(-60px);  
  51. transform: rotateX(75deg) translateY(-60px);  
  52. -webkit-transform-origin: 0% 0%;  
  53. -moz-transform-origin: 0% 0%;  
  54. -o-transform-origin: 0% 0%;  
  55. -ms-transform-origin: 0% 0%;  
  56. transform-origin: 0% 0%;  
  57. }  
  58. .c {  
  59. top: 0px;  
  60. -webkit-transform: rotateX(75deg);  
  61. -moz-transform: rotateX(75deg);  
  62. -o-transform: rotateX(75deg);  
  63. -ms-transform: rotateX(75deg);  
  64. transform: rotateX(75deg);  
  65. -webkit-transform-origin: 100% 100%;  
  66. -moz-transform-origin: 100% 100%;  
  67. -o-transform-origin: 100% 100%;  
  68. -ms-transform-origin: 100% 100%;  
  69. transform-origin: 100% 100%;  
  70. }  
  71. .d {  
  72. -webkit-transform: translateZ(-60px) translateY(-15px);  
  73. -moz-transform: translateZ(-60px) translateY(-15px);  
  74. -o-transform: translateZ(-60px) translateY(-15px);  
  75. -ms-transform: translateZ(-60px) translateY(-15px);  
  76. transform: translateZ(-60px) translateY(-15px);  
  77. }  
  78. /* colors */  
  79. .a, .b {  
  80. background-image: -webkit-gradient(linear, left top, left bottombottom, from(rgba(116,198,43,0.8)), to(rgba(116,198,43,0.8)));  
  81. background-image: -webkit-linear-gradient(top, rgba(116,198,43,0.8), rgba(116,198,43,0.8));  
  82. background-image: -moz-linear-gradient(top, rgba(116,198,43,0.8), rgba(116,198,43,0.8));  
  83. background-image: -o-linear-gradient(top, rgba(116,198,43,0.8), rgba(116,198,43,0.8));  
  84. background-image: linear-gradient(to bottombottom, rgba(116,198,43,0.8), rgba(116,198,43,0.8));  
  85. background-repeat: no-repeat;  
  86. background-size: 100% 100%;  
  87. background-position: 0% 0%;  
  88. }  
  89. .c, .d {  
  90. background-image: -webkit-gradient(linear, left top, left bottombottom, from(rgba(116,198,43,0.5)), to(rgba(116,198,43,0.5)));  
  91. background-image: -webkit-linear-gradient(top, rgba(116,198,43,0.5), rgba(116,198,43,0.5));  
  92. background-image: -moz-linear-gradient(top, rgba(116,198,43,0.5), rgba(116,198,43,0.5));  
  93. background-image: -o-linear-gradient(top, rgba(116,198,43,0.5), rgba(116,198,43,0.5));  
  94. background-image: linear-gradient(to bottombottom, rgba(116,198,43,0.5), rgba(116,198,43,0.5));  
  95. background-repeat: no-repeat;  
  96. background-size: 100% 100%;  
  97. background-position: 0% 0%;  
  98. }  
  99. .c:before {  
  100. -webkit-box-shadow: 0px 30px 20px -20px rgba(0,0,0,0.4), 0px 40px 15px -15px rgba(0,0,0,0.25);  
  101. -moz-box-shadow: 0px 30px 20px -20px rgba(0,0,0,0.4), 0px 40px 15px -15px rgba(0,0,0,0.25);  
  102. box-shadow: 0px 30px 20px -20px rgba(0,0,0,0.4), 0px 40px 15px -15px rgba(0,0,0,0.25);  
  103. }  
  104. .a:before, .b:before, .c:before, .d:before {  
  105. background-color: rgba(0,0,0,0.05);  
  106. }  
  107. .a:after {  
  108. background-image: -webkit-gradient(linear, left top, left bottombottom, from(rgba(0,0,0,0.07)), to(rgba(0,0,0,0)));  
  109. background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.07), rgba(0,0,0,0));  
  110. background-image: -moz-linear-gradient(top, rgba(0,0,0,0.07), rgba(0,0,0,0));  
  111. background-image: -o-linear-gradient(top, rgba(0,0,0,0.07), rgba(0,0,0,0));  
  112. background-image: linear-gradient(to bottombottom, rgba(0,0,0,0.07), rgba(0,0,0,0));  
  113. }  
  114. .b:after {  
  115. background-image: -webkit-gradient(linear, left top, left bottombottom, from(rgba(255,255,255,0.1)), to(rgba(255,255,255,0.25)));  
  116. background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.25));  
  117. background-image: -moz-linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.25));  
  118. background-image: -o-linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.25));  
  119. background-image: linear-gradient(to bottombottom, rgba(255,255,255,0.1), rgba(255,255,255,0.25));  
  120. }  
  121. /* jQuery stuff */  
  122. #slider-range-min {  
  123. position: absolute;  
  124. width: 94%;  
  125. left: 3%;  
  126. top: 27px;  
  127. margin: 0px;  
  128. z-index: 999;  
  129. }  
  130. .ui-slider {  
  131. height: 5px;  
  132. border: none;  
  133. background: rgba(0,0,0,0.1);  
  134. -webkit-box-shadow: 0px 2px 2px rgba(255,255,255,0.25), inset 0px 1px 3px rgba(0,0,0,0.3);  
  135. -moz-box-shadow: 0px 2px 2px rgba(255,255,255,0.25), inset 0px 1px 3px rgba(0,0,0,0.3);  
  136. box-shadow: 0px 2px 2px rgba(255,255,255,0.25), inset 0px 1px 3px rgba(0,0,0,0.3);  
  137. }  
  138. .ui-slider:before, .ui-slider:after {  
  139. content: ‘IIIIIIIIIII‘;  
  140. position: absolute;  
  141. left: 2px;  
  142. width: 100%;  
  143. font-family: ‘Source Sans Pro‘, sans-serif;  
  144. font-size: 1.2rem;  
  145. font-weight: 300;  
  146. color: rgba(0,0,0,0.3);  
  147. letter-spacing: 41px;  
  148. text-shadow: 1px 1px 0px rgba(255,255,255,0.2);  
  149. }  
  150. .ui-slider:before {  
  151. top: -1.4rem;  
  152. }  
  153. .ui-slider:after {  
  154. bottombottom: -1.4rem;  
  155. }  
  156. .ui-slider-range {  
  157. background: transparent;  
  158. }  
  159. .ui-slider .ui-slider-handle {  
  160. top: -8px;  
  161. width: 26px;  
  162. height: 20px;  
  163. margin-left: -15px;  
  164. padding-left: 4px;  
  165. border: none;  
  166. background: rgba(255,255,255,0.7);  
  167. border-radius: 2px;  
  168. text-align: center;  
  169. font-family: ‘Anonymous Pro‘, sans-serif;  
  170. font-size: 1.2rem;  
  171. line-height: 20px;  
  172. color: rgba(0,0,0,0.5);  
  173. text-decoration: none;  
  174. letter-spacing: 3px;  
  175. cursor: pointer;  
  176. text-shadow: 1px 1px 2px rgba(255,255,255,1);  
  177. -webkit-box-shadow: 1px 1px 8px rgba(0,0,0,0.3);  
  178. -moz-box-shadow: 1px 1px 8px rgba(0,0,0,0.3);  
  179. box-shadow: 1px 1px 8px rgba(0,0,0,0.3);  
  180. }  
  181. .ui-slider .ui-slider-handle:focus {  
  182. outline: none;  
  183. }  
  184. /* typo */  
  185. h1 {  
  186. font-size: 2.7rem;  
  187. font-weight: 200;  
  188. color: rgba(0,0,0,0.6);  
  189. text-shadow: 1px 1px 0px rgba(255,255,255,0.3);  
  190. }  
  191. p {  
  192. font-size: 1.2rem;  
  193. font-weight: 300;  
  194. line-height: 1.8rem;  
  195. color: rgba(0,0,0,0.8);  
  196. }  
  197. .credits a {  
  198. position: relative;  
  199. display: inline-block;  
  200. color: #529e0e;  
  201. text-decoration: none;  
  202. }  
  203. .credits a:after {  
  204. content: ‘‘;  
  205. position: absolute;  
  206. left: -1.5%;  
  207. bottombottom: -1px;  
  208. width: 0%;  
  209. height: 1px;  
  210. background: #529e0e;  
  211. -webkit-transition: width 0.1s;  
  212. -moz-transition: width 0.1s;  
  213. -o-transition: width 0.1s;  
  214. transition: width 0.1s;  
  215. }  
  216. .credits a:hover::after {  
  217. width: 103%;  
  218. }  
  219. #amount {  
  220. position: relative;  
  221. display: inline-block;  
  222. padding-bottom: 5rem;  
  223. text-align: center;  
  224. font-family: ‘Exo‘, sans-serif;  
  225. font-weight: 800;  
  226. font-size: 4rem;  
  227. color: #529e0e;  
  228. background: transparent;  
  229. border: none;  
  230. }  
  231. #amount:focus {  
  232. outline: none;  
  233. }  
  234. /* base */  
  235. #content {  
  236. -webkit-box-sizing: border-box;  
  237. -moz-box-sizing: border-box;  
  238. box-sizing: border-box;  
  239. width: 100%;  
  240. height: 100%;  
  241. padding-top: 5rem;  
  242. text-align: center;  
  243. }  
  244. html, body {  
  245. height: 100%;  
  246. background-image: -webkit-gradient(linear, left top, left bottombottom, from(rgba(0,0,0,0.08)), to(rgba(0,0,0,0.05)));  
  247. background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.08), rgba(0,0,0,0.05));  
  248. background-image: -moz-linear-gradient(top, rgba(0,0,0,0.08), rgba(0,0,0,0.05));  
  249. background-image: -o-linear-gradient(top, rgba(0,0,0,0.08), rgba(0,0,0,0.05));  
  250. background-image: linear-gradient(to bottombottom, rgba(0,0,0,0.08), rgba(0,0,0,0.05));  
  251. background-repeat: no-repeat;  
  252. background-size: 100% 100%;  
  253. background-position: 0% 0%;  
  254. font-family: ‘Source Sans Pro‘, sans-serif;  
  255. }  
  256. </style>  

 


原文地址:http://www.freejs.net/article_jquerywenzi_145.html

jQuery 滑动改变价格,码迷,mamicode.com

评论（0）
© 2014 mamicode.com 版权所有 京ICP备13008772号-2  联系我们:gaon5@hotmail.com
迷上了代码！