JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图
1. JS封装运动框架
// 多个属性运动框架 添加回调函数
function animate(obj,json,fn) {
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 浏览器
}
}
2. 网易轮播图
- 效果图
- 算是原理图吧
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网易轮播图</title>
<link rel="stylesheet" href="css/css.css">
<script src="js/myJS.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
</head>
<body>
<div class="box" id="js_box">
<div class="slider" id="slider">
<div class="slider-main" id="slider_mian">
<div class="slider-mian-img"><a href="javascript:;"><img src="images/1.jpg" alt=""></a></div>
<div class="slider-mian-img"><a href="javascript:;"><img src="images/2.jpg" alt=""></a></div>
<div class="slider-mian-img"><a href="javascript:;"><img src="images/3.jpg" alt=""></a></div>
<div class="slider-mian-img"><a href="javascript:;"><img src="images/4.jpg" alt=""></a></div>
<div class="slider-mian-img"><a href="javascript:;"><img src="images/5.jpg" alt=""></a></div>
<div class="slider-mian-img"><a href="javascript:;"><img src="images/6.jpg" alt=""></a></div>
</div>
</div>
<div class="slider-ctrl" id="slider_ctrl">
<span class="slider-ctrl-pre"></span>
<span class="slider-ctrl-next"></span>
</div>
</div>
</body>
</html>
- CSS
* {
margin: 0;
padding: 0;
}
img {
vertical-align: bottom;
}
.box {
width: 310px;
height: 270px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.slider {
width: 100%;
height: 220px;
background-color: red;
}
.slider-ctrl {
text-align: center;
}
.slider-ctrl-con {
display: inline-block;
width: 35px;
height: 20px;
background: url("../images/icon.png") no-repeat -24px -782px;
margin: 10px 0 0 5px;
cursor: pointer;
text-indent: 99em;
overflow: hidden;
}
.current {
background-position: -24px -762px;
}
.slider-ctrl-pre,
.slider-ctrl-next {
position: absolute;
top: 50%;
margin-top: -35px;
display: inline-block;
width: 30px;
height: 34px;
background: url("../images/icon.png") no-repeat;
opacity: 0.8;
cursor: pointer;
}
.slider-ctrl-pre {
left: 0;
background-position: 5px top;
}
.slider-ctrl-next {
right: 0;
background-position: -4px -45px;
}
.slider-main {
width: 200%;
height: 100%;
background-color: orange;
}
.slider-mian-img {
position: absolute;
left: 0;
top: 0;
}
- JavaScript
window.onload = function () {
var slider = $("slider");
var slider_mian = $("slider_mian"); // 存放图片的盒子
var slider_main_imgs = slider_mian.children; // 图片数组
var slider_ctrl = $("slider_ctrl"); // pageControl
var slider_ctrls = slider_ctrl.children;
// 加载pageontrol
for (var i=0;i<slider_main_imgs.length;i++) {
var span = document.createElement("span");
span.className = "slider-ctrl-con";
span.innerHTML = slider_main_imgs.length - i;
slider_ctrl.insertBefore(span,slider_ctrls[1]);
}
slider_ctrl.children[1].className = "slider-ctrl-con current";
for (var i=1;i<slider_main_imgs.length;i++) {
slider_main_imgs[i].style.left = slider.offsetWidth + "px";
}
// 添加点击事件
var showIndex = 0;
for (var index in slider_ctrls) {
slider_ctrls[index].onclick = function () {
if (this.className == "slider-ctrl-pre") { // 点击了左按钮
animate(slider_main_imgs[showIndex],{left:slider.offsetWidth});
showIndex--;
if (showIndex < 0) {
showIndex = slider_main_imgs.length - 1;
}
slider_main_imgs[showIndex].style.left = -slider.offsetWidth + "px";
animate(slider_main_imgs[showIndex],{left:0});
} else if (this.className == "slider-ctrl-next") { // 点击了右按钮
autoPlay();
} else { // 其他按钮
// alert(showIndex);
var willShow = this.innerHTML - 1;
if (willShow > showIndex) { // 点击了正在展示图片的右侧按钮
// 将要显示的图片立刻定位到右面
slider_main_imgs[willShow].style.left = slider.offsetWidth + "px";
animate(slider_main_imgs[showIndex],{left:-slider.offsetWidth}); // 当前图片慢慢走出去
animate(slider_main_imgs[willShow],{left:0}); // 将要显示的图片慢慢进来
showIndex = willShow;
} else if (willShow < showIndex) {
// 将要显示的图片立刻定位到左面
slider_main_imgs[willShow].style.left = -slider.offsetWidth + "px";
animate(slider_main_imgs[showIndex],{left:slider.offsetWidth}); // 当前的图片慢慢走出去
animate(slider_main_imgs[willShow],{left:0}); // 将要显示的图片慢慢进来
showIndex = willShow;
}
}
pageControl();
}
}
// pageControl变化
function pageControl() {
for (var i=1;i<=slider_ctrls.length - 2;i++) {
slider_ctrls[i].className = "slider-ctrl-con";
}
slider_ctrls[showIndex + 1].className = "slider-ctrl-con current";
}
// 开启定时器
var timer = null;
timer = setInterval(autoPlay,3000);
function autoPlay() {
animate(slider_main_imgs[showIndex],{left:-slider.offsetWidth});
showIndex++;
if (showIndex > slider_main_imgs.length - 1) {
showIndex = 0;
}
slider_main_imgs[showIndex].style.left = slider.offsetWidth + "px";
animate(slider_main_imgs[showIndex],{left:0});
pageControl();
}
// 清除定时器
$("js_box").onmouseover = function () {
clearInterval(timer);
}
$("js_box").onmouseout = function () {
clearInterval(timer);
timer = setInterval(autoPlay,3000);
}
}
2.旋转轮播图
- 效果图
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转木马轮播图</title>
<link rel="stylesheet" href="css/css.css">
<script src="js/myJS.js" type="text/javascript"></script>
<script src="js/index.js" type="text/javascript"></script>
</head>
<body>
<div class="box" id="js_box">
<div class="slider" id="js_slider">
<ul>
<li><a href="javascript:;"><img src="images/slidepic1.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/slidepic2.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/slidepic3.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/slidepic4.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/slidepic5.jpg" alt=""></a></li>
<li><a href="javascript:;"><img src="images/slidepic6.jpg" alt=""></a></li>
</ul>
</div>
<div class="arrow" id="js_arrow">
<a href="javascript:;" class="pre"></a>
<a href="javascript:;" class="next"></a>
</div>
</div>
</body>
</html>
- CSS
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.slider {
width: 1200px;
height: 600px;
margin: 100px auto;
position: relative;
}
ul {
width: 100%;
height: 100%;
}
ul li {
position: absolute;
top: 100px;
left: 200px;
}
ul li img {
width: 100%;
}
.arrow {
width: 100%;
background-color: orange;
opacity: 0;
position: absolute;
top: 50px;
}
.pre,.next {
width: 76px;
height: 112px;
position: absolute;
background: url("../images/prev.png") no-repeat;
top: 0;
}
.pre {
left: 0;
}
.next {
right: 0;
background: url("../images/next.png") no-repeat;
}
- JavaScript
window.onload = function () {
var arrow = $("js_arrow"); // 左右按钮的盒子,整体控制左右按钮的显示与隐藏
var box = $("js_box");
var lis = $("js_slider").children[0].children; // 图片集合
var pre = arrow.children[0]; // 左按钮
var next = arrow.children[1]; // 右按钮
box.onmouseover = function () {
animate(arrow,{opacity:100});
}
box.onmouseout = function () {
animate(arrow,{opacity:0});
}
// 存储了每个图片的信息
var json = [
{ // 1
width:400,
top:20,
left:50,
opacity:20,
zIndex:2
},
{ // 2
width:550,
top:70,
left:0,
opacity:80,
zIndex:3
},
{ // 3
width:800,
top:100,
left:200,
opacity:100,
zIndex:4
},
{ // 4
width:550,
top:70,
left:600,
opacity:80,
zIndex:3
},
{ //5
width:400,
top:20,
left:750,
opacity:20,
zIndex:2
},
{ //6
width:350,
top:0,
left:425,
opacity:10,
zIndex:1
}
];
var flag = true; // 控制动画的标记
change();
pre.onclick = function () {
if (flag == true) { // flag为true时才可以做动画
json.push(json.shift()); // 交换json
flag = false; // 立即将flag修改为false,来控制动画
change();
}
}
next.onclick = function () {
if (flag == true) {
json.unshift(json.pop());
flag = false;
change();
}
}
function change() {
for (var i=0;i<lis.length;i++) {
animate(lis[i],json[i],function () {
// 回调函数,修改控制动画的标记
flag = true;
});
}
}
}
JS封装动画框架,网易轮播图,旋转轮播图的更多相关文章
- JS封装运动框架（另一种写法）
function animate(obj, json, interval, sp, fn) { clearInterval(obj.timer); //var k = 0; //var j = 0; ...
- js动画框架设计
当你不再依赖JQuery时,当你已经厌倦了引入js类库实现一些动画效果的方式,当你想实现一个简单而实用的动画框架......下面介绍下愚人设计的动画框架:支持动画缓动算法函数,如Linear.Cubi ...
- Js封装的动画函数实现轮播图
---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画 function ...
- 用require.js封装原生js轮播图
index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- 用原生js封装轮播图
原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
- JS-特效 ～ 05. 缓动框架兼容封装／回掉函数／兼容透明度／层级、旋转轮播图、正则表达式、验证表单注册账号、
缓动函数中opcity 写百分值的值 JS一般不用小数运算,会照成精度丢失 元素的默*认透明度是 层级一次性赋值,不缓动 利用for…in为同一个父元素的子元素绑定属性 缓动框架兼容封装/回掉函数/ ...
- js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- 第一百五十五节，封装库--JavaScript，轮播器
封装库--JavaScript,轮播器 html <div id="banner"> <img src="img/banner1.jpg" a ...
随机推荐
- [NOIp2010提高组]关押罪犯
OJ题号:洛谷1525 思路:贪心. 先将所有的人按怨气值从大到小排一下,然后依次尝试将双方分入两个不同的监狱,如果失败(即已分入相同的监狱),则输出这个怨气值. #include<cstdio ...
- CocosCreator原生平台退出游戏，暂停和继续
原生平台退出游戏,方法为:cc.director.end();官方解释:End the life of director in the next frame暂停游戏,方法: cc.director.p ...
- Java中获取指定日为星期几及其他日期操作
摘自:http://blog.csdn.net/cselmu9/article/details/8625530#t6 在开发中经常会使用到一些日期方面的操作,下面例子展示几个常用的操作. 1.取得指定 ...
- [原创]PostMan接口测试神器
[原创]PostMan接口测试神器 1 PostMan是什么? Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件. 2 Postman工具下载及安装 官方网站: htt ...
- 【转】Intellij IDEA调试功能
http://www.cnblogs.com/winner-0715/p/5422952.html 先编译好要调试的程序.1.设置断点
- 矩阵乘法code
VOJ1067 我们可以用上面的方法二分求出任何一个线性递推式的第n项,其对应矩阵的构造方法为:在右上角的(n-1)*(n-1)的小矩阵中的主对角线上填1,矩阵第n行填对应的系数,其它地方都填0.例如 ...
- 移动电源、3G路由拆机
这款电源4400mAh,淘宝也就八十元左右,可以作为无线路由使用,可以插3G网卡,总的来说还算不错,关键是外观精美,网上一堆和华美A100那样的,可惜实在太丑,这款外观虽然漂亮,但是和一百多的相比不支 ...
- 基于 CentOS Mysql 安装与主从同步配置详解
CentOS Mysql 安装 Mysql (Master/Slave) 主从同步 1.为什么要使用主从同步 1.如果主服务器出现问题,可以快速切换到从服务器提供的服务 2.可以在从服务器上执行查询操 ...
- js-变量定义关键字const,var,let
1.var定义的变量可以修改,如果不初始化会输出undefined,不会报错. js中最常用的关键字:基本大多数据学js时都只看到使用过var.从没相关还有其他定义 var a = 1; // var ...
- C#中Invoke的用法1
invoke和begininvoke 区别 一直对invoke和begininvoke的使用和概念比较混乱,这两天看了些资料,对这两个的用法和原理有了些新的认识和理解. 首先说下,invoke和be ...