html 笔记

图片墙循环代码:

<div id="lunbo" style="overflow:hidden;width:1350px;">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="lunbo1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="10" bordercolor="#FFFF99">
<tr align="center">
<td><img src="img/2008916212512987_2.jpg" width="300" height="470"></td>
<td><img src="img/W020080716457929217743.jpg" width="300" height="470"></td>
<td><img src="img/20150507142843_BS4cA.jpeg" width="300" height="470"></td>
<td><img src="img/ULVssF9HK_1300740737.jpg" width="300" height="470"></td>
<td><img src="img/p1099542477.jpg" width="300" height="470"></td>
<td><img src="img/5.jpg" width="300" height="470"></td>
</tr>
</table>
</td>
<td id="lunbo2" valign="top"></td>
</tr>
</table>
</div>

<script>
var speed=30//速度数值越大速度越慢
lunbo2.innerHTML=lunbo1.innerHTML
function Marquee(){
if(lunbo.scrollLeft<=0)
lunbo.scrollLeft+=lunbo2.offsetWidth
else{
lunbo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
lunbo.onmouseover=function() {clearInterval(MyMar)}
lunbo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script> 

 

标题滑动隐藏效果

<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>

<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>

<body>

<div class="panel">
<p>11111</p>
<p>11111</p>
</div>

<p class="flip">请点击这里</p>

 

阴影效果

box-shadow:0px -10px 15px #000000;

 

透明效果

 opacity:0.8;

 

posted @ 2016-05-14 22:31  沙瑞金书记  阅读(130)  评论(0编辑  收藏  举报