原生js实现简单的焦点图效果
用到一些封装好的运动函数，主要是定时器
效果为图片和图片的描述定时自动更换
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul,
li,
p,
h3 {
padding: 0;
margin: 0;
list-style: none;
} img {
border: none;
vertical-align: top;
} #bg_box {
width: 1000px;
height: 590px;
margin: 50px auto;
position: relative;
background: url(img/bg1.jpg) no-repeat;
} .pic {
width: 440px;
height: 274px;
position: absolute;
top: 50px;
left: 220px;
overflow: hidden;
} .li_box {
width: 1760px;
height: 274px;
position: absolute;
left: 0;
} .tags {
width: 440px;
height: 80px;
position: absolute;
bottom: -80px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
color: white;
padding-left: 20px;
padding-top: 15px;
box-sizing: border-box;
} .tags:nth-of-type(1) {
/*bottom: 0;*/
} .img {
float: left;
width: 440px;
height: 274px;
} h3 {
font: bold 20px/30px "微软雅黑";
} p {
font: 16px/30px "微软雅黑";
}
</style>
<script src="tween.js"></script>
<script src="commom.js"></script>
<script type="text/javascript">
window.onload = function() {
//获取元素
var liBbox = $('ul')[0];
var li = $('li');
var tags = $('.tags')
var num = 0; //设置初始位置 Change() function Change() {
var M = tags[num];
MTween(M, 'bottom', 0, 500, 'px', 'linear', function() { //先让描述内容出现
num++
if(num > li.length - 1) { //边界设置。
return;
}
setTimeout(function() {
MTween(M, 'bottom', -80, 500, 'px', 'linear', function() { //让描述内容不显示
MTween(liBbox, 'left', -num * 440, 800, 'px', 'linear', function() {
Change();
}); //切换图片
});
}, 1000)
});
}
}
</script>
</head> <body>
<section id="bg_box">
<div class="pic">
<ul class="li_box">
<li>
<img class="img" src="img/a5.gif">
</li>
<li>
<img class="img" src="img/a6.gif">
</li>
<li>
<img class="img" src="img/a7.gif">
</li>
<li>
<img class="img" src="img/a8.gif">
</li>
</ul>
<div class="tags">
<h3 class="title">下雨了~~~</h3>
<p class="tag">这是一个适合在家睡觉的日子!!</p>
</div>
<div class="tags">
<h3 class="title">包饺子~~~</h3>
<p class="tag">一只会居家过日子的小狐狸！！</p>
</div>
<div class="tags">
<h3 class="title">生气了~~~</h3>
<p class="tag">吃掉好吃的就不生气了！！</p>
</div>
<div class="tags">
<h3 class="title">出发了~~~</h3>
<p class="tag">来一段说走就走的旅行!!</p>
</div>
</div>
</section>
</body> </html>
commom.js
function MTween(obj,attr,end,duration,unit,way,callBack){
if(obj.isAnim) return;
//obj开始运动了 自定义属性
obj.isAnim = true;
if(!way){ //如果用户没有选择运动方式就默认匀速
way = 'linear';
}
if(!unit){ //如果用户没有选择运动方式就默认匀速
unit = '';
}
var start = parseFloat(getStyle(obj,attr));//起始位置
// var end = 1000;//目标点
// var duration = 1000;//动画执行的总时间 单位是毫秒
var startTime = Date.now();
var s = end - start; //总路程
// var v = s/duration; //计算出来的速度
//每次20ms走一帧
clearInterval(timer);
var timer = 0;
timer = setInterval(function(){
var endTime = Date.now();
//计算出当前时间
var t = endTime-startTime;
if(t>=duration){
t = duration;
clearInterval(timer);//到达目标点要清除定时器
}
// obj.style[attr] = t*s/duration+start+'px';
// console.log(Tween[way](t,start,s,duration))
obj.style[attr] = Tween[way](t,start,s,duration)+unit;
//透明度的兼容处理
if(attr=='opacity'){
obj.style.filter = 'Alpha(opacity='+Tween[way](t,start,s,duration)*100+')';
}
if(t==duration){
obj.isAnim = false;
//等到上一个动画完成 然后再调用
if(callBack){
callBack();
}
}
},20);
}
tween.js
/*
* t : time 已过时间 当前时间-初始时间
* b : begin 起始值
* c : count 总的运动值 总路程
* d : duration 持续时间 总时间
*
* s = vt; => c = t*c/d 这里只计算总共要运动的路程 ，不包括起始位置
*
* attrVal = t*c/d + b;
*
* 曲线方程
*
* http://www.cnblogs.com/bluedream2009/archive/2010/06/19/1760909.html
* */ //Tween.linear(); var Tween = {
linear: function (t, b, c, d){ //匀速
return c*t/d + b;
},
easeIn: function(t, b, c, d){ //加速曲线
return c*(t/=d)*t + b;
},
easeOut: function(t, b, c, d){ //减速曲线
return -c *(t/=d)*(t-2) + b;
},
easeBoth: function(t, b, c, d){ //加速减速曲线
if ((t/=d/2) < 1) {
return c/2*t*t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInStrong: function(t, b, c, d){ //加加速曲线
return c*(t/=d)*t*t*t + b;
},
easeOutStrong: function(t, b, c, d){ //减减速曲线
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeBothStrong: function(t, b, c, d){ //加加速减减速曲线
if ((t/=d/2) < 1) {
return c/2*t*t*t*t + b;
}
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
elasticIn: function(t, b, c, d, a, p){ //正弦衰减曲线（弹动渐入）
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p/4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
elasticOut: function(t, b, c, d, a, p){ //*正弦增强曲线（弹动渐出）
if (t === 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*0.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
} else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
elasticBoth: function(t, b, c, d, a, p){
if (t === 0) {
return b;
}
if ( (t /= d/2) == 2 ) {
return b+c;
}
if (!p) {
p = d*(0.3*1.5);
}
if ( !a || a < Math.abs(c) ) {
a = c;
var s = p/4;
}
else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
if (t < 1) {
return - 0.5*(a*Math.pow(2,10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
return a*Math.pow(2,-10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
},
backIn: function(t, b, c, d, s){ //回退加速（回退渐入）
if (typeof s == 'undefined') {
s = 1.70158;
}
return c*(t/=d)*t*((s+1)*t - s) + b;
},
backOut: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 3.70158; //回缩的距离
}
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
backBoth: function(t, b, c, d, s){
if (typeof s == 'undefined') {
s = 1.70158;
}
if ((t /= d/2 ) < 1) {
return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
}
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
bounceIn: function(t, b, c, d){ //弹球减振（弹球渐出）
return c - Tween['bounceOut'](d-t, 0, c, d) + b;
},
bounceOut: function(t, b, c, d){//*
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
}
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
},
bounceBoth: function(t, b, c, d){
if (t < d/2) {
return Tween['bounceIn'](t*2, 0, c, d) * 0.5 + b;
}
return Tween['bounceOut'](t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
}
}
原生js实现简单的焦点图效果的更多相关文章
- 原生js写简单轮播图方式１－从左向右滑动
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- jq商品展示图放大镜 and 原生js和html5写的放大镜效果 ~~效果不错
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8&qu ...
- jQuery 简单滑动轮播图效果
一般页面简单轮播图效果用jQuery制作更加简单.我们来看看以下效果是如何来进行制作的. 其html结构下所示: <div id="box"> < ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- 原生JS、CSS实现的转盘效果（目前仅支持webkit）
这是一个原生JS.CSS实现的转盘效果(题目在这:http://www.cnblogs.com/arfeizhang/p/turntable.html),花了半个小时左右,准备睡觉,所以先贴一段代码, ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 基于js全屏动画焦点图幻灯片
今天给大家分享一款基于js全屏动画焦点图幻灯片.这款焦点图内的内容以动画形式出现和消失.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="sl ...
- 原生JS实现简单富文本编辑器2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 20180705关于mysql binlog的解析方式
来自:https://blog.csdn.net/u012985132/article/details/74964366/ 关系型数据库和Hadoop生态的沟通越来越密集,时效要求也越来越高.本篇就来 ...
- MyBatis3-SqlSessionDaoSupport的使用
以下内容引用自http://www.yihaomen.com/article/java/336.htm: 在MyBatis3中这个Mapper接口貌似充当了以前在iBatis2中的DAO层的作用.但事 ...
- 开源软件Review Board
开源软件, Review Board 代码审查的. https://www.reviewboard.org/
- 转：SQL 索引最左前缀原理
表结构和索引列 假设数据库中表是这样的: 我们只考虑一张表employees.titles: 索引是(emp_no,title,from_date) SHOW INDEX FROM employee ...
- ubuntu Change Language
慎用 所謂的語系(locale),其實包含語言及地區的設定,因為除了語言之外,國家與國家的日期表示方式.數字格式.貨幣符號.度量單位可能都不一樣,所以才會有了這個locale的發明,依照國家和語言給予 ...
- LeetCode 917. Reverse Only Letters (仅仅反转字母)
题目标签:String 利用left, right 两个pointers, 从左右开始 互换 字母.如果遇到的不是字母,那么继续移动到下一个. Java Solution: Runtime beats ...
- Hdu5303 Delicious Apples 贪心
题目链接: HDU5303 题意: 有一条环形的长为L的路,仓库在位置0处, 这条路上有n棵苹果树,给出每棵苹果树的位置和苹果数量, 问用 一次最多能装K个苹果的篮子 把这条路上全部苹果採回仓库最 ...
- CVPR2015一些文章整理
简单看了一部分CVPR2015的文章.整理了一下. 当中我决定把精彩的文章加粗. 主要是认为有些文章仅仅读了一遍,没有发现非常多非常有道理的point(虽然我承认他们的工作都花了非常大的功夫.可是没有 ...
- Android 自己定义圆圈进度并显示百分比例控件（纯代码实现）
首先,感谢公司能给我闲暇的时间,来稳固我的技术,让我不断的去探索研究,在此不胜感激. 先不说实现功能,上图看看效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...
- CF949 C Data Center Maintenance——边双连通分量
题目:http://codeforces.com/contest/949/problem/C 把一个点指向修改它会影响到的点就可以做了: 有取模,所以多出一些要注意的地方,首先是可能出现环,所以需要 ...