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 ...
随机推荐
- dns 安全
域名系统组织架构 DNS是全球互联网中最重要的基础服务之一,也是如今唯一的一种有中心点的服务.全球域名系统组织与管理架构如下图所示: ICANN 互联网名称与数字地址分配机构(The Interne ...
- Java 8新特性----Lambda
Lambda 一.如何辨别Lambda表达式 Runnable noArguments = () -> System.out.println("Hello World"); ...
- 一些公司的面试题目 U3D
#include <iostream> using namespace std; int main() { int N; while (cin>>N&&N> ...
- JNI编程实现（Linux）
JNI是Java Native Interface的缩写,是Java平台的本地调用,从Java1.1就成为了Java标准的一部分,它允许Java代码和其它语言的代码进行互相调用,只要调用约定支持即可, ...
- JS中JSON.parse和eval的异同
1.相同点 JSON.parse和eval函数都可将一段json字符串转换为json对象,如: var json = '{"intro":[{"name":&q ...
- WTL中最简单的实现窗口拖动的方法（转）
目前,很多基于对话框的应用程序中对话框都是不带框架的,也就是说对话框没有标题栏.众所周知,窗口的移动都是通过鼠标拖动窗口的标题栏来实现的,那么现在应用程序中的对话框没有了标题栏,用户如何移动对话框呢? ...
- .hashCode方法的作用
对于包含容器类型的程序设计语言来说,基本上都会涉及到hashCode.在Java中也一样,hashCode方法的主要作用是为了配合基于散列的集合一起正常运行,这样的散列集合包括HashSet.Hash ...
- python 进程池pool简单使用
平常会经常用到多进程,可以用进程池pool来进行自动控制进程,下面介绍一下pool的简单使用. 需要主动是,在Windows上要想使用进程模块,就必须把有关进程的代码写if __name__ == ‘ ...
- 操作argc, argv的经典写法
[问题] 我在看boost源代码的时候看到如下的代码, template<class charT> basic_command_line_parser<charT>:: bas ...
- SqlSession介绍
SqlSession是MyBatis的关键对象,是执行持久化操作的对象,类似于JDBC中的Connection.它是应用程序与持久存储层之间执行交互操作的一个单线程对象,也是MyBatis执行持久化操 ...