jquery實現(xiàn)div陰影效果示例代碼
更新時間：2013年09月16日 11:47:00 作者：
div陰影效果在以前都是采用圖片來實現(xiàn)的，而在本文大家將學(xué)會使用jquery來實現(xiàn)，感興趣的朋友可以參考下
復(fù)制代碼 代碼如下:
<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>
相關(guān)文章
簡單的按鈕js事件 用于判斷和顯示提示2011-05-05
Jquery幻燈片特效代碼分享?鼠標(biāo)點擊按鈕時切換(1)
這篇文章主要介紹了jQuery實現(xiàn)幻燈片焦點圖,可實現(xiàn)非常炫目時尚的幻燈片效果,非常具有實用價值,基本能滿足你在網(wǎng)頁上使用幻燈片(焦點圖)效果，需要的朋友可以參考下2015-08-08
分享十五款 jQuery 社交網(wǎng)絡(luò)分享插件
這篇文章主要介紹了分享十五款 jQuery 社交網(wǎng)絡(luò)分享插件,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了jQuery Chosen通用初始化,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
如何沒有任何一個庫可以滿足所有的需求，可以使用JQuery庫提供的擴展功能，下面有個示例，大家可以看看2014-09-09
jQuery EasyUI 是一個基于 jQuery 的框架，集成了各種用戶界面插件，該框架提供了創(chuàng)建網(wǎng)頁所需的一切，幫助您輕松建立站點。本文給大家介紹JQuery EasyUI的一些常用組件，感興趣的的朋友一起學(xué)習(xí)吧2017-07-07
jQuery實現(xiàn)form表單reset按鈕重置清空表單功能
有時候可能需要實現(xiàn)這樣的效果：使用ajax提交表單，成功提交表單之后清空表單,這種功能大家可能都希望實現(xiàn)吧，接下來為您詳細(xì)介紹，需要了解的朋友參考下2012-12-12
jquery動態(tài)調(diào)整div大小使其寬度始終為瀏覽器寬度
需要設(shè)置寬度為整個瀏覽器寬度的div，當(dāng)然我們可以使用相對布局的方式做到這一點，下面是具體實現(xiàn)，大家可以參考下2014-06-06
jquery validate 實現(xiàn)動態(tài)增加/刪除驗證規(guī)則操作示例
這篇文章主要介紹了jquery validate 實現(xiàn)動態(tài)增加/刪除驗證規(guī)則操作,結(jié)合實例形式分析了jQuery validate表單驗證相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
詳細(xì)介紹jQuery.outerWidth() 函數(shù)具體用法
這篇文章通過jQuery示例代碼演示outerWidth()函數(shù)的具體用法，介紹的非常詳細(xì)，有需要的朋友可以借鑒2015-07-07