Home > Developer > JavaScript
CSS3 vertical move the cursor to the image scroll, text menu code, css3 vertical
<! DOCTYPE html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> CSS3 + jQuery vertical scroll Image menu </title>
<Style type = "text/css">
Body {
Background: # 0F0D0D;
Padding: 30px 0 0 50px; color: # FFFFFF;
}
Div. SC _menu_wrapper {
Position: relative;
Height: 500px;
Width: 160px;
Margin-top: 30px;
Overflow: auto;
}
Div. SC _menu {
Padding: 15px 0;
}
. SC _menu {
Display: block;
Margin-bottom: 5px;
Width: 130px;
Border: 2px rgb (79, 79, 79) solid;
-Webkit-border-radius: 4px;
-Moz-border-radius: 4px;
Color: # fff;
Background: rgb (79, 79, 79 );
}
. SC _menu a: hover {
Border-color: rgb (1, 130,130,130 );
Border-style: dotted;
}
. SC _menu img {
Display: block;
Border: none;
}
. SC _menu_wrapper. loading {
Position: absolute;
Top: 50px;
Left: 10px;
Margin: 0 auto;
Padding: 10px;
Width: 100px;
-Webkit-border-radius: 4px;
-Moz-border-radius: 4px;
Text-align: center;
Color: # fff;
Border: 1px solid rgb (79, 79, 79 );
Background: # 1F1D1D;
}
. SC _menu_tooltip {
Display: block;
Position: absolute;
Padding: 6px;
Font-size: 12px;
Color: # fff;
-Webkit-border-radius: 4px;
-Moz-border-radius: 4px;
Border: 1px solid rgb (79, 79, 79 );
Background: rgb (0, 0, 0 );
Background: rgba (0, 0, 0, 0.5 );
}
# Back {
Margin-left: 8px;
Color: gray;
Font-size: 18px;
Text-decoration: none;
}
# Back: hover {
Text-decoration: underline;
}
</Style>
<Script src = "http://www.codefans.net/ajaxjs/jquery1.3.2.js" type = "text/javascript"> </script>
<Script type = "text/javascript">/* <! [CDATA [*/
Function makeScrollable (wrapper, scrollable ){
// Get jQuery elements
Var wrapper =$ (wrapper), scrollable =$ (scrollable );
// Hide images until they are not loaded
Scrollable. hide ();
Var loading = $ ('<div class = "loading"> Loading... </div>'). appendTo (wrapper );
// Set function that will check if all images are loaded
Var interval = setInterval (function (){
Var images = scrollable. find ('img ');
Var completed = 0;
// Counts number of images that are succesfully loaded
Images. each (function (){
If (this. complete) completed ++;
});
If (completed = images. length ){
ClearInterval (interval );
// Timeout added to fix problem with Chrome
SetTimeout (function (){
Loading. hide ();
// Remove scrollbars
Wrapper.css ({overflow: 'den den '}); scrollable. slideDown ('low', function (){
Enable ();
});
},1000 );
}
},100 );
Function enable (){
// Height of area at the top at bottom, that don't respond to mousemove
Var inactiveMargin = 99;
// Cache for performance
Var wrapperWidth = wrapper. width ();
Var wrapperHeight = wrapper. height ();
// Using outer height to include padding too
Var scrollableHeight = scrollable. outerHeight () + 2 * inactiveMargin;
// Do not cache wrapperOffset, because it can change when user resizes window
// We cocould use onresize event, but it's just not worth doing that
// Var wrapperOffset = wrapper. offset ();
// Create a invisible tooltip
Var tooltip = $ ('<div class = "SC _menu_tooltip"> </div> ')
. Css ('opacity ', 0)
. AppendTo (wrapper );
// Save menu titles
Scrollable. find ('A'). each (function (){
$ (This). data ('tooltidtext', this. title );
});
// Remove default tooltip
Scrollable. find ('A'). removeAttr ('title ');
// Remove default tooltip in IE
Scrollable. find ('img '). removeAttr ('alt ');
Var lastTarget;
// When user move mouse over menu
Wrapper. mousemove (function (e ){
// Save target
LastTarget = e.tar get;
Var wrapperOffset = wrapper. offset ();
Var tooltipLeft = e. pageX-wrapperOffset. left;
// Do not let tooltip to move out of menu.
// Because overflow is set to hidden, we will not be able too see it
TooltipLeft = Math. min (tooltipLeft, wrapperWidth-75); // tooltip. outerWidth ());
Var tooltipTop = e. pageY-wrapperOffset. top + wrapper. scrollTop ()-40;
// Move tooltip under the mouse when we are in the higher part of the menu
If (e. pageY-wrapperOffset. top <wrapperHeight/2 ){
TooltipTop + = 80;
}
Tooltip.css ({top: tooltipTop, left: tooltipLeft });
// Scroll menu
Var top = (e. pageY-wrapperOffset. top) * (scrollableHeight-wrapperHeight)/wrapperHeight-inactiveMargin;
If (top <0 ){
Top = 0;
}
Wrapper. scrollTop (top );
});
// Setting interval helps solving perfomance problems in IE
Var interval = setInterval (function (){
If (! LastTarget) return;
Var currentText = tooltip. text ();
If (lastTarget. nodeName = 'img '){
// We 've attached data to a link, not image
Var newText = $ (lastTarget). parent (). data ('tooltidtext ');
// Show tooltip with the new text
If (currentText! = NewText ){
Tooltip
. Stop (true)
. Css ('opacity ', 0)
. Text (newText)
. Animate ({opacity: 1}, 1000 );
}
}
},200 );
// Hide tooltip when leaving menu
Wrapper. mouseleave (function (){
LastTarget = false;
Tooltip.stop(true0000.css ('opacity ', 0). text ('');
});
}
}
$ (Function (){
MakeScrollable ("div. SC _menu_wrapper", "div. SC _menu ");
});
/*]> */</Script>
</Head>
<Body>
<Div> http://www.999jiujiu.com/</div>
<Div class = "SC _menu_wrapper">
<Div class = "SC _menu">
<A title = "Menu" href = ""> </a>
<A title = "Navigation" href = ""> </a>
<A title = "jQuery" href = ""> </a>
<A title = "CSS" href = ""> </a>
<A title = "Vertical" href = ""> </a>
<A title = "Menu" href = ""> </a>
<A title = "Navigation" href = ""> </a>
<A title = "jQuery" href = ""> </a>
<A title = "Navigation" href = ""> </a>
<A title = "JavaScript" href = ""> </a>
<A title = "Menu" href = ""> </a>
<A title = "Navigation" href = ""> </a>
<A title = "JavaScript" href = ""> </a>
</Div>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
