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