基于css3的transform实现淘宝首页淘工图像的自由摇摆，不过没有淘宝首页那么逼真，我只是简单的按照匀速摇摆，但是现实情况摇摆速度和角度有关，这就需要一些物理公式进行处理，这里只是简单的写了个demo，没有物理公式的计算，目前demo只支持webkit内核的浏览器，如chrome，safari。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="./jquery-1.7.1.min.js"></script>
<script type="text/javascript">
(function($){
$.fn.animateNum = function(start1,end,duration,fun){
var _t = this;
var start = start1;
var distance = ((end-start)/duration).toFixed(9);
var tt = setInterval(function(){
start= start/1+distance/1;
fun.call(_t,start);
if(start>=end ||start<=start1){
//clearInterval(tt);
distance = 0-distance;
}
},1);
return $(_t);}
})(jQuery);
$(document).ready(function(){
//$('.rotat').animate( {-webkit-transform:rotate(-7deg)},1000);
//$('.rotat').css('-webkit-transform','rotate(-7deg)');
//$('.rotat').animate({'-webkit-transform':'rotate(7deg)'},2000)});
$('.rotat').animateNum(-10,10,200,function(i){
$(this).css('-webkit-transform','rotate('+i+'deg)');
});
});
</script>
<style type="text/css">
html,body {
padding: 0;
margin: 0;
}
.rotat {
width: 70px;
height: 270px;
margin: 0 auto;
-webkit-transform-origin-x: 50%;
-webkit-transform-origin-y: 0px;
-moz-transform-origin-x: 50%;
-moz-transform-origin-y: 0px;
-o-transform-origin-x: 50%;
-o-transform-origin-y: 0px;
/*background-color:grey;*/ /* opacity:0.2;*/
/*-webkit-transform: rotate(7deg);*/
/*-moz-transform: rotate(7deg);*/
/*-o-transform: rotate(7deg);*/
}
.line {
width: 2px;
background-color: grey;
height: 200px;
margin: 0 auto;
opacity: 0.2;
}
.rimg {
background: url(./t.png) no-repeat 0 -8px;
height: 70px;
}
</style>
</head>
<body>
<div class="rotat" style="-webkit-transform: rotate(7deg)">
<div class="line"></div>
<div class="rimg"></div>
</div>
</body>
</html>
分享到：
相关推荐
在本文中，研究者们探讨了一种实用的五自由度摇摆台位置正解算法，通过将一组非线性方程组的求解问题转化为对函数的优化问题，成功地应用了粒子群优化算法（PSO）与Newton迭代法相结合的方法来解决这一问题，并使用...
基于matlab的求解发电机转子摇摆曲线的微分方程，清楚的得到了摇摆曲线。
起重机防摇摆及防摇摆自动定位控制系统
### LED摇摆时钟关键技术知识点 #### 一、项目背景及设计原理 - **项目动机**：本项目是由作者周正华发起的一个纯手工DIY项目，灵感来源于市场上的流行商品——摇摆LED时钟。该时钟的独特之处在于利用LED的摇摆形成...
Vision-based remote 6-DOF structural displacement monitoring system using a unique marker 由三星公司李东华等人编写，对六自由度摇摆台的标定方法研究很有参考价值，在三星官网下载上百美元，知网未收录。
"六自由度并联Stewart摇摆平台"是一种先进的机器人结构，它能够在六个自由度上进行运动，包括平移（沿X、Y、Z轴）和旋转（绕X、Y、Z轴）。这种平台广泛应用于航空、航天、汽车工业、精密测量以及虚拟现实等领域，因...
桥式行车防摇摆控制系统是一种在工业起重机领域中应用的自动化技术，目的在于减少或消除起重机在运行过程中吊物由于加减速引起的摇摆，从而提高操作的效率和安全性。该系统主要由以下几个方面构成。 1. 摇摆的产生...
摇摆式输送机设计说明书 摇摆式输送机设计说明书是机械原理课程设计的重要组成部分，旨在指导学生设计摇摆式输送机的整个过程。本设计说明书涵盖了摇摆式输送机的设计原理、设计要求、设计内容、设计步骤、机构运动...
摇摆棒程序是一种趣味性的计算机程序，通常在图形用户界面（GUI）中运行，通过模拟物理现象，展示一根棒在不同条件下的摆动状态。这种程序可以帮助用户理解物理学中的摆动运动规律，如简谐振动、阻尼振动等概念。在...
这时，一款能给我们的电子设备带来活跃生命力的小程序出现了——它就是“我最摇摆好玩的小程序”，一个具有独特魅力的创意程序。 当用户点开这款小程序的那一刻起，就会发现自己的设备窗口仿佛被赋予了生命，开始...
车辆七自由度模型是模拟和分析汽车动态行为的重要工具，尤其在汽车工程、交通工程以及自动驾驶研究领域中具有广泛的应用。这个模型考虑了车辆在行驶过程中的多种运动学特性，包括车辆的纵向、横向和侧向移动，以及...
接着是模仿操的主体部分，孩子们跟随老师的引导，逐一模仿不同的动物动作，例如小鸟飞翔、小猫走路、小鸭摇摆和小兔跳跃等。在这个过程中，老师应该鼓励孩子们积极思考，如何将看到的动作转换为自己的肢体语言。最后...
本示例着重于实现一种特定类型的动画——钟摆或秋千的摇摆效果。这种动画常见于各种应用中，比如天气应用中的风向指示、游戏中的角色动作等。接下来，我们将深入探讨如何在Android中创建这样的动画效果。 首先，...
根据提供的文件信息，“GJB150.23A-2009第23部分：倾斜和摇摆试验”，可以看出这份文档主要介绍的是关于倾斜和摇摆试验的相关标准与规定。下面将从该标准的基本概念、目的意义、适用范围、试验方法等方面进行详细...
对于车辆来说，每个车轮可以独立上下移动（垂直自由度）、车身可以左右摇摆（横向自由度）、前后移动（纵向自由度）以及绕轴旋转（滚动、俯仰和偏航），这些构成了车辆的基本自由度。此外，考虑到转向系统的复杂性，...
《C51摇摆时钟：创意科技与废旧硬盘的完美结合》 “C51摇摆时钟”是一款极具创新性的时钟装置，它巧妙地利用了废弃硬盘的音圈电机，将其转化为驱动时钟运行的核心动力源，同时结合七颗LED灯，通过独特的显示方式来...