Shulou(Shulou.com)06/01 Report--

This article introduces the knowledge of "how jquery can achieve the special effects of constantly scrolling pictures from right to left". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

DIV CSS+JQ does not continuously rotate the screenshot of the special effect of the picture

The characteristics of the special effect of non-continuous picture migration:

CSS5 tidying up collection from right to left turn jquery+DIV+CSS special effects, the mouse after continuous movement picture engraving (when hovering) picture stop rotation, mouse move picture text form continuous rotation using DIV CSS+JQ to achieve picture turning special effects

1. The HTML code is as follows:

Discontinuous picture scrolling online presentation CSS5 $(function () {$('# Marquee_x'). JcMarquee ({'marquee':'x','margin_right':'10px','speed':20}); / / CSS5 implies that 10px represents spacing, and the second 20 represents moving speed})

CSS5 learning

CSS goes to CSS5 for further study

Case demonstration

CSS talent

CSS special effects

CSS hack

DIV+CSS instance

Turn the case demonstration

Demonstration form

The above HTML source code, in only one LI tag within each DIV package a set of picture and text data, remember to apply only one ul li list, all moving picture data into this group of li list tags. This discontinuous turning effect can control the distance between each set of image and text data, and may control the speed of image migration and transformation.

2. CSS code:

@ charset "utf-8"; / * CSS5-CSS initialization template-css5.com.cn * / body, div, ul, li {margin:0; padding:0;font-style: normal;font:12px/22px "\ 5B8B\ 4F53", Arial, Helvetica, sans-serif} / * CSS annotations indicate:\ 5B8B\ 4F53 represents Song style, more Chinese fonts are converted to Unicode / / www.css5.com.cn/jiqiao/325.shtml * / ol, ul, li {list-style:none} img {border: 0 Vertical-align:middle} body {color:#000000;background:#FFF; text-align:center} .clear {clear:both;height:1px;width:100%; overflow:hidden; margin-top:-1px} a {color:#000000;text-decoration:none} a:hover {color:#BA2636;text-decoration:underline} # mrq {width:925px; margin:20px auto;border:1px solid # 000; padding:2px} # Marquee_x {overflow:hidden Width: 925px} # Marquee_x ul li, # Marquee_x ul li div {float:left;line-height:25px;overflow:hidden} / * horizontal movement must allow all li to float left * / # Marquee_x ul li div {float:left;line-height:25px;height:131px; width:142px; overflow:hidden} # Marquee_x ul li div img {border:1px solid # DADADA; width:140px; height:105px; display:block} # Marquee_x ul li div span {display:block;}

Modify the CSS to achieve its own desired purpose according to the needs, such as correcting the frame, margin, picture height, picture width, etc.

This is the end of the content of "how to achieve the special effect of jquery scrolling pictures from right to left". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.