Home Web Front-end HTML Tutorial The marquee element implements scrolling fonts, picture sliding and other effects_HTML/Xhtml_Web page production

The marquee element implements scrolling fonts, picture sliding and other effects_HTML/Xhtml_Web page production

May 16, 2016 pm 04:38 PM
marquee slide

marquee元素可以实现简单的字体(图片等)的滑动等效果:

复制代码
代码如下:



www.baidu.com111
www.baidu.com222
www.baidu333.com
www.baidu444.com



www.baidu.com555






direction 表示滚动的方向,值可以是left,right,up,down,默认为left
behavior 表示滚动的方式,值可以是scroll(连续滚动)slide(滑动一次)alternate(来回滚动)
loop 表示循环的次数,值是正整数,默认为无限循环
scrollamount 表示运动速度,值是正整数,默认为6
scrolldelay 表示停顿时间,值是正整数,默认为0,单位似乎是毫秒
align 表示元素的垂直对齐方式,值可以是top,middle,bottom,默认为middle
bgcolor 表示运动区域的背景色,值是16进制的RGB颜色,默认为白色
height、width 表示运动区域的高度和宽度,值是正整数(单位是像素)或百分数,默认width=100% height为标签内元素的高度
hspace、vspace 表示元素到区域边界的水平距离和垂直距离,值是正整数,单位是像素。
onmouseover=this.stop() onmouseout=this.start() 表示当鼠标以上区域的时候滚动停止,当鼠标移开的时候又继续滚动。

以下是设置点击按钮时m3、m4的滚动或停止:

复制代码
代码如下:





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

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What should I do if my mobile phone screen is hard to slide and dry? What should I do if my mobile phone screen is hard to slide and dry? Dec 04, 2023 pm 03:51 PM

Solutions for mobile phone screens that are difficult to slide and dry: 1. Humidify the screen; 2. Clean the screen regularly; 3. Increase the sliding strength of your fingers; 4. Use mobile phone screen protectors; 5. Replace protective covers; 6. Keep hands moist; 7. , handle it cleanly when applying the film; 8. Use lubricant; 9. Use gloves; 10. Adjust the screen brightness; 11. Replace the mobile phone. Detailed introduction: 1. Humidify the screen, place a humidifier next to the screen or spray some water to increase the humidity in the air, thereby reducing the dryness of the screen; 2. Clean the screen regularly, use professional screen cleaner, etc.

How to use JavaScript to achieve the up and down sliding switching effect of images and add fade-in and fade-out animations? How to use JavaScript to achieve the up and down sliding switching effect of images and add fade-in and fade-out animations? Oct 20, 2023 am 11:19 AM

How can JavaScript achieve the up and down sliding switching effect of images and add fade-in and fade-out animations? In web development, it is often necessary to achieve image switching effects. You can use JavaScript to achieve up and down sliding switching, and add fade-in and fade-out animation effects. Let’s take a closer look. First, we need a container that contains multiple images. We can use div tags in HTML to host images. For example, we create a div with the id "image-container" to

HTML, CSS, and jQuery: A technical guide to implementing a sliding panel effect HTML, CSS, and jQuery: A technical guide to implementing a sliding panel effect Oct 27, 2023 pm 04:39 PM

HTML, CSS, and jQuery: Technical Guidelines for Implementing Sliding Panel Effects With the popularity of mobile devices and the development of web applications, sliding panels, as a popular interaction method, are becoming more and more common in web design. By implementing the sliding panel effect, we can display more content in a limited space and improve the user experience. This article will introduce in detail how to use HTML, CSS and jQuery to achieve the sliding panel effect, and provide specific code examples. HTML Structure First, we need to create a basic

Interpretation of jQuery sliding events: implementation principles and precautions Interpretation of jQuery sliding events: implementation principles and precautions Feb 27, 2024 am 10:57 AM

Interpretation of jQuery sliding events: Implementation principles and precautions In front-end development, sliding events are one of the common and commonly used interactive operations. Through sliding events, we can implement functions such as switching carousels and scrolling loading of pages. As a popular JavaScript library, jQuery provides a wealth of sliding event processing methods to facilitate us to achieve various interactive effects. This article will delve into the implementation principles and precautions of sliding events in jQuery, and provide specific code examples. 1. Implementation principle

What are the marquee parameters? What are the marquee parameters? Oct 18, 2023 am 10:10 AM

marquee参数有direction、behavior、speed、scrolldelay、width、height、bgcolor、cursor、id、align、noresize、nohover、loopcount、bgcolorcolor、scrollamount和vspa。

How to implement sliding in react How to implement sliding in react Dec 30, 2022 am 11:09 AM

The method to implement sliding in react: 1. Find the touches in the onTouchStart event and record the new touch occurrence according to the identifier; 2. Record the coordinates of each point passed by the touch according to the identifier in the onTouchMove event; 3. In the onTouchEnd event, find The finished touch event, and then calculate the gesture to be performed based on the point crossed by the finished touch event.

watchOS 10.2: How to change your watch face with a swipe watchOS 10.2: How to change your watch face with a swipe Dec 15, 2023 pm 11:15 PM

In watchOS 10.2, you can enable swipe gestures to switch between Apple Watch watch faces more easily, just like you did before in watchOS 9. Read on to find out how it's done. If you're a long-time Apple Watch user, you probably remember a time when you could switch watch faces on the display with a simple swipe gesture. This was the default interaction in watchOS9, but Apple then removed the gesture when it upgraded to watchOS10. Apple changed the interaction because users complained it was too easy to accidentally change watch faces. But for anyone who's never had this problem, Apple just made it harder - it's required before swiping

How to use CSS Flex elastic layout to implement sliding card layout How to use CSS Flex elastic layout to implement sliding card layout Sep 28, 2023 pm 01:16 PM

How to use CssFlex flexible layout to implement sliding card layout In modern web development, flexible layout (Flexbox) has become more and more popular. It is a CSS module for positioning and layout elements that can easily achieve various complex layout effects. This article will introduce how to use Flex elastic layout to implement sliding card layout and provide specific code examples. Sliding card layout is a common UI design pattern, often used to display images or content. Each card can be switched to the next by swiping or clicking

See all articles