原生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 相关文章推荐
IE中jscript/javascript的条件编译
Sep 07 Javascript
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
Dec 29 Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
简单讲解jQuery中的子元素过滤选择器
Apr 18 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
在vue中使用jsonp进行跨域请求接口操作
Oct 29 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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
php下连接mssql2005的代码
2011/01/17 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
js substr、substring和slice使用说明小记
2011/09/15 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
js对象基础实例分析
2015/01/13 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
Python学习小技巧总结
2018/06/10 Python
详解python数据结构和算法
2019/04/18 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
解决python运行启动报错问题
2020/06/01 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
python能自学吗
2020/06/18 Python
Python下载的11种姿势(小结)
2020/11/18 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
德尔福集团DELPHI的笔试题
2012/02/22 面试题
体育教育专业毕业生自荐信
2013/11/15 职场文书
外国人聘用意向书
2014/04/01 职场文书
继承权公证书范本
2015/01/23 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
Go timer如何调度
2021/06/09 Golang
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL