CSS3 portrait mouse move to Picture picture Scroll, Text menu code

<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>css3+jquery Vertical Scrolling Picture 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 a {
Display:block;
margin-bottom:5px;
width:130px;
BORDER:2PX RGB (more, more than) solid;
-webkit-border-radius:4px;
-moz-border-radius:4px;
Color: #fff;
Background:rgb (79, 79, 79);
}
. sc_menu A:hover {
Border-color:rgb (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 is not loaded
Scrollable.hide ();
var loading = $ (' <div class= "Loading" >Loading...</div> "). AppendTo (wrapper);
Set function that would check if all images is loaded
var interval = setinterval (function () {
var images = scrollable.find (' img ');
var completed = 0;
Counts number of images that is 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: ' hidden '}); Scrollable.slidedown (' Slow ', function () {
Enable ();
});
}, 1000);
}
}, 100);

function enable () {
Height of area at the top at bottom, that's 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;
Don't cache wrapperoffset, because it can change when user resizes window
We could 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 (' ToolTipText ', this.title);
});

Remove Default tooltip
Scrollable.find (' a '). Removeattr (' title ');
Remove default tooltip in IE
Scrollable.find (' img '). REMOVEATTR (' Alt ');

var lasttarget;
When the user move mouse over menu
Wrapper.mousemove (function (e) {
Save Target
Lasttarget = E.target;
var wrapperoffset = Wrapper.offset ();
var tooltipleft = E.pagex-wrapperoffset.left;
Do don't let the ToolTip to move out of the menu.
Because overflow is set to hidden, we'll 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 is 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 (' ToolTipText ');
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 (True). CSS (' opacity ', 0). Text (');
});
}
}

$ (function () {
Makescrollable ("Div.sc_menu_wrapper", "Div.sc_menu");
});
/*]]>*/</script>
<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>

CSS3 portrait mouse move to Picture picture Scroll, Text menu code