基于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 相关文章推荐
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
UI Events 用户界面事件
Jun 27 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
Angular CLI在Angular项目中如何使用scss详解
Apr 10 Javascript
ES6关于Promise的用法详解
May 07 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
JS实现长图上下滚动效果
Mar 19 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 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
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
angular.foreach 循环方法使用指南
2015/01/06 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
2016/05/10 Javascript
聊一聊JS中的prototype
2016/09/29 Javascript
SVG描边动画
2017/02/23 Javascript
JS完成画圆圈的小球
2017/03/07 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
2020/07/11 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
详解python单例模式与metaclass
2016/01/15 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
哈工大自然语言处理工具箱之ltp在windows10下的安装使用教程
2020/05/07 Python
Python字典dict常用方法函数实例
2020/11/09 Python
python上下文管理器异常问题解决方法
2021/02/07 Python
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
局部内部类是否可以访问非final变量?
2013/04/20 面试题
人事主管岗位职责
2014/01/30 职场文书
模具设计与制造专业推荐信
2014/02/16 职场文书
写好自荐信需做到的5要点
2014/03/07 职场文书
考核评语大全
2014/04/29 职场文书
大学生志愿者活动总结
2014/06/27 职场文书
房产协议书范本
2014/10/18 职场文书
大学生创业计划书常用模板
2019/08/07 职场文书
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android