JavaScript--封装好的运动函数+旋转木马例子
2024-09-04 09:24:12
封装好的运动函数：
1.能控制目标元素的多种属性
2.能自动获取元素的样式表：
3.获取样式函数兼容
4.能对于元素的多属性进行动画（缓动动画）修改
5.能区分透明度等没单位的属性和px属性的变化
animate.js
/**
* 获取样式函数
* @param element 要获取的样式的对象
* return 目标css样式对象
* */
function getStyle(element) {
if(window.getComputedStyle) {
return window.getComputedStyle(element,null);
}else if(element.currentStyle){
return element.currentStyle;
}
} /**
* 动画函数
* @param element html标签
* @param attr 标签属性
* @param target 目标参数
* */
function animate(element,obj) {
clearInterval(element.timer);
element.timer = setInterval(function () {
var flag = true;
for(var attr in obj){
// 在for in 的内部要区别开到底是透明度还是像素px的变化
if( attr == "opacity") {
var current = getStyle(element)[attr];
var target = obj[attr];
current = current * 100;
target = target * 100;
// Math.round() 函数返回一个数字四舍五入后最接近的整数值。
current = Math.round(current);
var step = (target - current) / 10;
current += current <= target ? Math.ceil(step):Math.floor(step);
if(current != target) {
flag = false;
}
// element.style.left等
element.style[attr] = current / 100;
}else if(attr == "zIndex"){
element.style[attr] = obj[attr];
} else{
var current = parseInt(getStyle(element)[attr]);
var target = obj[attr];
var step = (target - current) / 10;
current += current <= target ? Math.ceil(step):Math.floor(step);
if(current != target) {
flag = false;
}
// element.style.left等
element.style[attr] = current+ "px";
}
}
if(flag) {
clearInterval(element.timer);
}
},40);
}
animate2.js
// 多个属性运动框架 添加回调函数
function animate(obj,json,fn) { // 给谁 json
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var flag = true; // 用来判断是否停止定时器 一定写到遍历的外面
for(var attr in json){ // attr 属性 json[attr] 值
//开始遍历 json
// 计算步长 用 target 位置 减去当前的位置 除以 10
// console.log(attr);
var current = 0;
if(attr == "opacity")
{
current = Math.round(parseInt(getStyle(obj,attr)*100)) || 0;
console.log(current);
}
else
{
current = parseInt(getStyle(obj,attr)); // 数值
}
// console.log(current);
// 目标位置就是 属性值
var step = ( json[attr] - current) / 10; // 步长 用目标位置 - 现在的位置 / 10
step = step > 0 ? Math.ceil(step) : Math.floor(step);
//判断透明度
if(attr == "opacity") // 判断用户有没有输入 opacity
{
if("opacity" in obj.style) // 判断 我们浏览器是否支持opacity
{
// obj.style.opacity
obj.style.opacity = (current + step) /100;
}
else
{ // obj.style.filter = alpha(opacity = 30)
obj.style.filter = "alpha(opacity = "+(current + step)* 10+")"; }
}
else if(attr == "zIndex")
{
obj.style.zIndex = json[attr];
}
else
{
obj.style[attr] = current + step + "px" ;
} if(current != json[attr]) // 只要其中一个不满足条件 就不应该停止定时器 这句一定遍历里面
{
flag = false;
}
}
if(flag) // 用于判断定时器的条件
{
clearInterval(obj.timer);
//alert("ok了");
if(fn) // 很简单 当定时器停止了。 动画就结束了 如果有回调，就应该执行回调
{
fn(); // 函数名 + （） 调用函数 执行函数
}
}
},30)
}
function getStyle(obj,attr) { // 谁的 那个属性
if(obj.currentStyle) // ie 等
{
return obj.currentStyle[attr]; // 返回传递过来的某个属性
}
else
{
return window.getComputedStyle(obj,null)[attr]; // w3c 浏览器
}
}
旋转木马例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>旋转木马轮播图</title>
<style>
/*初始化 reset*/
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;}
ol,ul{list-style:none}
a{text-decoration:none}
fieldset,img{border:0;vertical-align:top;}
a,input,button,select,textarea{outline:none;}
a,button{cursor:pointer;} .wrap{
width:1200px;
margin:100px auto;
}
.slide {
height:500px;
position: relative;
}
.slide li{
position: absolute;
left:200px;
top:0;
}
.slide li img{
width:100%;
}
.arrow{
/*opacity: 0;*/
}
.prev,.next{
width:76px;
height:112px;
position: absolute;
top:50%;
margin-top:-56px;
background: url(images/prev.png) no-repeat;
z-index: 99;
}
.next{
right:0;
background-image: url(images/next.png);
}
</style>
</head> <body>
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li>
<a href="#"><img src="data:images/slidepic1.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="data:images/slidepic2.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="data:images/slidepic3.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="data:images/slidepic4.jpg" alt="" /></a>
</li>
<li>
<a href="#"><img src="data:images/slidepic5.jpg" alt="" /></a>
</li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev" id="arrLeft"></a>
<a href="javascript:;" class="next" id="arrRight"></a>
</div>
</div>
</div>
<!--把动画函数封装好，再通过script标签的属性引入到当前文件-->
<script src="animate.js"></script>
<script>
/**
* 第一个功能：
* 让图片都散开，到达每一张图片应该到达的位置
* 根据config数组，设置每一张图片的位置即可
*
* 第二个功能
* 旋转
* 点击左右按钮
*/
var config = [
{
width: 400,
top: 20,
left: 50,
opacity: 0.2,
zIndex: 2
}, //
{
width: 600,
top: 70,
left: 0,
opacity: 0.8,
zIndex: 3
}, //
{
width: 800,
top: 100,
left: 200,
opacity: 1,
zIndex: 4
}, //
{
width: 600,
top: 70,
left: 600,
opacity: 0.8,
zIndex: 3
}, //
{
width: 400,
top: 20,
left: 750,
opacity: 0.2,
zIndex: 2
} //
]; var slide = document.getElementById('slide');
var slideItem = slide.children[0].children;
var arrLeft = document.getElementById("arrLeft");
var arrRight = document.getElementById("arrRight");
// 页面加载完毕后，运行散开动画
for(var i = 0 ; i < slideItem.length; i++ ) {
animate(slideItem[i],config[i]); }
// 给右按钮添加点击事件 arrRight.onclick = function () {
//splice() 方法通过删除现有元素和/或添加新元素来更改一个数组的内容。
// config.splice(0,1)[0] 截取数组的第一个元素
// 再把截取的元素放到改变之后的数组的最后位置
config.splice(config.length,0,config.splice(0,1)[0]);
for(var i = 0 ; i < slideItem.length; i++ ) {
animate(slideItem[i],config[i]);
}
}
arrLeft.onclick = function () {
config.splice(0,0,config.splice(config.length-1,1)[0]);
for(var i = 0 ; i < slideItem.length; i++ ) {
animate(slideItem[i],config[i]);
}
} </script>
</body> </html>
最新文章
- oc swizzling 真的好用
- checkbox js onclick ajax，列表页表格中修改数据
- [5] 智能指针boost::shared_ptr
- Git搭建团队开发环境操作演练
- HDU 4749-Parade Show（KMP变形）
- poj 1364 差分约束
- HDU--5280(dp或枚举)
- VRay 2.0 SP1 2.10.01 for 3ds max 9/2008/2009/2010/2011/2012 32/64位 顶渲简体中文版+英文版[中国室内设计论坛-室内人]
- 怎么样excel其产生的条形码（10分钟的时间excel）从而出现了条形码
- 用js判断是否为手机浏览，如果是手机浏览就跳转到手机站
- 如何设置让网站禁止被爬虫收录？robots.txt
- CF786B Legacy
- 【搬运】 Page Object 官方文档 （新增了Widget特性）
- STL之vector容器详解
- 「Android」SurfaceFlinger分析
- springMVC 使用WebApplicationContext获取ApplicationContext对象
- Eclipse中将web项目自动发布到Tomcat webapps下（转）
- [ Windows BAT Script ] BAT 脚本获取windows权限
- 计算机组成原理实验之CPU组成与指令周期实验
- SQL Server 2008自动备份数据库