编码CSS问题

在哪里更改编码中的这些步骤？将仪表板的背景颜色更改为黑色，不透明度为0.6。在面板滑出之前，将面板中图像的不透明度更改为0.5。将鼠标悬停在每个图像上时，将面板图像的不透明度更改为1.0。

<html>
<head>
<meta charset="UTF-8">
<title>A Slide In Dashboard</title>
<link href="../_css/site.css" rel="stylesheet">
<style>
#dashboard {
width: 70px;
opacity:0.6;
background-color: rgb(110,138,195);
padding: 20px 20px 0 20px;
position: absolute;
left: -92px;
    z-index: 100;
}
#dashboard img {
margin-bottom: 20px;
order: 1px solid rgb(0,0,0);
}
</style>
<script src="/_js/jquery-1.7.2.min.js">
</script>
<script src="_js/jquery-1.6.3.min.js"></script>


<script src="_js/jquery.easing.1.3.js"></script>


<script src="_js/jquery.color.js"></script>

<script>
$(document).ready(function()
{

$('#dashboard').hover(
 function(){
 $(this).stop().animate({ opacity:1.0}, 800);
 {
   left: '0' ,
   backgroundColor: 'rgb(255,255,255)'


 }
  500,
  'easeInSine'
  ); // end animate
 },

function() {
   $(this).stop().animate({ opacity:0.3 }, 800;
   {
      left: '-92px'
      backgroundColor: 'rgb(110,138,195)'
},
1500,
 'easeOutBounce'
  ); // end animate
    }
  ); // end hover
 }); // end ready
</script>
</head>
<body>
<div class="wrapper">
<div class="header">
<p class="logo">JavaScript <i>&</i> jQuery <i class="mm">The<br>Missing<br>Manual</i></p>
</div>
<div id="dashboard">
<img src="../_images/small/blue_h.jpg" width="70" height="70" alt="blue">
<img src="../_images/small/green_h.jpg" width="70" height="70" alt="green">
<img src="../_images/small/orange_h.jpg" width="70" height="70" alt="orange">
<img src="../_images/small/purple_h.jpg" width="70" height="70" alt="purple">
<img src="../_images/small/red_h.jpg" width="70" height="70" alt="red">
<img src="../_images/small/yellow_h.jpg" width="70" height="70" alt="yellow">
</div>
<div class="content">
<div class="main">
<h1>Slide in Dashboard</h1>
<p>Mouse over the blue stripe on the left edge of this page</p>
</div>
</div>
<div class="footer">
<p>JavaScript &amp; jQuery: The Missing Manual, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
</div>
</div>
</body>
</html>

这个怎么样-FIDDLE。

JS-

$('.showme').on('click', function(){
$( ".slider" ).animate({
                        left: 0
                        }, 1000,
                         function() {
                                     // Animation complete.
                                     });
});

相关内容

最新更新

热门标签：