每日分享.
加入购物车动画效果
/** * js抛物线动画 * @param {[object]} origin [起点元素] * @param {[object]} target [目标点元素] * @param {[object]} element [要运动的元素] * @param {[number]} a [抛物线弧度] * @param {[number]} time [动画执行时间] * @param {[function]} callback [抛物线执行完成后回调] */ var parabola = function(config){ var b = 0, INTERVAL = 15, timer = null, x1,y1,x2,y2,originx,originy,diffx,diffy; this.config = config || {}; // 起点 this.origin = $(this.config.origin)||null; // 终点 this.target = $(this.config.target)||null; // 运动的元素 this.element = $(this.config.element)||null; // 曲线弧度 this.a = this.config.a || 0.004; // 运动时间(ms) this.time = this.config.time || 1000; this.init = function(){ x1 = this.origin.offset().left; y1 = this.origin.offset().top; x2 = this.target.offset().left; y2 = this.target.offset().top; originx = x1; originy = y1; diffx = x2-x1; diffy = y2-y1, speedx = diffx/this.time; // 已知a, 根据抛物线函数 y = a*x*x + b*x + c 将抛物线起点平移到坐标原点[0, 0]，终点随之平移，那么抛物线经过原点[0, 0] 得出c = 0; // 终点平移后得出：y2-y1 = a*(x2 - x1)*(x2 - x1) + b*(x2 - x1) // 即 diffy = a*diffx*diffx + b*diffx; // 可求出常数b的值 b = (diffy - this.a*diffx*diffx)/diffx; this.element.css({ left: x1, top: y1 }) return this; } // 确定动画方式 this.moveStyle = function(){ var moveStyle = 'position', testDiv = document.createElement('div'); if('placeholder' in testDiv){ ['','ms','moz','webkit'].forEach(function(pre){ var transform = pre + (pre ? 'T' : 't') + 'ransform'; if(transform in testDiv.style){ moveStyle = transform; } }) } return moveStyle; } this.move = function(){ var start = new Date().getTime(), moveStyle = this.moveStyle(), _this = this; timer = setInterval(function(){ if(new Date().getTime() - start > _this.time){ clearInterval(timer); _this.element.css({ left: x2, top: y2 }) typeof _this.config.callback === 'function' && _this.config.callback(_this.element); return; } x = speedx * (new Date().getTime() - start); y = _this.a*x*x + b*x; if(moveStyle === 'position'){ _this.element.css({ left: x+originx, top: y+originy }) }else{ if(window.requestAnimationFrame){ window.requestAnimationFrame(_this.element[0].style[moveStyle] = 'translate('+x+'px,'+y+'px)'); }else{ _this.element[0].style[moveStyle] = 'translate('+x+'px,'+y+'px)'; } } },INTERVAL) return this; } this.init(); }
CSS3是什么
CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
CSS1提供有关字体、颜色、位置和文本属性的基本信息，该版本已经得到了目前解析HTML和XML的浏览器的广泛支持。
CSS2.0提供给我们了一个机制，让程序员开发时可以不考虑显示和界面就可以制作表单和界面，显示问题可由美工或是程序员后期再来编写相应的 CSS2.0样式来解决。不过由于CSS2.0目前尚未见过很好的编辑软件，所以无法做到所见即所得，编写起来不易。
CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。
滑入滑出的方法
jQuery 滑动方法
通过 jQuery，您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法：
- slideDown()
- slideUp()
- slideToggle()
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
语法：
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideDown() 方法：
实例
$("#flip").click(function(){
$("#panel").slideDown();
});
完整代码
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideDown("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>W3School - 领先的 Web 技术教程站点</p> <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p> </div> <p class="flip">请点击这里</p> </body> </html>
jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。
语法：
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideUp() 方法：
实例
$("#flip").click(function(){
$("#panel").slideUp();
});
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideUp("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; } </style> </head> <body> <div class="panel"> <p>W3School - 领先的 Web 技术教程站点</p> <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p> </div> <p class="flip">请点击这里</p> </body> </html>
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideToggle() 方法：
实例
$("#flip").click(function(){
$("#panel").slideToggle();
});
<!DOCTYPE html> <html> <head> <script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>W3School - 领先的 Web 技术教程站点</p> <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p> </div> <p class="flip">请点击这里</p> </body> </html>
