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 ...
随机推荐
- sql注入总结(一)--2018自我整理
SQL注入总结 前言: 本文和之后的总结都是进行总结,详细实现过程细节可能不会写出来~ 所有sql语句均是mysql数据库的,其他数据库可能有些函数不同,但是方法大致相同 0x00 SQL注入原理: ...
- iptables转发端口
1.本机端口转发 把发往本机80端口的数据重定向到8080端口 iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-por ...
- struts2中的session、request 、和action往页面中传值的方法
ActionContext.getContext().put("list", list); ActionContext.getContext().getValueStack().p ...
- 设置Sublime Text 3的光标样式
升级了Sublime Text 3,结果光标变成了这个样子,非常不习惯: 查了文档http://www.sublimetext.com/3 ,Build 3059中得描述: Added setting ...
- eclipse中出现的一些错误
selection dose not contain a main type解决办法:main忘记加static
- ios多target开发
链接: ios开发时,在Xcode中添加多个targets进行版本控制 如何在iOS项目中创建多个target 多个Target的使用 iOS开发中如何创建多个target
- java工具类,在Windows,Linux系统获取电脑的MAC地址、本地IP、电脑名
package com.cloudssaas.util; import java.io.BufferedReader; import java.io.IOException; import java. ...
- Keras模型的导出和pb文件的转换
Keras有两种类型的模型,序贯模型(Sequential)和函数式模型(Model),函数式模型应用更为广泛,序贯模型是函数式模型的一种特殊情况. 两类模型有一些方法是相同的: model.summ ...
- 流媒体Red5服务自定义媒体文件路径
4. 创建类实现自定义媒体访问路径 使用bean对自己的项目进行配置,更换默认的视频播放目录和视频录制目录.在0.6版的时候, 我们可以直接在red5-web.properties中写入playbac ...
- fetch使用的常见问题及其解决办法
摘自: https://segmentfault.com/a/1190000008484070 fetch使用的常见问题及其解决办法 javascript wonyun 2月25日发布 | 0 收 ...