基于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 相关文章推荐
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
基于MooTools的很有创意的滚动条时钟动画
Nov 14 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
使用js实现雪花飘落效果
Aug 26 Javascript
jquery更换文章内容与改变字体大小代码
Sep 30 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
Feb 02 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
Jun 17 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 Javascript
Vue自定义全局Toast和Loading的实例详解
Apr 18 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
PHP设计模式之调解者模式的深入解析
2013/06/13 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
js返回顶部实例分享
2016/12/21 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
vue基于Vue2.0和高德地图的地图组件实例
2017/04/28 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
2020/10/18 Javascript
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
python文本数据处理学习笔记详解
2019/06/17 Python
Flask框架搭建虚拟环境的步骤分析
2019/12/21 Python
python实现猜拳游戏
2020/03/04 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
淘宝客服专员岗位职责
2014/04/11 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
市场营销专业求职信
2014/06/17 职场文书
违反交通法规检讨书
2014/09/10 职场文书
现实表现证明材料
2015/06/19 职场文书
2016新年年会主持词
2015/07/06 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server