快捷導(dǎo)航

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

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

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

本文實(shí)例講述了jQuery實(shí)現(xiàn)類似淘寶網(wǎng)圖片放大效果的方法。分享給大家供大家參考。具體實(shí)現(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>

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

您可能感興趣的文章:

相關(guān)文章

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