In terms of requirements, this feature requires real-time invocation of the latest microblogging data, and the requirements for front-end development can be split as follows:
1 content continuous rolling;
2 new Weibo will be the following micro-Bo pushed down, and then fade in;
3 mouse over content pause scrolling;
4 The bottom gradient of the container disappears under the background color.
Among the above 4 requirements, demand 1-3 for JS technology Implementation, demand 4 for CSS technology implementation, the following one by one requirement.
Demand 1 and Demand 2: content continuous scrolling requirements some similar to the previous article "small module: Announcement scrolling and paused" in the features described in that article, this feature uses CSS position positioning to control the entire UL list of mobile animation. Combined with demand 2, we can write more simply so that the last Li element is timed to be inserted above the first LI element, and then the Animate method is used to change the height and transparency of Li. The SetTimeout method is still used to scroll without stopping. In the absence of new data loading, to implement a finite content loop scrolling.
Requirement 3: The mouse needs can be paused when the mouse hover through the value of a property added to a certain element, where the name attribute--to determine whether this value exists, if there is no code execution.
Requirement 4: Can be achieved by overwriting the Png24 picture on the content, IE6 is not good for png24 support, if need to take into account the performance, add Display:none ie6hack on this container. The next question is how to solve the problem of image overlay to text, how text can be clicked or selected, this time need a special CSS attribute "Pointer-events", the value of this property is set to None, the mouse can select the following text by absolutely positioning the picture on the text.
The combined code is as follows:
Html
Copy Code code as follows:
<div class= "Messagewrap" >
<ul>
<li><!--Multiple Li, please copy or set up the repeat region--></li>
</ul>
<div class= "Bottomcover" >
<!--You can choose to write a--> in order to meet the requirements of the request of the consortium without the Blank label.
</div>
</div>
Css
Copy Code code as follows:
. messagewrap{overflow:hidden;position:relative;width:500px;height:300px}
li{height:50px;}
. bottomcover{width:500px;height:45px;position:absolute;bottom:0;left:0;
Pointer-events:none;background:url (halftransp.png) left bottom no-repeat;
* * FROM background color upward gradient transparent picture/_display:none;/* for IE6 experience downgrade * *}
Js
Copy Code code as follows:
<script>
$ (function () {
Msgmove ();
$ ("ul"). Hover (function () {
$ (this). attr ("name", "hovered"); The mouse is set by the UL name value "hovered"
},function () {
$ (this). Removeattr ("name");
});
});
function Msgmove () {
var isie=!! Window. ActiveXObject;
var Isie6=isie&&!window. XMLHttpRequest;
if ($ ("ul"). attr ("name")!= "hovered") {
To determine whether the UL Name property is "hovered", decide whether the following code block is running to implement the mouse pause scrolling.
var height = $ ("Li:last"). Height ();
if (isIE6) {
To judge the Ie6,jquery animate animation and opacity transparent in the use of the IE6 will appear in the Chinese ghosting phenomenon,
Therefore, the IE6 in the implementation of transparent disable.
$ ("Li:last"). CSS ({"height": 0});
}else{
$ ("Li:last"). CSS ({"opacity": 0, "height": 0});
The final Li transparency and height of the list is set to 0
}
$ ("Li:first"). Before ($ ("li:last"));
Lift the last Li of the list to the top to achieve infinite loop scrolling display of finite list items
$ ("Li:first"). Animate ({"height": height},300);
The Li height at the top of the list is gradually getting higher to push down the li below.
if (!ISIE6) {
$ ("Li:first"). Animate ({"Opacity": "1"},300);
To set the transparency fade effect in a non-IE6 browser
}
}
SetTimeout ("Msgmove ()", 5000);
Set 5 seconds to scroll once
}
</script>
