jQuery實現(xiàn)類似淘寶網(wǎng)圖片放大效果的方法

更新時間：2015年07月08日 15:59:57 作者：沉淀歲月

這篇文章主要介紹了jQuery實現(xiàn)類似淘寶網(wǎng)圖片放大效果的方法,實例分析了jquery實現(xiàn)圖片放大效果的方法,涉及jquery操作鼠標(biāo)事件及頁面元素屬性修改的相關(guān)技巧,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)類似淘寶網(wǎng)圖片放大效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>類似淘寶網(wǎng)的圖片放大代碼</title>
<script type="text/javascript" src="js/jquery1.3.2.js"></script>
<style type="text/css">
#tip {position:absolute;color:#333;display:none;}
#tip s {position:absolute;top:40px;left:-20px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:transparent #BBA transparent transparent;border-style:dashed solid dashed dashed;border-width:10px;}
#tip s i {position:absolute;top:-10px;left:-8px;display:block;width:0px;height:0px;font-size:0px;line-height:0px;border-color:transparent #fff transparent transparent;border-style:dashed solid dashed dashed;border-width:10px;}
#tip .t_box {position:relative;background-color:#CCC;filter:alpha(opacity=50);-moz-opacity:0.5;bottom:-3px;right:-3px;}
#tip .t_box div {position:relative;background-color:#FFF;border:1px solid #ACA899;background:#FFF;padding:1px;top:-3px;left:-3px;}
.tip {width:82px;height:82px;border:1px solid #DDD;}
</style>
<script type="text/javascript">
$(function(){
  $('.tip').mouseover(function(){
   var $tip=$('<div id="tip"><div class="t_box"><div><s><i></i></s><img src="'+this.src+'" /></div></div></div>');
   $('body').append($tip);
   $('#tip').show('fast');
  }).mouseout(function(){
   $('#tip').remove();
  }).mousemove(function(e){
   $('#tip').css({"top":(e.pageY-60)+"px","left":(e.pageX+30)+"px"})
  })
})
</script>
<p> </p>
<a href="/"><img class="tip" src="/jscss/demoimg/201012/1.jpg" /></a>
<a href="#"><img class="tip" src="/jscss/demoimg/201012/2.jpg" /></a>
<a href="#" ><img class="tip" src="/jscss/demoimg/201012/3.jpg" /></a>

希望本文所述對大家的jquery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

JQuery頁面隨滾動條動態(tài)加載效果的簡單實現(xiàn)(推薦)
下面小編就為大家?guī)硪黄狫Query頁面隨滾動條動態(tài)加載效果的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
jquery實現(xiàn)靜態(tài)搜索功能(可輸入搜索文字)
本文主要介紹了jquery實現(xiàn)靜態(tài)搜索功能的示例代碼，可通過輸入搜索文字進(jìn)行篩選信息。具有很好的參考價值，下面跟著小編一起來看下吧
2017-03-03
jQuery Layer彈出層傳值到父頁面的實現(xiàn)代碼
這篇文章主要介紹了jQuery Layer彈出層傳值到父頁面的實現(xiàn)代碼,需要的朋友可以參考下
2017-08-08
關(guān)于用Jquery的height()、width()計算動態(tài)插入的IMG標(biāo)簽的寬高的問題
關(guān)于用Jquery的height()、width()計算動態(tài)插入的IMG標(biāo)簽的寬高的問題的解決方法，需要的朋友可以參考下。
2010-12-12
jQuery實現(xiàn)鼠標(biāo)滑過遮罩并高亮顯示效果
本文為大家詳細(xì)介紹下使用jQuery實現(xiàn)鼠標(biāo)滑過遮罩高亮顯示效果，想必這種效果在網(wǎng)上大家都有見到過，下面是具體的示例，感興趣的各位可以參考下哈，希望對大家有所幫助
2013-07-07
jQuery插件HighCharts繪制簡單2D柱狀圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts繪制簡單2D柱狀圖效果,結(jié)合完整實例形式分析了jQuery使用HighCharts插件繪制2D柱狀圖的實現(xiàn)步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
jQuery修改DOM結(jié)構(gòu)_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了jQuery修改DOM結(jié)構(gòu)的相關(guān)知識，需要的的朋友參考下吧
2017-07-07
jquery隊列queue與原生模仿其實現(xiàn)方法分享
jquery中的queue和dequeue是一組很有用的方法，他們對于一系列需要按次序運行的函數(shù)特別有用。特別animate動畫，ajax，以及timeout等需要一定時間的函數(shù)
2014-03-03
jQuery Raty 一款不錯的星級評分插件
一款不錯的星級評分插件，這篇文章主要介紹了jQuery Raty星級評分插件，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-08-08
解析頁面加載與js函數(shù)的執(zhí)行 onload or ready
這篇文章主要介紹了頁面加載與js函數(shù)的執(zhí)行 onload or ready 需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12