Scroll js code line by line, move the mouse up to stop scrolling, not scroll when the screen is not full

Source: Internet
Author: User

This code corrected the failure to scroll due to the high row-less height caused by float,

The scroll cannot be stopped when you move the mouse up: (because obj. onmouseover = stop is directly set, it is invalid in ff and IE)

Note:

CSS style: # In span {float: Left}

As long as it is used to test whether a floating element causes a row without scrolling to have no height and does not have AFO scrolling, It is intentionally added. In practice, this is not needed.

 

<Style type = "text/css">. industry_a {height: 210px; overflow: hidden; width: 300px; float: left} ul, li {margin: 0; padding: 0; list-style-type: none ;} ul li {line-height: 30px;} # in span {float: left} </style> <div class = "Industry_a"> <ul id = "in"> <li class = "wuzi_text"> <span> adds Johnson & Johnson to the Provincial Forestry Department and Xishuangbanna... </span> </li> <li class = "wuzi_text"> <span> Guangdong Provincial Department of Forestry organized forestry science and technology... </span> </li> <li class = "wuzi_text"> <span> Guangxi experts deliver treasure for forest farmers in mountainous areas </span> </li> <li c Lass = "wuzi_text"> <span> Fujian has taken multiple measures to create forestry technologies this year... </span> </li> <li class = "wuzi_text"> <span> seven major measures boost the three key forestry ecosystems... </span> </li> <li class = "wuzi_text"> <span> [Dongguan] completed the second quarter of Forest Park... </span> </li> <li class = "wuzi_text"> <span> Guangxi included the development of the forestry industry in the implementation of agriculture... </span> </li> </ul> </div> <div class = "Industry_a"> <ul id = "in1"> <li class = "wuzi_text"> <span> Guangdong Provincial Department of Forestry organized forestry science and technology... </span> </li> <li class = "wuzi_text"> <span> Fujian has taken various measures to create forestry technologies this year... </span> </li> <li cl Ass = "wuzi_text"> <span> seven major measures boost the three key forestry ecosystems... </span> </li> <li class = "wuzi_text"> <span> [Dongguan] completed the second quarter of Forest Park... </span> </li> <li class = "wuzi_text"> <span> Guangxi included the development of the forestry industry in the implementation of agriculture... </span> </li> </ul> </div> <script type = "text/javascript" language = "javascript"> function setObjScroll (objectID, lh, speed, delay) {// lh: Row Height; delay: latency; speed: Rolling speed var o = document. getElementById (objectID); var oldspeed = speed; o. style. height = "auto"; var Park = false; // whether to dock var t; // timer // modify the rolling area/** 1. Hide the parent element overflow * 2. The height of the rolling element cannot be 0: set the height of the child element in the scroll element to be equal to the Row Height lh */var partnt = o. parentNode; if (partnt. offsetHeight <= 0) partnt. style. overflowY = "hidden"; // 1. Hide the parent element overflow configObj (o); // 2. The height of the scroll element cannot be 0: set the height of the child element in the scroll element to be equal to the height of the row. innerHTML + = o. innerHTML; // copy the same content under the original content to achieve seamless o. style. marginTop = 0; if (window. attachEvent) // IE {o. attachEvent ("onm Ouseover ", setPark); o. attachEvent ("onmouseout", setScroll);} else // FF {o. addEventListener ("mouseover", setPark, true); // you must have three parameters. The event name is not on but mouseovero. addEventListener ("mouseout", setScroll, true);} setTimeout (start, delay);} function start () {// start online scrolling when running if (speed = 0) {park = true;} else {park = false;} t = setInterval (scrolling, speed); // setInterval () continuously calls the function if (! Park) {o. style. marginTop = parseInt (o. style. marginTop)-1 + "px"; // scroll up a pixel so that the parseInt (o. style. marginTop) % lh! = 0 true // o. style. marginTop = parseInt (o. style. marginTop)-1 + "px"; // scroll down} function scrolling () {if (parseInt (o. style. marginTop) % lh! = 0) {o. style. marginTop = parseInt (o. style. marginTop)-1 + "px"; if (Math. abs (parseInt (o. style. marginTop)> = o. scrollHeight/2) o. style. marginTop = 0; // before the content in the scrolling screen is completely scrolling, re-copy a copy of the content and execute clearInterval (t) when the following connection} else {// finishes rolling a row; // execute setTimeout (start, delay) ;}} function needScroll (obj) {// determines whether to scroll var partnt = o. parentNode; // returns the if (partnt. offsetHeight> obj. offsetHeight) {// If the height of the parent element is higher than that of the element to be rolled, return false} return true;} function configObj (obj) is not required) {var allChilds = obj. childNodes; for (var I = 0; I <allChilds. length; I ++) {if (allChilds [I]. nodeType = 1) // return 1 indicates that the element is a normal element label, return 3 indicates that the element is text content, and return 8 indicates that the comment label is returned, the return value 9 indicates the document type {if (allChilds [I]. offsetHeight <= 0) {// If the height of the child element in the scroll element is smaller than or equal to zero, it may be that the floating element is included in the element, and the attribute allChilds [I] of the element needs to be corrected. style. height = lh + "px"; allChilds [I]. style. lineHeight = lh + "px" ;}else {return ;}}} function setPark () {speed = 0 ;}function setScroll () {speed = oldspeed ;}} setObjScroll ("in", 30, 20,150 0); setObjScroll ("in1", 30, 20,150 0); </script>

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.