Implementation of Movie ending effect and movie Effect

Implementation of Movie ending effect and movie Effect

Often, when watching movies, we will see a rolling subtitle about the film's director, scriptwriter, starring role, and friendly appearance, that effect can be achieved using html + css + div. The specific implementation code is as follows:

Html code:

<Div id = "movie"> <div id = "movieup"> </div>
<Marquee direction = "up" height = 400px;> <p> Director: *** </p> <p> scriptwriter: * ** </p> <p> Starring: ********** </p> <p> show-in: * ******* </p>
</Marquee>
<Div id = "moviedown"> </div>
</Div>

Scroll label: <marquee> text/image to be rolled </marquee>

Below is a list of some common attributes in the rolling label:

Scroll direction ction = up/down/left/right (up/down/left/right)

Scroll speed scrollamount = 4/5/6 (4/5/6 is the three scroll speeds suitable for everyone)

Scroll behavior = scroll/slide/alternate)

Number of scrolling times loop = 3 (three cycles)

Scrolldelay = 1000 (1000 ms means one second)

Limit the size of the scrolling area width = "height =" "bgcolor =" "(used to display the scrolling Area)

Onmouseover = this. stop () Onmouseout = this. start ()

(Move the mouse over the scroll to stop, move the mouse away from the scroll to continue)

Note: All of the above can be used as the <marquee> </marquee> label to add the desired effect to the attribute in the start label.

 

Css:

 #movie  {    width:360px;    height:400px;    background:url("F:\images\1.jpg");    border:1px solid #000000;    text-align:center;    margin:auto;    position:relative;  }  #movieup  {    width:100%;    height:40px;    background:#000000;    position:absolute;    top:0px;    }  #moviedown  {     width:100%;     height:40px;     background:#000000;     position:absolute;     bottom:0px;  }

　　

 

I originally recorded the scrolling effect as a micro-video for you to see, but I don't know if this function is not available or I am a newbie and cannot find a place to upload a local video, you can only upload a static photo for the moment. You only need to know that it is a scroll up subtitle. This is just a simple application of rolling labels, the garden friends who see this article can add more styles to make it more colorful.