基于jquery实现一张图片点击鼠标放大再点缩小


Posted in Javascript onSeptember 29, 2013
<!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>
Javascript 相关文章推荐
获取HTML DOM节点元素的方法的总结
Aug 21 Javascript
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
Jun 29 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
JS简单获取当前年月日星期的方法示例
Feb 07 Javascript
javascript实现下雨效果
Mar 27 Javascript
JavaScript实现分页效果
Mar 28 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
Vue源码学习之初始化模块init.js解析
Nov 02 Javascript
小程序实现列表倒计时功能
Jan 29 Javascript
从原生JavaScript到React深入理解
Jul 23 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 #Javascript
jquery事件与函数的使用介绍
Sep 29 #Javascript
Jquery选中或取消radio示例
Sep 29 #Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 #Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 #Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 #Javascript
从jquery的过滤器.filter()方法想到的
Sep 29 #Javascript
You might like
第六节 访问属性和方法 [6]
2006/10/09 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
php使用正则表达式去掉html中的注释方法
2016/11/03 PHP
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
Angular2.js实现表单验证详解
2017/06/23 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
Angular实现的table表格排序功能完整示例
2017/12/22 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
Python中time模块和datetime模块的用法示例
2016/02/28 Python
探究python中open函数的使用
2016/03/01 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Python 多核并行计算的示例代码
2017/11/07 Python
python 读写文件,按行修改文件的方法
2018/07/12 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
python3多线程知识点总结
2019/09/26 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
优秀护士获奖感言
2014/02/20 职场文书
职务聘任书范文
2014/03/29 职场文书
《会走路的树》教后反思
2014/04/19 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
故意伤害辩护词
2015/05/21 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
JS + HTML 罗盘式时钟的实现
2021/05/21 Javascript
Javascript的promise,async和await的区别详解
2022/03/24 Javascript