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

compatible scroll

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/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" 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/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" 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/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">Down<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt=""><img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" 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/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
<img src="/static/imghw/default1.png" data-src="http://www.jb51.net/images/logo.gif" class="lazy" alt="">
</div>
<div id="bb2"></div>
</div>

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

Statement of this Website

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7478

CakePHP Tutorial

1377

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

How to implement scrolling to a specified element position in JavaScript? Oct 22, 2023 am 08:12 AM

How to implement the function of scrolling to a specified element position in JavaScript? In a web page, when we need to focus the user's line of sight to a specific element position, we can use JavaScript to implement the function of scrolling to the specified element position. This article will introduce how to implement this function through JavaScript and provide corresponding code examples. First, we need to obtain the position information of the target element. You can use Element.getBoundingClient

The most stable version of Win10 Dec 25, 2023 pm 07:58 PM

Many users will encounter freezes or blue screens when operating the computer. At this time, we need to find the most stable win10 version to operate. Overall, it is very easy to use and can make your daily use smoother. The most stable win10 version in history 1. Win10 genuine original system. Here users can use simple operations. The system has been optimized and has strong stability, security and compatibility. Users can follow the steps to achieve the perfect machine. 2. Russian master streamlined The version of win10 has been strictly streamlined and many unnecessary functions and services have been deleted. After streamlining, the system has lower CPU and memory usage and runs faster. 3. Win10 Lite Edition 1909 is installed on multiple computers with different hardware models.

HTML, CSS, and jQuery: Make an auto-scrolling bulletin board Oct 27, 2023 pm 06:31 PM

HTML, CSS and jQuery: Make an automatically scrolling bulletin board In modern web design, bulletin boards are often used to convey important information and attract user attention. An auto-scrolling bulletin board is widely used on web pages. It allows the bulletin content to scroll and display on the page in the form of animation, improving the information display effect and user experience. This article will introduce how to use HTML, CSS and jQuery to make an automatic scrolling bulletin board, and provide specific code examples. First, we need a HT

Monitor iframe scrolling behavior Feb 18, 2024 pm 08:40 PM

How to monitor the scrolling of an iframe requires specific code examples. When we use the iframe tag to embed other web pages in a web page, sometimes we need to perform some specific operations on the content in the iframe. One of the common needs is to listen for the scroll event of the iframe so that the corresponding code can be executed when the scroll occurs. The following will introduce how to use JavaScript to monitor the scrolling of an iframe, and provide specific code examples for reference. Get the iframe element First, we need

Is Switch2 compatible with Switch cartridges? Jan 28, 2024 am 09:06 AM

Switch2 is a new model announced by Nintendo at Gamescom 2023. Some players are worried about whether there will be compatibility issues between the new model and the cartridges of previous versions. Let’s take a look. Is switch2 compatible with switch cassette? Answer: switch2 is not compatible with switch cassette. Introduction of Switch 2 cartridges According to information from Nintendo’s production chain company, Switch 2 may use 64GB cartridges. Because it has better performance and supports more 3A game masterpieces, it requires a larger cartridge capacity. Because many game works need to be castrated and compressed before they can be stuffed into a game cartridge. Moreover, Switch cartridges are prone to copying game content, so replace them with new cartridges.

Does Win11 support dynamic wallpapers? Jan 01, 2024 pm 06:41 PM

As we all know, a major feature of win11 is its own Android subsystem, which allows us to install Android software without using an emulator. However, there is also the problem of win11 Android application lag. How should this be solved? Is win11 not compatible with dynamic wallpapers? Answer: Win11 is compatible with dynamic wallpapers. If it cannot be used, it may be because the software or system version is lagging behind. If it was just updated, it may be covered by the system wallpaper. 1. If the system or software version is lagging behind, just update the system and dynamic wallpaper software. 2. If it is covered by the system wallpaper, you can try to open "Settings" 3. Then enter the "Background" settings under "Personalization". 4. Then change the personalized background to "Picture" 5. After the modification is completed, you can set the dynamic wallpaper normally

How to implement full screen scrolling effect in Vue Nov 08, 2023 am 08:42 AM

How to achieve full-screen scrolling effect in Vue In web design, full-screen scrolling effect can bring users a very unique and smooth browsing experience. This article will introduce how to achieve the full-screen scrolling effect in Vue.js, as well as specific code examples. In order to achieve the full-screen scrolling effect, we first need to use the Vue.js framework to build the project. In Vue.js, we can use vue-cli to quickly build a project skeleton. Then we need to introduce some third-party libraries to achieve the scrolling effect, such as fullpage

How to use JavaScript to achieve the infinite scroll effect of automatically loading when scrolling to the bottom of the page? Oct 27, 2023 pm 06:30 PM

How does JavaScript achieve the infinite scroll effect of automatically loading when scrolling to the bottom of the page? The infinite scroll effect is one of the common features in modern web development. It can automatically load more content when scrolling to the bottom of the page, allowing users to obtain more data or resources without manually clicking buttons or links. In this article, we'll explore how to use JavaScript to achieve this functionality and provide specific code examples. To achieve the infinite scrolling effect of automatically loading when scrolling to the bottom of the page, it is mainly divided into the following

See all articles