jquery实现div阴影效果示例代码

142 阅读 0 评论 94 点赞

我是靠谱客的博主坚定丝袜，最近开发中收集的这篇文章主要介绍jquery实现div阴影效果示例代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<html> 
<head> 
<style> 
.mydiv1 {height:250px;width:250px;border:#909090 1px solid;} 
.mydiv2 { 
width:250px;height:250;border:#909090 1px solid;background:#fff;color:#333; 
filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/ 
-moz-box-shadow: 2px 2px 10px #909090;/*firefox*/ 
-webkit-box-shadow: 2px 2px 10px #909090;/*safari或chrome*/ 
box-shadow:2px 2px 0px #909090;/*opera或ie9*/ 
} 
</style> 
<script> 

function changediv(v){ 
var d = document.getElementById("mydiv"); 
if(v == "t") d.className="mydiv2"; 
else d.className="mydiv1"; 
} 
</script> 

</head> 
<body> 
<div id="mydiv" class="mydiv1" onmouseover="changediv('t');" onmouseout="changediv('f');"> 
contents 
</div> 
</body> 
</html> 