新知識點：

　在HTML-Dom中 "style"?屬性，是所有HTML標簽共有的一個對象屬性，這個對象屬性可以為元素設置內嵌樣式。

??style是元素的屬性，但是它自身則是一個對象，其寫法主要有兩點：

　　·?如果CSS樣式沒有中劃線，則可以直接寫成:

Element.style.attributeName

?　? · 如果CSS樣式是有中劃線的，則寫成：

Element.style.attributeName //中劃線之后的屬性首字母要大寫

?

代碼：

　　HTML：

<ul class="clearfix"><li class="fl"><img src="xiaojiao.jpg" alt="" width="360" height="270"></li><li class="fl"><img src="boluo.jpg" alt="" width="360" height="270"></li><li class="fl"><img src="taozi.jpg" alt="" width="360" height="270"></li><li class="fl"><img src="mangguo.jpg" alt="" width="360" height="270"></li></ul>

　　CSS:

*{margin:0px;padding:0px;list-style:none;} .clearfix:after{display:block;line-height:0;height:0;font-size:0;content:'';clear:both;} .clearfix{*zoom:1;} .fl,.fr{display:inline;} .fl{float:left;} .fr{float:right;} .hide{display:none;}/* Style -Content- */ body,html{width: 100%;height: 100%;overflow:hidden;} ul li{width: 360px;height: 270px;cursor:pointer;}

　　Jquery：

$(function(){$('ul li').mouseover(function(event){var imgSource = $(this).find('img').get(0)var Odiv = document.createElement('div');var Oimg = document.createElement('img');Oimg.src=imgSource.src;Oimg.alt=imgSource.alt;Odiv.id="Odiv"Odiv.style.verticalAlign="bottom";Odiv.style.position="absolute";Odiv.style.left=event.pageX+5+'px';Odiv.style.top=event.pageY+5+'px';Odiv.appendChild(Oimg)document.body.appendChild(Odiv);}).mouseout(function(){document.body.removeChild(document.getElementById('Odiv'));}).mousemove(function(event){var Odiv = document.getElementById('Odiv');Odiv.style.left=event.pageX+5+'px';Odiv.style.top=event.pageY+5+'px';})})

?

　　

?

轉載于:https://www.cnblogs.com/HCJJ/p/4803774.html

總結

以上是生活随笔為你收集整理的[锋利JQ]-图片提示效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。