jquery实现div阴影效果示例代码
更新时间：2013年09月16日 11:47:00 作者：
div阴影效果在以前都是采用图片来实现的，而在本文大家将学会使用jquery来实现，感兴趣的朋友可以参考下
复制代码 代码如下:
<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>
相关文章
简单的按钮js事件 用于判断和显示提示2011-05-05
这篇文章主要介绍了jQuery实现幻灯片焦点图,可实现非常炫目时尚的幻灯片效果,非常具有实用价值,基本能满足你在网页上使用幻灯片(焦点图)效果，需要的朋友可以参考下2015-08-08
这篇文章主要介绍了分享十五款 jQuery 社交网络分享插件,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了jQuery Chosen通用初始化,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
如何没有任何一个库可以满足所有的需求，可以使用JQuery库提供的扩展功能，下面有个示例，大家可以看看2014-09-09
jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件，该框架提供了创建网页所需的一切，帮助您轻松建立站点。本文给大家介绍JQuery EasyUI的一些常用组件，感兴趣的的朋友一起学习吧2017-07-07
有时候可能需要实现这样的效果：使用ajax提交表单，成功提交表单之后清空表单,这种功能大家可能都希望实现吧，接下来为您详细介绍，需要了解的朋友参考下2012-12-12
需要设置宽度为整个浏览器宽度的div，当然我们可以使用相对布局的方式做到这一点，下面是具体实现，大家可以参考下2014-06-06
jquery validate 实现动态增加/删除验证规则操作示例
这篇文章主要介绍了jquery validate 实现动态增加/删除验证规则操作,结合实例形式分析了jQuery validate表单验证相关操作技巧,需要的朋友可以参考下2019-10-10
详细介绍jQuery.outerWidth() 函数具体用法
这篇文章通过jQuery示例代码演示outerWidth()函数的具体用法，介绍的非常详细，有需要的朋友可以借鉴2015-07-07
最新评论