基于jquery實(shí)現(xiàn)一張圖片點(diǎn)擊鼠標(biāo)放大再點(diǎn)縮小
更新時(shí)間:2013年09月29日 16:17:06 作者:
一張圖片點(diǎn)擊鼠標(biāo)放大,再點(diǎn)縮小基于jquery1.8.3實(shí)現(xiàn),下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以參考下
復(fù)制代碼 代碼如下:
<!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>
您可能感興趣的文章:
相關(guān)文章
jquery監(jiān)聽div內(nèi)容的變化具體實(shí)現(xiàn)思路
在開發(fā)過程中遇到了上面標(biāo)題列出的問題:如何監(jiān)聽div內(nèi)容的變化,下面是具體的解決思路,感興趣的朋友可以參考下2013-11-11jQuery插件實(shí)現(xiàn)表格隔行換色且感應(yīng)鼠標(biāo)高亮行變色
實(shí)現(xiàn)表格隔行換色,且感應(yīng)鼠標(biāo)行變色的方法有很多,在本文將為大家介紹的是使用jQuery插件來實(shí)現(xiàn),具體如下,感興趣的朋友可以練練手2013-09-09基于jQuery選擇器之表單對(duì)象屬性篩選選擇器的實(shí)例
下面小編就為大家?guī)硪黄猨Query選擇器之表單對(duì)象屬性篩選選擇器實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09在jQuery ajax中按鈕button和submit的區(qū)別分析
昨天在使用jQuery ajax的post方法進(jìn)行頁面?zhèn)髦?,無刷新獲取數(shù)據(jù)展示,弄了半天就是沒有效果,看了半天也沒有語法錯(cuò)誤,最后才終于明白問題出在哪里2012-10-10jQuery用unbind方法去掉hover事件及其他方法介紹
jquery怎么去掉hover以為直接unbind(hover)就可以搞定,結(jié)果很失敗,接下來介紹下取消hover事件的多種方法,感興趣的你可以參考下哈2013-03-03BootStrap網(wǎng)頁中代碼顯示<code><pre>用法詳解
網(wǎng)頁中代碼的顯示,包括行中代碼顯示;成段的代碼顯示.本文給大家介紹bootstrap網(wǎng)頁中代碼顯示<code><pre>用法詳解,感興趣的朋友一起看看吧2016-10-10jQuery實(shí)現(xiàn)鼠標(biāo)選文字發(fā)新浪微博的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)選文字發(fā)新浪微博的方法,涉及jQuery鼠標(biāo)事件的響應(yīng)及新浪接口的調(diào)用技巧,非常簡單實(shí)用的功能,需要的朋友可以參考下2016-04-04