51可用代码模板网站

咨询热线:

181-1164-6936
  • 1
CSS样式
当前位置:首页>实用代码>CSS样式>

CSS3纵向的鼠标移到图片图片滚动,图文菜单代码

时间:2017-08-15 12:07点击:

代码


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3+jQuery垂直滚动图片菜单</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(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(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: 'hidden'});
scrollable.slideDown('slow', 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 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 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 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('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>
</head>
<body>
<div class="sc_menu_wrapper">
<div class="sc_menu">
   <a title="Menu" href=""><img src="wall_s1.jpg" alt="Menu"/></a>
   <a title="Navigation" href=""><img src="wall_s2.jpg" alt="Navigation"/></a>
<a title="jQuery" href=""><img src="wall_s3.jpg" alt="jQuery"/></a>

   <a title="CSS" href=""><img src="wall_s4.jpg" alt="CSS"/></a>
   <a title="Vertical" href=""><img src="wall_s5.jpg" alt="Vertical"/></a>
   <a title="Menu" href=""><img src="wall_s1.jpg" alt="Menu"/></a>
   <a title="Navigation" href=""><img src="wall_s2.jpg" alt="Navigation"/></a>
<a title="jQuery" href=""><img src="wall_s3.jpg" alt="jQuery"/></a>
   <a title="Navigation" href=""><img src="wall_s4.jpg" alt="Navigation" /></a>
<a title="JavaScript" href=""><img src="wall_s5.jpg" alt="JavaScript"/></a>
   <a title="Menu" href=""><img src="wall_s1.jpg" alt="Menu"/></a>
   <a title="Navigation" href=""><img src="wall_s2.jpg" alt="Navigation"/></a>
   <a title="JavaScript" href=""><img src="wall_s3.jpg" alt="Javascript"/></a>

</div>
</div>
</body>
</html> 

51可用模板(代码)网站专为广大站长朋友提供精品模板与代码,同时免费提供网站收录。
本站域名: WWW.51KYDM.COM    联系方式:QQ:182468923    手机:18111646936
本站关键词:网站链接收录网址收录入口网站免费提交收录网站收录提交入口    网站地图
51可用模板
展开