我想使用 jquery 在悬停时创建黑色淡入淡出,文本在水平、可缩放的滚动图像上的黑色上(请参阅随附的屏幕截图)。在那一刻,图像逐渐变得不透明而不是变成黑色。示例可以在这里看到:http: //deanpauley.co.uk/new/index.html 我是使用 jquery 的新手,对此我完全感到困惑。任何帮助将不胜感激。
CSS如下:
@charset "UTF-8";
/* CSS Document */
body {
font-family: 'Questrial', sans-serif;
background:#f5f5f5;
border-bottom-left:25px;
border-left-color:#F0EFF1;
border-left-height:1000px;
}
#border {
position:fixed;
width:37px;
height:8000px;
margin-left:-10px;
margin-top:0px;
z-index:2000;
background-color:#f5f5f5;
}
#infoleft
{
position:fixed;
top:20px;
left:25px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.14em;
line-height:1.2em;
display:block;
}
#infoleft ul {
height:20px;
font-weight:normal;
font-size: 14.5px;
letter-spacing: 1px;
text-decoration:none;
margin: 0;
padding: 0;
list-style-type: none;
}
#infoleft ul li {
display: inline;
padding: 10px;
}
#inforight
{
position:fixed;
top:21px;
right:23px;
font-weight:normal;
font-size: 14.5px;
letter-spacing: 1pxem;
}
#inforight ul {
height:20px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
text-decoration:none;
margin: 0;
padding: 0;
list-style-type: none;
}
#images {
position:absolute;
left:30px;
bottom:35px;
top:100px;
width:25000px;
padding-top:80px;
min-height:500px;
}
img {
padding:5px;
height:90%;
}
img a:hover {
color:black;
opacity:1;
}
a {
text-decoration:none;
color:#000;
}
a:hover {
color:#0080ff;
}
#showinfo {
position:fixed;
top:150px;
left:35px;
width:20px;
height:20px;
font-size:15px;
z-index:2000;
}
#showinfo a {
color:#000;
}
#showinfo a:hover {
color:#0080ff;
cursor:pointer;
}
#projectInfo {
position: fixed;
background: #f5f5f5;
top: 185px;
left: 5px;
width: 280px;
z-index: 1000;
padding: 20px 32px 32px 30px;
height: 280px;
font-size: 13.5px;
line-height:1.4em;
letter-spacing:0.13em;
}
和 HTML:
<!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">
<head>
<script type='text/javascript' src='jquery.js'></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dean Pauley — Recent work</title>
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script defer src="js/script.js"></script>
</head>
<body>
<div id="showinfo">
<a href="#" id="showProjectInfo"><span id="showhide">[+]</span></a>
</div>
<div id="projectInfo" style="display: block; ">
<p>News from Nowhere</p>
<p>—</p>
<p>A response to The Tyranny of Email by John Freeman exploring how the quality of the written word has deteriorated due to the faster methods of digital communication by contrasting it with that of a pre-digital era. The leather bound-book consists of over 3000 different spam emails.
</p>
</div>
<div id="border">
</div>
<div id="infoleft">
<ul>
<li><a href="index.html">Dean Pauley</a></li>
<li>Graphic Design</li>
<li>mail@deanpauley.co.uk</li>
<li>+44(0)7969 652 219</li>
</ul>
</div>
<div id="inforight">
<ul>
<li><a href="info.html" class="transition">Information</a></li>
</ul>
</div>
<div id="images">
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
<a href="#"><img src="images/img_off.jpg" /></a>
<a href="#"><img src="images/Calendar1.jpg" /></a>
<img src="images/NFN800.jpg" />
<img src="images/NFN800.jpg" />
<img src="images/NFN800.jpg" />
<img src="images/NFN800.jpg" />
<img src="images/NFN800.jpg" />
</div>
<script type="text/javascript">
$(document).ready(function(){
$("img").hover(function() {
$(this).stop().animate({opacity: "0.8"}, '100');
},
function() {
$(this).stop().animate({opacity: "1"}, '100');
});
});
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script type="text/javascript">
$(document).ready(function(){
$("projectinfo").hide();
$("showprojectinfo").show();
$('.show_hide').click(function(){
$("projectinfo").slideToggle();
});
});
</script>
<script src="js/script.min.js"></script>
</body>
</html>
截图:
EditIt 现在可以使用@Duopixel,但现在有黑色边框。请参阅随附的屏幕截图。我怎样才能摆脱这个?
“编辑”