jquery插件實(shí)現(xiàn)圖片懸浮
更新時(shí)間：2021年04月15日 17:35:05 作者：阿飛超努力
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)圖片懸浮，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jquery插件實(shí)現(xiàn)圖片懸浮的具體代碼，供大家參考，具體內(nèi)容如下
很常見的一個(gè)效果，就是點(diǎn)擊之后圖片懸浮出來展示
效果如下
代碼部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>做圖片懸浮</title>
<script src="js/jquery-3.4.1.min.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
user-select: none;
}
ul {
margin-left: 20px;
}
ul li{
width: 200px;
}
li img {
width: 100%;
}
.float{
position: fixed;
top: 10%;
left: 10%;
width: 80%;
list-style: none;
z-index: 99;
}
.float::before{
content: '';
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 98;
}
</style>
</head>
<body>
<ul>
<li class="li"><img src="img/1.png" /></li>
<li class="li"><img src="img/2.png" /></li>
<li class="li"><img src="img/3.png" /></li>
<li class="li"><img src="img/4.png" /></li>
</ul>
</body>
</html>
<script>
$(".li").click(function() {
$(this).toggleClass('float')
})
</script>
思路解釋
就是從一個(gè)狀態(tài)變道另外一個(gè)狀態(tài)，給予和拿走一個(gè)類的事。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
jquery驗(yàn)證手機(jī)號(hào)碼、郵箱格式是否正確示例代碼
本文為大家介紹下使用jquery驗(yàn)證郵箱、驗(yàn)證手機(jī)號(hào)碼，具體實(shí)現(xiàn)思路及代碼如下，感興趣的朋友可以學(xué)習(xí)下2013-07-07
jquery實(shí)現(xiàn)多屏多圖焦點(diǎn)圖切換特效的方法
這篇文章主要介紹了jquery實(shí)現(xiàn)多屏多圖焦點(diǎn)圖切換特效的方法,涉及jQuery插件jquery.kinMaxShow實(shí)現(xiàn)焦點(diǎn)圖的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
jQuery查找節(jié)點(diǎn)方法完整實(shí)例
這篇文章主要介紹了jQuery查找節(jié)點(diǎn)方法,結(jié)合完整實(shí)例形式分析了jQuery針對(duì)DOM節(jié)點(diǎn)屬性的相關(guān)操作技巧,需要的朋友可以參考下2016-09-09
cssQuery()的下載與使用方法...2007-01-01
jQuery實(shí)現(xiàn)鼠標(biāo)跟隨效果
本文主要分享了jQuery實(shí)現(xiàn)鼠標(biāo)跟隨效果的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
jQuery實(shí)現(xiàn)頁面下拉100像素出現(xiàn)懸浮窗口的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)頁面下拉100像素出現(xiàn)懸浮窗口的方法,涉及jQuery事件監(jiān)聽及針對(duì)頁面元素的判定與動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-09-09
jQuery簡(jiǎn)單實(shí)現(xiàn)日歷的方法
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)日歷的方法,涉及jQuery操作日期的相關(guān)技巧,比較簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-05-05
本篇文章主要是對(duì)jquery中l(wèi)ive()重復(fù)綁定的解決方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
Jquery EasyUI Datagrid右鍵菜單實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Jquery EasyUI Datagrid右鍵菜單的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
IE中jquery.form中ajax提交沒反應(yīng)解決方法分享
用jquery form插件，進(jìn)行ajax提交，本來可以用，好好地，突然發(fā)現(xiàn)，firefox，opera等可以提交，ie的success函數(shù)運(yùn)行了2012-09-09