JQuery實現(xiàn)鼠標移動到圖片上顯示邊框效果
更新時間：2014年01月09日 17:07:58 作者：
鼠標移動到圖片顯示邊框效果在瀏覽網(wǎng)頁的時候，大家也都見過，接下來使用jquery來實現(xiàn)這個功能，喜歡的朋友可以參考下
復制代碼 代碼如下:
以下為程序代碼：<!DOCTYPE html/>
<head>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".v").mouseover(function() {
var x = $("<div class='vs'></div>");
x.appendTo($('body'));
x.css({
width : $(this).width() - 6,
height : $(this).height() - 6,
left : $(this).offset().left,
top : $(this).offset().top
});
$($.browser.msie ? this : x).mouseout(function(){
x.remove();
});
});
});
</script>
<style>
.vs {z-index:1000;position:absolute;border:3px solid red;}
</style>
</head>
<body>
<a href="#"><img src="http://img2.bdstatic.com/img/image/774730e0cf3d7ca7bcb7a7b223ebc096b63f624a89b.jpg" border="0" class="v" /></a>
<a href="#"><img src="http://img2.bdstatic.com/img/image/774730e0cf3d7ca7bcb7a7b223ebc096b63f624a89b.jpg" border="0" /></a>
<a href="#"><img src="http://img2.bdstatic.com/img/image/774730e0cf3d7ca7bcb7a7b223ebc096b63f624a89b.jpg" border="0" class="v" /></a>
</body>
</html>
點擊查看演示：http://biyuan.tk/u/upload/201311131123292656.html
相關(guān)文章
今天公司要求實現(xiàn)浮動窗口效果，自己看了不少資料終于實現(xiàn)此效果。用jQ實現(xiàn)浮動窗口功能,彈出窗口時背景變暗.2010-09-09
jqPagination 是一個簡單易用的輕量級 jQuery分頁插件，其使用了 HTML5 和 CSS3 技術(shù)來實現(xiàn)。此插件提供了幾個參數(shù)設(shè)置選項，通過簡單的配置即可生成分頁控件。此外，它的外觀樣式是可自定義的，擴展性很強。2014-06-06
據(jù)統(tǒng)計，全世界排名前100萬的網(wǎng)站，有46%使用jQuery，遠遠超過其他庫。微軟公司甚至把jQuery作為他們的官方庫。2011-08-08
下面小編就為大家?guī)硪黄猨query實現(xiàn)一個簡單的表單驗證實例。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-03-03
Jquery使用Firefox FireBug插件調(diào)試Ajax步驟講解
本文介紹Jquery下的Ajax調(diào)試方法,Jquery Ajax 提供了全功能的 $.ajax() 方法，還有諸如 $.get()，$.getScript()，$.getJSON()，$.post() 和 $().load() 等更為簡便的方法2013-12-12
jQuery實現(xiàn)的粘性滾動導航欄效果實例【附源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)的粘性滾動導航欄效果,涉及jQuery插件smint的相關(guān)使用技巧,并附帶完整實例源碼供讀者下載參考,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了jQuery ajax分頁插件實例代碼的相關(guān)資料，本文介紹的非常詳細，具有參考借鑒價值，特此分享供大家學習2016-01-01
這篇文章主要為大家詳細介紹了jquery樹形插件zTree高級使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
現(xiàn)在講一下幾個比較經(jīng)典，而且比較常用的 jQuery 技巧，相信你能舉一反三。2010-03-03
快速學習jQuery插件 jquery.validate.js表單驗證插件使用方法
快速學習jQuery插件中的jquery.validate.js表單驗證插件使用方法，Validation是歷史最悠久的jQuery插件之一，經(jīng)過了全球范圍內(nèi)不同項目的驗證，并得到了許多Web開發(fā)者的好評，感興趣的小伙伴們可以參考一下2015-12-12