我想要做什么像this bad example，我尝试过CSS3但是字段来改变图片，至少我在jQuery中做了所有东西，但没有动画或其他错误，实际上我不知道，here is my Attempt BY CSS3。
这是我的代码
#maged{
width:198px; /*140px * 5*/
height:591px;
background-color:#0C9;
position: absolute;
overflow:hidden;
top: 14px;
left: 41px;
position: relative;
overflow: hidden;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
opacity:1;
filter:alpha(opacity=100);
}
#maged:hover {
opacity:0;
filter:alpha(opacity=0);
-moz-transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
-webkit-transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg);
transform: scale(1.00) rotate(0deg) translate(0px, 100px) skew(0deg, 0deg); transform-origin: 0% 0%
background-color:#36F;
}
#cc_item img{
position:absolute;
width:195px;
height:591px;
top:-562px;
left:54px;
}
#cc_title{
color:#fff;
line-height:46px;
font-size:30px;
top:472px;
left:59px;
position:absolute;
background:#272727;
width:167px;
display:block;
z-index:11;
}
-->
</style>
<script type="text/javascript">
$(function(evt) {
$("#maged").click(function() {
alert("loool");
$("#cc_item").slideDown("slow");
$("#cc_title").fadeIn("slow");
return false;
});
});
</script>
</head>
<body>
<div id="maged"></div>
<div id="cc_title">Main page</div>
<div id="cc_item" style="z-index:5;">
<img src="img30000.jpg" alt="" />
</div>
</body>
</html>
答案 0 :(得分：1)
这个解决方案非常重要，因为我想专注于使HTML更清晰，并确保在JavaScript关闭时一般效果（尽管程度较小）。
据我所知，虽然CSS看起来很先进，但它本身没有CSS3。 （不是！）
对我来说最重要的一点是那些图片真的不满足，所以我认为你不需要使用<img>元素;而是使用CSS背景图像...但为了轻松制作这些背景图像，我必须使用a jQuery plugin。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>javascript - Help in jQuery animation</title>
<style type="text/css">
<!--
body {
background:url(http://osc4.template-help.com/wt_32608/images/bg.gif);
text-align:center;
}
ul#menu {
background:#171717;
margin:auto;
overflow:hidden;
width:985px;
list-style:none;
padding:0px;
}
ul#menu li {
list-style:none;
background:transparent;
float:left;
text-align:center;
width:195px;
height:591px;
padding:0px;
position:relative;
border:1px solid #FFFFFF;
}
ul#menu li a {
text-decoration:none;
color:#FFFFFF;
display:block;
background:transparent;
height:591px;
width:195px;
position:relative;
}
ul#menu li a .menu-text {
background:#272727;
width:167px;
font-size:30px;
font-family:Arial,Helvetica,sans-serif;
font-variant:small-caps;
position:absolute;
top:224px;
left:14px;
}
ul#menu li a .menu-text .title {
line-height:46px;
}
ul#menu li a .description {
display:none;
font-size:smaller;
text-align:left;
line-height:auto;
}
ul#menu li a:hover .menu-text {
top:auto;
width:195px;
height:152px;
left:0px;
bottom:0px;
}
body.javascript-enabled ul#menu li a:hover .menu-text {
top:224px;
bottom:auto;
width:167px;
height:auto;
left:14px;
}
ul#menu li a:hover .description {
display:block;
padding-left:30px;
}
body.javascript-enabled ul#menu li a:hover .description {
display:none;
}
ul#menu #main-page a {
background:url(http://osc4.template-help.com/wt_32608/images/img1.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #about-us a {
background:url(http://osc4.template-help.com/wt_32608/images/img2.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #services a {
background:url(http://osc4.template-help.com/wt_32608/images/img3.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #partners a {
background:url(http://osc4.template-help.com/wt_32608/images/img4.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #locations a {
background:url(http://osc4.template-help.com/wt_32608/images/img5.jpg) NO-REPEAT;
background-position:-1000px -1000px;
}
ul#menu #main-page a:hover {
background-position:top center;
}
ul#menu #about-us a:hover {
background-position:top center;
}
ul#menu #services a:hover {
background-position:top center;
}
ul#menu #partners a:hover {
background-position:top center;
}
ul#menu #locations a:hover {
background-position:top center;
}
body.javascript-enabled ul#menu #main-page a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #about-us a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #services a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #partners a:hover {
background-position:center -1000px;
}
body.javascript-enabled ul#menu #locations a:hover {
background-position:center -1000px;
}
-->
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script src="http://plugins.jquery.com/files/jquery.backgroundPosition.js_7.txt" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("body").addClass("javascript-enabled");
$("ul#menu li a")
.css({backgroundPosition: '0px -591px'})
.mouseenter(function() {
$(this).find(".menu-text").hide();
$(this)
.stop().animate({backgroundPosition: '0px 0px'}, 500, function() {
$(this).css({backgroundPosition: '0px 0px'});
$(this).find(".description").css({display:'block'});
$(this).find(".menu-text").css({top:'auto',width:'195px',height:'152px',left:'0px',bottom:'0px'}).fadeIn('slow');
});
})
.mouseleave(function() {
$(this).find(".menu-text").hide();
$(this)
.stop().animate({backgroundPosition: '0px -591px'}, 250, function() {
$(this).css({backgroundPosition: '0px -591px'});
$(this).find(".description").css({display:''});
$(this).find(".menu-text").css({top:'',width:'',height:'',left:'',bottom:''}).fadeIn('slow');
});
})
});
//]]>
</script>
</head>
<body>
<ul id="menu">
<li id="main-page">
<a href="#main-page"><span class="menu-text"><span class="title">Main page</span> <span class="description">Welcome to our site</span></span></a>
</li>
<li id="about-us">
<a href="#about-us"><span class="menu-text"><span class="title">About us</span> <span class="description">Who we are</span></span></a>
</li>
<li id="services">
<a href="#services"><span class="menu-text"><span class="title">Services</span> <span class="description">& solutions</span></span></a>
</li>
<li id="partners">
<a href="#partners"><span class="menu-text"><span class="title">Partners</span> <span class="description">Partners list</span></span></a>
</li>
<li id="locations">
<a href="#locations"><span class="menu-text"><span class="title">Locations</span> <span class="description">Our contacts</span></span></a>
</li>
</ul>
</body>
</html>
答案 1 :(得分：0)
这是我在不使用css3的情况下解决问题的方法。这一切都在1.html文件中，jquery和图像指向外部源，因此您可以运行它。希望这可以帮助你：）
<html>
<head>
<style>
#container{
overflow: hidden;
width: 800px;
height: 600px;
border: 1px solid black;
cursor: pointer;
}
.maged{
width:200px;
height:600px;
float:left;
display: none;
}
.cc_item{
text-align:center;
width:200px;
height:600px;
background:#171717;
float:left;
}
span.cc_title{
color:#fff;
line-height:46px;
font-size:30px;
margin: 250px 10px 0px;
float: left;
background:#272727;
width:180px;
z-index:11;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(evt) {
$(".cc_item").hover(function() {
$(this).find(".maged").stop(true,true).slideDown(300);
$(this).find(".cc_title").fadeOut("slow");
},function(){
$(this).find(".maged").stop(true,true).slideUp(300);
$(this).find(".cc_title").fadeIn("slow");
});
});
</script>
</head>
<body>
<div id="container">
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://www.hintmag.com/blog/uploaded_images/richardnicoll08-711189.jpg" alt="" />
</div>
<span class="cc_title">Main page</span>
</div>
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://www.hintmag.com/blog/uploaded_images/brunopieters05-717446.jpg" alt="" />
</div>
<span class="cc_title">Second page</span>
</div>
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://www.delhierro.ca/wp-content/uploads/2010/11/Fashion-Studio-01S.jpg" alt="" />
</div>
<span class="cc_title">Third page</span>
</div>
<div class="cc_item" style="z-index:5;">
<div class="maged">
<img src="http://lockdownmodels.files.wordpress.com/2009/05/kell-1.jpg?w=200&h=600" alt="" />
</div>
<span class="cc_title">Fourth page</span>
</div>
</div>
</body>
</html>