原生JavaScript实现幻灯片效果


Posted in Javascript onFebruary 19, 2021

当我们制作一个页面时,尤其是制作一个首页时,通常会设计一个可以链接到整个网站的其他主体页面的导航栏,或者一段网站的介绍文字中会包含这页面的跳转,通常情况会使用title属性为这些跳转链接添加一些解释性的文字,但是我们可以通过制作一个幻灯片的demo,加强用户的体验性。当用户的鼠标移动到某一链接时,下方会出现对应的图片预览,这样即美化页面,又大大增加了整个网站的交互性,下面就让我们一起制作一个漂亮的幻灯片脚本吧。

准备:在制作脚本之前,需要制作一张图片,这张图片应该展示了所有预览效果,如下图:

原生JavaScript实现幻灯片效果

index.html

制作有序列表,添加一些页面链接

<body>
 <h1>简单动画制作</h1>
 <p>连接跳转目标展示</p>
 <ol id="list">
 <li>
 <a href="list1.html" >First</a>
 </li>
 <li>
 <a href="list2.html" >Second</a>
 </li>
 <li>
 <a href="list3.html" >Third</a>
 </li>
 </ol>
 <!--动态添加的图片展示区域>-->
<script src="script.js"></script>
</body>

style.css

为这个导航栏添加一些样式

ol{
 padding-left: 20px;
}
ol li{
 display: inline;
 margin-right: 10px;
}
#view{
 width: 600px;
 height: 200px;
 position: absolute;
}
#slideShow{
 width: 200px;
 height: 200px;
 overflow: hidden;
 position: relative;
}

script.js

实现思路:

在建立脚本之前,我们先整理一下思路,确定我们要做什么?
1. 新建一些节点用来展示预览图片
2. 为a标签添加onmouseover事件
3. 通过setTimeout()函数,和对图片元素left、top偏移量(获取设置的left top属性时 要转换称整型)的移动完成动画效果

/*共享load*/
function addLoadEvent(fun){
 var oldLoad = window.onload;
 if(typeof oldLoad != "function"){
  window.onload = fun;
 }else{
  window.onload = function(){
   oldLoad();
   fun();
  }
 }
}

/*insertAfter*/
function insertAfter(newNode,oldNode){
 var parent = oldNode.parentNode;
 if(parent.lastChild == oldNode){
  parent.appendChild(newNode);
 }else{
  parent.insertBefore(newNode,oldNode.nextSibling);
 }
}

function show(){
 /*向后兼容*/
 if(!document.getElementById) return false;
 if(!document.getElementsByTagName) return false;
 if(!document.createElement) return false;

 /*获取列表清单*/
 var list = document.getElementById("list");

 /*创建图片展示区域*/
 /*外层div*/
 var div = document.createElement("div");
 div.setAttribute("id","slideShow");
 /*img*/
 var img = document.createElement("img");
 img.setAttribute("id","view");
 img.setAttribute("src","image.jpg");
 img.setAttribute("alt","图片预览");
 /*添加 使用insertAfter()函数 保证div紧跟在list列表之后*/
 insertAfter(div,list);
 div.appendChild(img);

 /*绑定事件*/
 var a = list.getElementsByTagName("a");
 a[0].onmouseover =function(){
  moveElement("view",0,0,10);
 };
 a[1].onmouseover = function(){
  moveElement("view",-200,0,10);
 };
 a[2].onmouseover = function(){
  moveElement("view",-400,0,10);
 };
}


/*移动
*参数的含义:图片所在元素的id;图片应该向左移动的偏移量;上偏移量;时间
*/
function moveElement(elementID,left,top,interval){
 /*向后兼容*/
 if(!document.getElementById) return false;
 if(!document.getElementById(elementID)) return false;

 /*获取图片*/
 var img = document.getElementById(elementID);

 /*判断当前元素是否已经处在一个动画函数中
 *防止动画堆积
 */
 if(img.moveNow){
  /*清楚堆栈中的动画*/
  clearTimeout(img.moveNow);
 }

 /*判断元素是否设置了left和top*/
 if(!img.style.left){
  img.style.left = "0px";
 }
 if(!img.style.top){
  img.style.top = "0px";
 }


 /*获取图片当前位置
 *此时获取的值是字符串格式,使用parseInt()强制转化为字符串*/
 var oldLeft = parseInt(img.style.left);
 var oldTop = parseInt(img.style.top);

 /*将当前位置与目标位置做比较*/
 if(oldLeft == left && oldTop == top){
  return true;
 }

 /*为了保证用户体验,当移动的距离较大时应该移动的快一些
 *当移动的距离比较小时,可以适当慢一些
 *根据相差的距离判断移动的距离,每次移动相差距离的1/10
 */
 /*dist变量用于存储当前偏移量与目标偏移量的距离*/
 var dist = 0;
 if(oldLeft < left){
  /*ceil()向上取整 防止小数 以及小于1的情况*/
  dist = Math.ceil((left-oldLeft)/10);
  oldLeft = oldLeft+dist;
 }
 if(oldLeft > left){
  dist = Math.ceil((oldLeft-left)/10);
  oldLeft = oldLeft - dist;
 }
 if(oldTop < top){
  dist = Math.ceil((top-oldTop)/10);
  oldTop = oldTop+dist;
 }
 if(oldTop > top){
  dist = Math.ceil((oldTop-top)/10);
  oldTop = oldTop - dist;
 }

 /*移动*/
 img.style.left = oldLeft+"px";
 img.style.top = oldTop+"px";

 /*调用函数*/
 var result = "moveElement('"+elementID+"',"+left+","+top+","+interval+")";
 /*将执行动画的函数,设置成这个元素的一个属性*/
 img.moveNow = setTimeout(result,interval);
}

addLoadEvent(show);

最后执行效果

原生JavaScript实现幻灯片效果

此时,当我们将鼠标移动到不同列表项时,列表下的图片就会移动到对应的预览图位置。

到此,一个简单的幻灯片demo就制作完成了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery插件之easing 动态菜单
Aug 21 Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
Jul 10 Javascript
onmouseover和onmouseout的一些问题思考
Aug 14 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
JavaScript 实现继承的几种方式
Feb 19 #Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 #Javascript
JavaScript实现打字游戏
Feb 19 #Javascript
JS+CSS实现动态时钟
Feb 19 #Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 #Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 #Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 #Vue.js
You might like
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
IE的fireEvent方法概述及应用
2013/02/22 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
微信小程序 简单教程实例详解
2017/01/13 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
python自动发送邮件脚本
2018/06/20 Python
python实现机器学习之多元线性回归
2018/09/06 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
python ChainMap的使用和说明详解
2019/06/11 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
python要安装在哪个盘
2020/06/15 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
Python如何执行系统命令
2020/09/23 Python
用HTML5实现网站在windows8中贴靠的方法
2013/04/21 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
2020/04/14 HTML / CSS
Java中的基本数据类型所占存储空间大小固定的吗
2012/02/15 面试题
20年同学聚会邀请函
2014/02/04 职场文书
法学求职信
2014/06/22 职场文书
党员干部批评与自我批评反四风思想汇报
2014/09/21 职场文书
舞出我人生观后感
2015/06/16 职场文书
三十年再续同学情倡议书
2019/11/27 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
用Python提取PDF表格的方法
2021/04/11 Python