基于jquery實(shí)現(xiàn)一張圖片點(diǎn)擊鼠標(biāo)放大再點(diǎn)縮小
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.8.3.min.js"></script>
<script>
var isopen = false;
var newImg;
var w = 200; //將圖片寬度+200
var h = 200; // 將圖片高度 +200
$(document).ready(function(){
$("img").bind("click", function(){
newImg = this;
if (!isopen)
{
isopen = true;
$(this).width($(this).width() + w);
$(this).height($(this).height() + h);
moveImg(10, 10);
}
else
{
isopen = false;
$(this).width($(this).width() - w);
$(this).height($(this).height() - h);
moveImg(-10, -10);
}
});
});
//移位
i = 0;
function moveImg(left,top)
{
var offset = $(newImg).offset();
$(newImg).offset({ top: offset.top + top, left: offset.left + left});
if (i == 10)
{
i =0;
return;
}
setTimeout("moveImg("+left+","+top+")", 10);
i++;
}
</script>
</head>
<body>
<div id="imgBox" style="width:100px; height:100px; background:#cccccc">
<img id="img1" style="width:100px;height:100px; " alt="" src="photos/image1.jpg" />
</div>
</div>
</body>
</html>
- 基于jQuery仿淘寶產(chǎn)品圖片放大鏡特效
- 基于jQuery仿淘寶產(chǎn)品圖片放大鏡代碼分享
- jQuery實(shí)現(xiàn)類(lèi)似淘寶網(wǎng)圖片放大效果的方法
- 基于Jquery插件開(kāi)發(fā)之圖片放大鏡效果(仿淘寶)
- 用JQuery模仿淘寶的圖片放大鏡顯示效果
- jQuery實(shí)現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁(yè)面布局
- jQuery當(dāng)鼠標(biāo)懸停時(shí)放大圖片的效果實(shí)例
- jQuery插件zoom實(shí)現(xiàn)圖片全屏放大彈出層特效
- jquery實(shí)現(xiàn)淘寶商品圖片局部放大
相關(guān)文章
jQuery中可見(jiàn)性過(guò)濾器簡(jiǎn)單用法示例
這篇文章主要介紹了jQuery中可見(jiàn)性過(guò)濾器簡(jiǎn)單用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了jQuery中可見(jiàn)性過(guò)濾器的原理及相關(guān)使用技巧,需要的朋友可以參考下2018-03-03
jquery監(jiān)聽(tīng)div內(nèi)容的變化具體實(shí)現(xiàn)思路
在開(kāi)發(fā)過(guò)程中遇到了上面標(biāo)題列出的問(wèn)題:如何監(jiān)聽(tīng)div內(nèi)容的變化,下面是具體的解決思路,感興趣的朋友可以參考下2013-11-11
jQuery插件實(shí)現(xiàn)表格隔行換色且感應(yīng)鼠標(biāo)高亮行變色
實(shí)現(xiàn)表格隔行換色,且感應(yīng)鼠標(biāo)行變色的方法有很多,在本文將為大家介紹的是使用jQuery插件來(lái)實(shí)現(xiàn),具體如下,感興趣的朋友可以練練手2013-09-09
基于jQuery選擇器之表單對(duì)象屬性篩選選擇器的實(shí)例
下面小編就為大家?guī)?lái)一篇jQuery選擇器之表單對(duì)象屬性篩選選擇器實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
JQuery調(diào)用綁定click事件的3種寫(xiě)法
這篇文章主要介紹了JQuery調(diào)用綁定click事件的3種寫(xiě)法,本文簡(jiǎn)潔清晰的給出3種寫(xiě)法的代碼示例,可以很方便的復(fù)制使用,需要的朋友可以參考下2015-03-03
在jQuery ajax中按鈕button和submit的區(qū)別分析
昨天在使用jQuery ajax的post方法進(jìn)行頁(yè)面?zhèn)髦担瑹o(wú)刷新獲取數(shù)據(jù)展示,弄了半天就是沒(méi)有效果,看了半天也沒(méi)有語(yǔ)法錯(cuò)誤,最后才終于明白問(wèn)題出在哪里2012-10-10
jQuery用unbind方法去掉hover事件及其他方法介紹
jquery怎么去掉hover以為直接unbind(hover)就可以搞定,結(jié)果很失敗,接下來(lái)介紹下取消hover事件的多種方法,感興趣的你可以參考下哈2013-03-03
BootStrap網(wǎng)頁(yè)中代碼顯示<code><pre>用法詳解
網(wǎng)頁(yè)中代碼的顯示,包括行中代碼顯示;成段的代碼顯示.本文給大家介紹bootstrap網(wǎng)頁(yè)中代碼顯示<code><pre>用法詳解,感興趣的朋友一起看看吧2016-10-10
jQuery實(shí)現(xiàn)鼠標(biāo)選文字發(fā)新浪微博的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)選文字發(fā)新浪微博的方法,涉及jQuery鼠標(biāo)事件的響應(yīng)及新浪接口的調(diào)用技巧,非常簡(jiǎn)單實(shí)用的功能,需要的朋友可以參考下2016-04-04

