编程 Javascript

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

Posted in Javascript onSeptember 16, 2013

<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实现div阴影效果示例代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

浅谈javascript 面向对象编程

Oct 28 Javascript

扩展easyui.datagrid，添加数据loading遮罩效果代码

Nov 02 Javascript

初窥JQuery(二) 事件机制(1)

Nov 25 Javascript

JS按位非(~)运算符与~~运算符的理解分析

Jul 31 Javascript

JS判断表单输入是否为空(示例代码)

Dec 23 Javascript

IE浏览器IFrame对象内存不释放问题解决方法

Aug 22 Javascript

基于Jquery+div+css实现弹出登录窗口(代码超简单)

Oct 27 Javascript

jQuery实现邮箱下拉列表自动补全功能

Sep 08 Javascript

Jquery EasyUI $.Parser

Jun 02 jQuery

js异步上传多张图片插件的使用方法

Oct 22 Javascript

React学习之JSX与react事件实例分析

Jan 06 Javascript

Vue中fragment.js使用方法小结

Feb 17 Javascript

使用ImageMagick进行图片缩放、合成与裁剪(js+python)

Sep 16 #Javascript

document.documentElement和document.body区别介绍

Sep 16 #Javascript

使用js在页面中绘制表格核心代码

Sep 16 #Javascript

Function.prototype.bind用法示例

Sep 16 #Javascript

javascript简单事件处理和with用法介绍

Sep 16 #Javascript

js的.innerHTML = ""IE9下显示有错误的解决方法

Sep 16 #Javascript

js window.print实现打印特定控件或内容

Sep 16 #Javascript