首页
所有分类
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格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
Javascript删除指定元素节点的方法
Jun 21 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
Oct 19 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
JavaScript常见事件处理程序实例总结
Jan 05 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
vue ref如何获取子组件属性值
Mar 31 Vue.js
微信小程序实现图片懒加载的示例代码
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) Date(1) 抽象类(1) Scheduled(1) 接口(1) 乱码(3) router(1) 驱动模型(1) 单向链表(1) 路由(1)
You might like
PHP 身份证号验证函数
2009/05/07 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
Laravel中间件实现原理详解
2016/10/09 PHP
网页图片延时加载的js代码
2010/04/22 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
js轮播图代码分享
2016/07/14 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
14 个折磨人的 JavaScript 面试题
2016/08/08 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
浅析JavaScript中作用域和作用域链
2016/12/06 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
浅谈AngularJs 双向绑定原理(数据绑定机制)
2017/12/07 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
2018/10/16 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
深入解析Python中的lambda表达式的用法
2015/08/28 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
大学生创业计划书的用途
2014/01/08 职场文书
学生检讨书
2015/01/27 职场文书
幼师小班个人总结
2015/02/12 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
深入解读Java三大集合之map list set的用法
2021/11/11 Java/Android
Mysql InnoDB 的内存逻辑架构
2022/05/06 MySQL
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers