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>

相关文章

  • jQuery修改li下的样式以及li下的img的src的值的方法

    jQuery修改li下的样式以及li下的img的src的值的方法

    这篇文章主要为大家介绍了jQuery如何修改li下的样式,以及修改li下的img的src的值,示例代码很简单,一看就会
    2014-11-11
  • jQuery遍历节点元素方法介绍

    jQuery遍历节点元素方法介绍

    这篇文章介绍了jQuery遍历节点元素的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • jquery实现转盘抽奖功能

    jquery实现转盘抽奖功能

    本文主要介绍了用的jqueryRotate插件实现转盘抽奖功能的方法,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • jQuery UI制作选项卡(tabs)

    jQuery UI制作选项卡(tabs)

    这篇文章主要为大家详细介绍了jQuery UI制作选项卡tabs的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • jquery文档操作wrap()方法实例简述

    jquery文档操作wrap()方法实例简述

    这篇文章主要介绍了jquery文档操作wrap()方法,以实例形式简单分析了wrap()方法用某个标签将某个元素包起来的使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码

    jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码

    本篇文章主要是对jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)

    jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)

    很多人熟悉使用锚链接跳转到的页面部分的解决方案,这种效果当需要列出很长的数据集时,是非常实用的,然而页面跳转对于游客来说有时候并不是好友好,弊端我就不多说了,祥看下本文
    2013-02-02
  • 利用Jquery队列实现根据输入数量显示的动画

    利用Jquery队列实现根据输入数量显示的动画

    这篇文章给大家演示了如何利用Jquery队列实现输入不同的数量就显示不同的动画效果,文中给出了实例,让大家更容易理解,有需要的可以参考借鉴。
    2016-09-09
  • jQuery的text()方法用法分析

    jQuery的text()方法用法分析

    这篇文章主要介绍了jQuery的text()方法用法,以实例形式详细分析了jQuery的text()方法的定义、参数与具体用法,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • Jquery基础教程之DOM操作

    Jquery基础教程之DOM操作

    大家都知道dom是一种与浏览器、平台、语言无关的接口,使用dom接口可以很轻松访问页面中所有的标准组件,本篇文章主要给大家讲解jquery基础教程之dom操作,有需要的朋友可以参考下
    2015-08-08

最新评论