首页
所有分类
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 相关文章推荐
document对象execCommand的command参数介绍
Aug 01 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
javascript为按钮注册回车事件（设置默认按钮）的方法
May 09 Javascript
AngularJs验证重复密码的方法(两种)
Nov 25 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 Javascript
使用vue-router切换页面时，获取上一页url以及当前页面url的方法
May 06 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
JavaScript实现图片放大预览效果
Nov 02 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
Ubuntu Server(6) Repository接口(3) 域控制器(1) FTP(9) systemctl(1) Android(19) Spring Data JPA(4) DHCP(2) 线程池(1) 池化技术(1)
You might like
php无限遍历文件夹示例分享
2014/03/04 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
2014/03/12 Javascript
JQuery中使用ajax传输超大数据的解决方法
2014/07/14 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
jQuery的Read()方法代替原生JS详解
2016/11/08 Javascript
Jquery Easyui日历组件Calender使用详解（23）
2016/12/18 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
Vue动态组件实例解析
2017/08/20 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
实例详解BootStrap的动态模态框及静态模态框
2018/08/13 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
Javascript生成器（Generator）的介绍与使用
2021/01/31 Javascript
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
对比Python中__getattr__和 __getattribute__获取属性的用法
2016/06/21 Python
python实现log日志的示例代码
2018/04/28 Python
python-opencv颜色提取分割方法
2018/12/08 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
照片礼物和装饰：MyPhoto
2019/11/02 全球购物
上班迟到检讨书
2014/01/10 职场文书
财产保全担保书
2015/01/20 职场文书
导游词之临安白水涧
2019/11/05 职场文书
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
CSS实现隐藏搜索框功能(动画正反向序列)
2021/07/21 HTML / CSS
Python数据结构之队列详解
2022/03/21 Python
docker-compose部署Yapi的方法
2022/04/08 Servers