首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生js实现简单的焦点图效果实例

Posted in Javascript onDecember 14, 2017

用到一些封装好的运动函数，主要是定时器

效果为图片和图片的描述定时自动更换。

<!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;
*
* 曲线方程
*
* */
//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实现简单的焦点图效果实例

- Author -

Steven~

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 闭包深入理解(closure)
May 27 Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
网页中CDATA标记的说明
Sep 12 Javascript
通过DOM脚本去设置样式信息
Sep 19 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
每天一篇javascript学习小结（面向对象编程）
Nov 20 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
jquery处理checkbox（复选框）是否被选中实例代码
Jun 12 jQuery
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
fetch 使用及如何接收JS传值
Nov 11 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 #Javascript
详解vue-cli 接口代理配置
Dec 13 #Javascript
vue项目总结之文件夹结构配置详解
Dec 13 #Javascript
vue.js简单配置axios的方法详解
Dec 13 #Javascript
关于Vue单页面骨架屏实践记录
Dec 13 #Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 #Javascript
node vue项目开发之前后端分离实战记录
Dec 13 #Javascript
太阳码(1) 目录管理(1) 日志(1) Word(2) 二维码(2) 延时任务(1) 磁盘管理(1) 条码(1) Get(1) Post(1)
You might like
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
PHP实现算式验证码和汉字验证码实例
2015/03/09 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
PHP7 弃用功能
2021/03/09 PHP
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
2012/12/28 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
vue2.0之多页面的开发的示例
2018/01/30 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
Python使用MONGODB入门实例
2015/05/11 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
Python实现的寻找前5个默尼森数算法示例
2018/03/25 Python
实例详解Python装饰器与闭包
2019/07/29 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
《孔子拜师》教学反思
2014/02/24 职场文书
企业活动策划方案
2014/06/02 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
个人对照检查材料思想汇报（四风问题）
2014/09/25 职场文书
2014年银行工作总结范文
2014/11/12 职场文书
教师个人考察材料
2014/12/16 职场文书
母亲节主题班会
2015/08/14 职场文书
2019年七夕情人节浪漫祝福语大全！
2019/08/08 职场文书
Go语言grpc和protobuf
2022/04/13 Golang