`

jQuery 滑动改变价格

jquery 
阅读更多

文章来源：http://www.itnose.net/detail/6031655.html
更多文章：http://www.itnose.net/type/111.html

 
jQuery 滑动改变价格
演示

 

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>  

 

分享到：
| C++ 中 const 和 static 的作用
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery价格区间滑动取值代码.zip

    【jQuery价格区间滑动取值代码】是一款基于JavaScript库jQuery实现的交互式功能，主要用于电商网站或其他需要用户选择价格范围的场景。这个功能允许用户通过拖动滑块来选取一个价格范围，为用户提供直观且友好的操作...

    jQuery左右滑动效果选取数值.zip

    在网页交互设计中，这种滑动选择器经常用于商品筛选，例如设置价格区间、自定义硬件配置（如CPU性能、内存大小）等场景，提升了用户体验。 jRange的核心功能在于其左右滑动的效果，用户可以通过拖动滑块在设定的...

    jQuery拖动滑块选择价格区间代码

    - 当滑块的值改变时，更新显示的最小和最大价格。 - 页面加载时初始化显示的价格。 4. **图片资源**： `images`文件夹可能包含用于美化滑块或网页的图片资源。根据设计需求，可以添加背景图片或其他视觉元素。 ...

    jQuery ui input滑动条制作房屋表单搜索条件滑动条

    然后，我们用jQuery UI的`slider`方法来初始化滑动条，并设置其属性，如最小值、最大值、步长以及改变时的回调函数。在回调函数中，我们将滑动条的当前值更新到输入框中： ```javascript $(function() { $("#price...

    jQuery价格区间拖动滑块代码.zip

    jQuery滑动条通常由两个可拖动的滑块组成，分别代表价格区间的最小值和最大值。用户可以通过鼠标或触摸设备来调整这两个滑块的位置，从而定义他们感兴趣的价格范围。这种功能对于在线购物、金融分析或数据筛选等场景...

    jQuery商品价格选择器

    3. **动画效果**：为了提供更好的用户体验，我们还可以添加过渡动画，例如使用`.animate()`方法平滑地改变价格显示，或者使用`.slideUp()`和`.slideDown()`切换不同的价格区间展示。 4. **数据绑定**：我们可以将...

    jQuery价格区间滑块拖动代码.zip

    5. **样式调整**：使用CSS调整滑动条的外观，使其符合网站的整体设计风格，比如改变滑块的颜色、大小、边框等。 压缩包内的`说明.htm`文件很可能是对代码的详细解释和使用指南，而`jiaoben5492`可能是源代码文件或...

    jQuery.range. 双滑块滑动插件

    `jQuery.range.js` 是一个专门针对这种需求设计的插件，它允许用户通过双滑块进行数值范围的选择，广泛应用于各种需要设置区间值的场景，例如价格区间筛选、时间范围设定等。 **插件功能与特点** 1. **双滑块选择*...

    jquery搜索条件滑动条.zip

    在这个项目中，我们需要监听滑动条的`change`或`input`事件，当滑动条的值改变时，获取新的值并更新搜索条件。这可以通过`.on()`方法实现： ```javascript $(document).ready(function() { $('#priceSlider').on('...

    价格区间滑动取值代码.rar_eastqoh_价格区间滑动取值代码

    3. **动态更新显示**：当用户改变滑动条的位置时，价格区间应该实时更新。这可能涉及到DOM操作，比如使用`.html()`或`.text()`方法更改HTML元素的内容来显示新的价格范围。 4. **数据绑定**：如果滑动条与后端...

    jQuery实现的价格区间滑块拖动特效源码.zip

    【标题】"jQuery实现的价格区间滑块拖动特效源码.zip"所涉及的知识点主要集中在JavaScript库jQuery的应用上，特别是如何利用jQuery来创建一个交互式的滑块组件，用于选取价格区间。滑动特效通常用于增强用户界面的...

    【Jquery经典特效13】jQuery可选择详细的价钱区间值代码

    `change`事件在滑动条值改变且失去焦点后触发，而`input`事件则在滑动条值改变时实时触发。这允许我们实时更新显示的价格区间，或者在用户完成选择后更新筛选条件。 为了处理滑动条的值，我们可以使用`.val()`方法...

    价格区间选择的实现

    当用户改变滑块位置时，触发的事件会更新界面上显示的价格区间，并可能向服务器发送异步请求，更新页面上的商品列表。在JavaScript中，这通常通过`addEventListener`来实现。 6. **数据通信**： 使用Ajax或者...

    jQuery滑块拖动选择价格特效.zip

    本教程将详细讲解基于jQuery和CSS3实现的滑块拖动选择价格特效，这是一种常见的商品价格选择交互设计，常见于电子商务网站的商品筛选或配置页面。 首先，滑块特效的核心是利用jQuery的`mousedown`、`mousemove`和`...

    jQuery价格区间滑动取值代码

    本项目涉及的是利用jQuery实现的一个价格区间滑动取值功能，这通常用于电商网站的商品筛选，允许用户通过拖动滑块来选择他们感兴趣的价格范围。 这个"jQuery价格区间滑动取值代码"的核心功能是创建一个互动的滑块，...

    jquery rangeslider范围选择

    jQuery Rangeslider允许用户通过滑动条选择一个特定范围的值，常用于音量控制、价格筛选、评分系统等场景。它极大地提升了用户体验，使得交互更加直观和便捷。 一、jQuery Rangeslider基础 jQuery Rangeslider是...

    【商品价格选择器JQuery】demo

    例如，当用户改变选择时，JQuery可以监听这些事件，更新页面上的价格显示，或者异步请求服务器获取对应价格的商品详情。 4. **事件监听**： 在JQuery中，可以使用`.on()`方法来监听用户的操作，如点击、改变等事件...

    jquery数值范围选择插件jquery rangeslider

    3. **事件支持**：允许开发者监听和响应用户的滑动操作，例如在值改变时触发回调函数。 4. **兼容性**：由于基于jQuery，该插件具有较好的浏览器兼容性，包括对旧版浏览器的支持。 **安装与使用** 要使用 jQuery ...

    jquery动态数字增加

    这种效果通常用于网站的访问量统计、股票价格、拍卖竞价等场景，给人一种生动、实时的感觉。 实现这个效果，首先需要理解jQuery的基本用法。jQuery的核心是选择器，它允许我们高效地定位DOM元素。例如，`$("#my...

Magicbox
Global site tag (gtag.js) - Google Analytics