[转]让图片DIV竖向滑动的JavaScrip…

最新推荐文章于 2023-12-12 16:02:08 发布
最新推荐文章于 2023-12-12 16:02:08 发布
阅读量454 收藏
点赞数
分类专栏： javascript手记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pandarawen/article/details/8149890
版权
    让图片DIV竖向滑动的JavaScript特效代码，虽然现在里面没有图片，但加上图片就行了，研究了好大一会才研究出来这种效果，鼠标放上后图片层上下滑动，整体效果非常不错，做图片特效的前端开发者或许能用得上哦。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片滑动展示效果</title>
<script type="text/javascript">
var $$ = function (id) {
    return "string" == typeof id ? document.getElementByIdx_x(id) : id;
};
function Event(e){
var oEvent = document.all ? window.event : e;
if (document.all) {
if(oEvent.type == "mouseout") {
oEvent.relatedTarget = oEvent.toElement;
}else if(oEvent.type == "mouseover") {
oEvent.relatedTarget = oEvent.fromElement;
}
}
return oEvent;
}
function addEventHandler(oTarget, sEventType, fnHandler) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventType, fnHandler, false);
} else if (oTarget.attachEvent) {
oTarget.attachEvent("on" + sEventType, fnHandler);
} else {
oTarget["on" + sEventType] = fnHandler;
}
};
var Class = {
  create: function() {
    return function() {
      this.initialize.apply(this, arguments);
    }
  }
}
Object.extend = function(destination, source) {
    for (var property in source) {
        destination[property] = source[property];
    }
    return destination;
}

var GlideView = Class.create();
GlideView.prototype = {
  //容器对象 容器宽度 展示标签 展示宽度
  initialize: function(obj, iHeight, sTag, iMaxHeight, options) {
    var oContainer = $$(obj), oThis=this, len = 0;
this.SetOptions(options);
    this.Step = Math.abs(this.options.Step);
    this.Time = Math.abs(this.options.Time);
this._list = oContainer.getElementsByTagName_r(sTag);
len = this._list.length;
this._count = len;
this._height = parseInt(iHeight / len);
this._height_max = parseInt(iMaxHeight);
this._height_min = parseInt((iHeight - this._height_max) / (len - 1));
this._timer = null;
this.Each(function(oList, oText, i){
oList._target = this._height * i;//自定义一个属性放目标left
oList.style.top = oList._target + "px";
oList.style.position = "absolute";
addEventHandler(oList, "mouseover", function(){ oThis.Set.call(oThis, i); });
})
//容器样式设置
oContainer.style.height = iHeight + "px";
oContainer.style.overflow = "hidden";
oContainer.style.position = "relative";
//移出容器时返回默认状态
addEventHandler(oContainer, "mouseout", function(e){
//变通防止执行oList的mouseout
var o = Event(e).relatedTarget;
if (oContainer.contains ? !oContainer.contains(o) : oContainer != o && !(oContainer.compareDocumentPosition(o) & 16)) oThis.Set.call(oThis, -1);
})
  },
  //设置默认属性
  SetOptions: function(options) {
    this.options = {//默认值
Step:20,//滑动变化率
Time:3,//滑动延时
TextTag:"",//说明容器tag
TextHeight: 0//说明容器高度
    };
    Object.extend(this.options, options || {});
  },
  //相关设置
  Set: function(index) {
if (index < 0) {
//鼠标移出容器返回默认状态
this.Each(function(oList, oText, i){ oList._target = this._height * i; if(oText){ oText._target = this._height_text; } })
} else {
//鼠标移到某个滑动对象上
this.Each(function(oList, oText, i){
oList._target = (i <= index) ? this._height_min * i : this._height_min * (i - 1) + this._height_max;
if(oText){ oText._target = (i == index) ? 0 : this._height_text; }
})
}
this.Move();
  },
  //移动
  Move: function() {
clearTimeout(this._timer);
var bFinish = true;//是否全部到达目标地址
this.Each(function(oList, oText, i){
var iNow = parseInt(oList.style.top), iStep = this.GetStep(oList._target, iNow);
if (iStep != 0) { bFinish = false; oList.style.top = (iNow + iStep) + "px"; }
})
//未到达目标继续移动
if (!bFinish) { var oThis = this; this._timer = setTimeout(function(){ oThis.Move(); }, this.Time); }
  },
  //获取步长
  GetStep: function(iTarget, iNow) {
var iStep = (iTarget - iNow) / this.Step;
if (iStep == 0) return 0;
if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
return iStep;
  },
  Each:function(fun) {
for (var i = 0; i < this._count; i++)
fun.call(this, this._list[i], (this.Showtext ? this._text[i] : null), i);
  }
};
</script>
<style type="text/css">
#idGlideView {
height:314px;
width:325px;
margin:0 auto;
}
#idGlideView div {
width:325px;
height:314px;
}
</style>
</head>
<body>
<div id="idGlideView">
<div style="background-color:#006699;"> </div>
<div style="background-color:#FF9933;"> </div>
</div>
<SCRIPT>
var gv = new GlideView("idGlideView", 314, "div", 280,"");
</SCRIPT>
</body>
</html>
PandaraWen
关注
专栏目录
vue 拖拽进度条滑动组件 横向竖向滑动插件
愿你走过半生，归来任是少年。
07-14 6044
vue 拖拽进度条滑动组件 横向竖向滑动插件
JavaScript实现图片DIV竖向滑动的方法
10-24
JavaScript实现图片DIV竖向滑动的方法是网页动态效果中常见的一种技术，主要用于创建吸引人的、交互式的用户体验。在这个实例中，我们将讨论如何使用JavaScript来控制图片或者包含图片的DIV元素进行垂直方向上的平滑...
实现一个div容器带横向/竖向滚动效果
热门推荐
sinJack的博客
06-22 3万+
主要代码如下： <!-- 只使用overflow属性，实现竖向滚动效果。同时使用overflow属性和white-space属性实现横向滚动效果 --> <div id="imgs" style="border: 1px solid black;width: 345px;height: 120px;overflow:scroll;white-space: nowrap;"> </div> 需要掌握overflow属性和white-space属性。 1、overflo
竖屏图片滚动html5,JavaScript实现图片DIV竖向滑动的方法
weixin_42360993的博客
06-04 673
/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">图片滑动展示效果var $$ = function (id) {return "string" == typeof id ? document.getElementById(id) : id;};function Event(e){var oEvent = docu...
学习基于html和JavaScript的滑动图片拼图验证源码
gc_2299的博客
11-25 1840
学习基于html和JavaScript的滑动图片拼图验证源码
使用JavaScript让滚动条自动向下滑动
m0_61143764的博客
03-05 3784
用js自动向下滑动
vue3实现div左右滑动
lth002的博客
12-12 1252
这里有一个小瑕疵，就是刷新页面后，直接点击子元素，会执行一次mousemove，导致选不中子元素，但是先点击一次空白地方，就不会执行mousemove了，可能是浏览器的安全策略，但是我没听过。整体思路：一共有三层，第一层是最外层盒子，固定宽度，超出隐藏，第二层盒子宽高由子盒子决定，然后移动盒子来实现滑动，第三层就是子盒子咯。首先第二层盒子上面绑定。，通过这两个位置来获取鼠标移动的距离，然后上一次的移动距离。，来移动第二层盒子，再加上一些判断就ok了。时，记录当前鼠标点击的位置。的时候获取鼠标的位置。
vue实现横向或竖向滑动轮播
XinYe666666的博客
06-09 3656
<template> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" :class="{animation:animate}" :style="{transition: `${animate?'all '+(duration/2000)+'s':'none'}`}" .
vue 拖拽进度条滑动组件(一) 竖向滑动插件
Jana Jing的分享
12-20 1936
progress.js //是否有指定class存在 export function hasClass(el, className) { let reg = new RegExp('(^|\\s)' + className + '(\\s|$)') return reg.test(el.className) } //如果存在什么都不做，否则就设置添加 export function addClass(el, className) { if (hasClass...
javascript图片滑动效果实现
10-23
当鼠标悬停在图片上时，会触发onmouseover事件，事件处理函数先将所有图片的位置重置到初始位置，然后将当前及之前的所有图片向左滑动一定距离（translate值），从而实现图片的显示效果。当鼠标移开图片时，触发...
基于JavaScript实现鼠标向下滑动加载div的代码
10-21
标题“基于JavaScript实现鼠标向下滑动加载div的代码”所指的是一个前端编程技术，它涉及到使用JavaScript（一种脚本语言，常用于网页中的动态交互）来实现当用户在网页上向下滚动鼠标时，动态加载（或者说显示）...
基于javascript实现图片滑动效果
10-22
在本文中，我们将深入探讨如何使用JavaScript来实现一个图片滑动效果。这种效果通常用于创建动态且吸引人的图像展示，例如在网站的幻灯片或轮播图组件中。以下是一些关键知识点： 1. **HTML结构**： HTML部分包含...
JavaScript，如何让一个div盒子随着鼠标移动
weixin_43228946的博客
08-20 2692
在这里，这段代码主要实现的功能是将里面的那个黄色的div随着鼠标的移动而移动。刚开始黄色的div是在左上角的地方，但是随着鼠标的移动到中间的位置。现在我们主要看一下JS代码。 首先获取一个div的对象，var box1 = document.getElementById("box1");，之后我们就要给div添加点鼠标滑动的事件document.onmousemove = function (event)。 我们接着获取鼠标的坐标，通过event。(event = even
rhino grasshoper 框内物体排列（附视频）.gh
最新发布
10-18
【闭合线内物体按方向移动/排列】https://www.bilibili.com/video/BV1z1WfeSEWu?vd_source=b420114c993138474d2e93d83ead77a5
kwant-1.4.3-cp38-cp38-win_amd64.whl
10-18
kwant-1.4.3-cp38-cp38-win_amd64.whl
rhino grasshoper 景观椅（附视频）.gh
10-18
【rhino@grasshoper 曲线金属座椅景观案例（文件获取/见简介）】https://www.bilibili.com/video/BV1Dx4y147Lr?vd_source=b420114c993138474d2e93d83ead77a5
PCIe通义万问系列文档的第一部已整理完毕，含999个PCIe相关问答
10-18
《PCIe通义万问》系列文档旨在记录PCIe相关行业工程师们在PCIe协议学习、IP设计验证、产品测试及使用过程中遇到的问题、迸发的思考、进行的探讨及可能的解决方案，以期给遇到相同相似问题的同行们些许启发。文档涉及的技术方向主要为PCIe，也包含PCIe相关的CXL、UCIe及计算机体系结构相关内容。 本文档是《PCIe通义万问》系列文档之（一），含999个问题。问题内容有以下三个来源：MangoPapa（下称博主）的“PCIe每日一问一答”系列专栏；博主的博文留言及私信讨论；博主作为群主的“PCIe技术交流群”群聊内容。MangoPapa小助理、折叠、先杰、CR小队长、kangling共同完成了问答内容提取与归纳整理，噫嘘唏及慕荷负责文辞优化及编辑排版，上述人员及MangoPapa、JasonW、皮塞阿姨、席可儿参与了文档内容的审校。感谢以上人员的无私奉献。 本文档仅对讨论内容进行总结记录，不保证问题答案的正确性，部分问题只提供解决思路或讨论过程。术业有专攻，文内定有偏颇。如您发现谬误，一敬希原宥，二望乞点拨；如您持异见，欢迎来信讨论。如有需要，欢迎联系MangoPapa加入相关
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值