基于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中创建这样的动画效果。 首先，...
对于车辆来说，每个车轮可以独立上下移动（垂直自由度）、车身可以左右摇摆（横向自由度）、前后移动（纵向自由度）以及绕轴旋转（滚动、俯仰和偏航），这些构成了车辆的基本自由度。此外，考虑到转向系统的复杂性，...
《C51摇摆时钟：创意科技与废旧硬盘的完美结合》 “C51摇摆时钟”是一款极具创新性的时钟装置，它巧妙地利用了废弃硬盘的音圈电机，将其转化为驱动时钟运行的核心动力源，同时结合七颗LED灯，通过独特的显示方式来...
《jQuery网页颤抖摇摆特效详解》 在网页设计与开发中，动态效果是提升用户体验、增加互动性的重要手段。jQuery，作为一个广泛使用的JavaScript库，以其简洁的API和强大的功能深受开发者喜爱。本篇文章将深入探讨"20...