JavaScript four-direction gapless scrolling collection (multi-browser IE, firefox compatible)_Typical special effects-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

JavaScript four-direction gapless scrolling collection (multi-browser IE, firefox compatible)_Typical special effects

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:04 PM

compatiblescroll

Learning... This section of JS production reference MSClass.js

Copy code The code is as follows:

boxmove(d1,d2,d3,e,obj) 
d1 = Peripheral container 
d2 = Content 
d3 = Copy the content of d2 to replace the circular scrolling 
e = Direction and method 
 1 ,2,3,4 = Automatic scrolling, corresponding to: top, right, bottom, left respectively 
 "top", "right", "bottom", "left" = Manual scrolling, corresponding to: top, right, bottom ,Left 
 obj = Set to this when manual scrolling is selected, used for event binding operations. No settings are required for automatic scrolling. 

<h1>
</h1>Scrolling Collection<hr>
<h2>

</h2>Up<div id="a" style="overflow:hidden;height:100px;width:90px;">
<div id="a1">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
</div>
<div id="a2">
</div>
</div>
<h2>
</h2>

<div id="b" style="overflow:hidden;height:100px;width:90px;">Right<div id="b1">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
</div>
<div id="b2">
</div>
</div>
<h2>
</h2>
<div id="c" style="overflow:hidden;height:100px;width:90px;">

</h2>Manual scrolling - <div id="aa" style="overflow:hidden;height:100px;width:90px;">Up<div id="aa1"> <img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">Down<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt=""><img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
</div>
<div id="aa2">
</div>
</div>
<script type="text/javascript"> 
// 自动滚动 
function boxmove(d1,d2,d3,e,obj){ 
    var speed=30; 
    var demo=document.getElementById(d1);  
    var demo1=document.getElementById(d2);  
    var demo2=document.getElementById(d3); 
    demo2.innerHTML=demo1.innerHTML; 
    function boxTop(){ 
            if(demo2.offsetTop-demo.scrollTop<=0){demo.scrollTop-=demo1.offsetHeight} 
            else{demo.scrollTop++} 
        } 
    function boxRight(){ 
            if(demo.scrollLeft<=0){demo.scrollLeft+=demo2.offsetWidth} 
            else{demo.scrollLeft--} 
        } 
    function boxBottom(){  
            if(demo1.offsetTop-demo.scrollTop>=0){demo.scrollTop+=demo2.offsetHeight} 
            else{demo.scrollTop--} 
        } 
    function boxLeft(){ 
            if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth} 
            else{demo.scrollLeft++} 
        } 
    if(e==1){ 
            var MoveTop=setInterval(boxTop,speed); 
            demo.onmouseover=function(){clearInterval(MoveTop);} 
            demo.onmouseout=function(){MoveTop=setInterval(boxTop,speed)} 
        } 
    if(e==2){ 
            var MoveRight=setInterval(boxRight,speed); 
            demo.onmouseover=function(){clearInterval(MoveRight)} 
            demo.onmouseout=function(){MoveRight=setInterval(boxRight,speed)} 
        } 
    if(e==3){ 
            var MoveBottom=setInterval(boxBottom,speed); 
            demo.onmouseover=function(){clearInterval(MoveBottom);} 
            demo.onmouseout=function(){MoveBottom=setInterval(boxBottom,speed)} 
        } 
    if(e==4){ 
            var MoveLeft=setInterval(boxLeft,speed) 
            demo.onmouseover=function(){clearInterval(MoveLeft)} 
            demo.onmouseout=function(){MoveLeft=setInterval(boxLeft,speed)} 
        } 
    if(e=="top"){ 
            MoveTop=setInterval(boxTop,speed) 
            obj.onmouseout=function(){clearInterval(MoveTop);} 
        } 
    if(e=="right"){ 
            MoveRight=setInterval(boxRight,speed) 
            obj.onmouseout=function(){clearInterval(MoveRight);} 
        } 
    if(e=="bottom"){ 
            MoveBottom=setInterval(boxBottom,speed) 
            obj.onmouseout=function(){clearInterval(MoveBottom);} 
        } 
    if(e=="left"){ 
            MoveLeft=setInterval(boxLeft,speed) 
            obj.onmouseout=function(){clearInterval(MoveLeft);} 
        } 
    }     
</script>
<script type="text/javascript"> 
boxmove("a","a1","a2",1); 
</script>
<script type="text/javascript"> 
boxmove("b","b1","b2",2); 
</script><script type="text/javascript"> 
boxmove("c","c1","c2",3); 
</script>
<script type="text/javascript"> 
boxmove("d","d1","d2",4); 
</script><h2>수동 스크롤 - <strong onmouseover="boxmove('bb','bb1','bb2','left',this);">왼쪽</strong> <strong onmouseover="boxmove('bb','bb1','bb2','right',this);">오른쪽</strong>
</h2>
<div id="bb" style="overflow:hidden;height:100px;width:90px;">
<div id="bb1">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/images/logo.gif?x-oss-process=image/resize,p_40" class="lazy" alt="">
</div>
<div id="bb2"></div>
</div>

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

JavaScript 如何实现滚动到指定元素位置的功能？Oct 22, 2023 am 08:12 AM

JavaScript如何实现滚动到指定元素位置的功能？在网页中，当我们需要将用户的视线聚焦到某个特定的元素位置时，我们可以使用JavaScript来实现滚动到指定元素位置的功能。本文将介绍如何通过JavaScript实现这一功能，并提供相应的代码示例。首先，我们需要获取目标元素的位置信息。可以使用Element.getBoundingClient

Win10的最稳定版本Dec 25, 2023 pm 07:58 PM

很多用户都会遇到在操作电脑的时候卡顿或者是蓝屏，这个时候我们就需要找一个最为稳定的win10版本来进行操作，整体都是非常的好用的，可以让你日常使用更为流畅。史上最稳定的win10版本1、win10正版原装系统在这里用户可以使用简单的操作，系统经过优化，具有很强的稳定性、安全性、兼容性，用户可以按照步骤实现完美机器2、俄罗斯大神精简版win10经过严格的精简操作，删除了很多不必要的功能和服务。精简后，系统的CPU和内存占用率更低，运行速度更快。3、win10精简版1909安装多台不同硬件型号的电脑

监测iframe的滚动行为Feb 18, 2024 pm 08:40 PM

如何监听一个iframe的滚动，需要具体代码示例当我们在网页中使用iframe标签嵌入其他网页时，有时候需要对iframe中的内容进行一些特定的操作。其中一个常见的需求是监听iframe的滚动事件，以便在滚动发生时执行相应的代码。以下将介绍如何使用JavaScript来监听一个iframe的滚动，并提供具体的代码示例供参考。获取iframe元素首先，我们需要

HTML、CSS和jQuery：制作一个自动滚动的公告栏Oct 27, 2023 pm 06:31 PM

HTML、CSS和jQuery：制作一个自动滚动的公告栏在现代网页设计中，公告栏常常被用来重要的信息传达和引起用户注意。一个自动滚动的公告栏在网页上受到了广泛的应用，它能够让公告内容以动画形式在页面中滚动显示，提高信息的展示效果和用户体验。本文将介绍如何使用HTML、CSS和jQuery来制作一个自动滚动的公告栏，并提供具体的代码示例。首先，我们需要一个HT

Switch2能兼容Switch卡带吗？Jan 28, 2024 am 09:06 AM

Switch2是任天堂在2023年科隆游戏展公布的新机型，一些玩家担心新出来的机型与之前版本的机型卡带会不会存在兼容性问题，下面我们一起来看看吧。switch2兼容switch卡带吗答：switch2不兼容switch卡带。Switch2卡带的介绍根据任天堂的生产链公司的消息称，Switch2可能会使用64GB的卡带。它由于性能更好，支撑更多的3A游戏大作的原因，需要更大卡带容量。因为很多的游戏作品需要阉割和压缩，才能塞进一张游戏卡带里面。而且Switch的卡带容易被复制游戏内容，所以更换新卡带

Win11是否支持动态壁纸Jan 01, 2024 pm 06:41 PM

众所周知，win11一大特色就是自带安卓子系统，让我们不需要用模拟器就可以安装安卓软件，但也存在win11安卓应用卡顿的问题，这应该怎么解决呢。win11不兼容动态壁纸么：答：win11能兼容动态壁纸，如果用不了可能是软件或系统版本落后。如果是刚更新，可能是被系统壁纸覆盖了。1、如果是系统或软件版本落后，那么更新一下系统和动态壁纸软件即可。2、如果是被系统壁纸覆盖了，可以尝试打开“设置”3、接着进入“个性化”下的“背景”设置。4、然后将个性化设置背景改为“图片”5、修改完成后就能正常设置动态壁纸

如何在Vue中实现全屏滚动效果Nov 08, 2023 am 08:42 AM

如何在Vue中实现全屏滚动效果在网页设计中，全屏滚动效果可以给用户带来非常独特和流畅的浏览体验。本文将介绍如何在Vue.js中实现全屏滚动效果，以及具体的代码示例。为了实现全屏滚动效果，我们首先需要使用Vue.js框架搭建项目。在Vue.js中，我们可以使用vue-cli来快速搭建一个项目骨架。接着我们需要引入一些第三方库来实现滚动效果，比如fullpage

JavaScript 如何实现滚动到页面底部自动加载的无限滚动效果？Oct 27, 2023 pm 06:30 PM

JavaScript如何实现滚动到页面底部自动加载的无限滚动效果？无限滚动效果是现代网页开发中常见的功能之一，它可以在滚动到页面底部时自动加载更多内容，使得用户可以无需手动点击按钮或链接就能够获取更多的数据或资源。在本文中，我们将探讨如何使用JavaScript来实现这一功能，并提供具体的代码示例。实现滚动到页面底部自动加载的无限滚动效果，主要分为以下

See all articles