jQuery简易图片放大特效示例代码


Posted in Javascript onJune 09, 2014

DEMO点击圆形图片,图片方法,将水的图片放置与下层,鼠标移上去的时候,图片高与宽同比增大,并且图片向左上移动

代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script src="js/jquery.min.js" type="text/javascript"></script> 
<script> 
$(document).ready(function(e) { 
$(".water1").mouseover(function(){ 
$("#img1").stop(true,true).animate({top:"-32.5px",left:"-32.5px", width:"400px",height:"400px"},"slow"); 
$("#img2").stop(true,true).animate({top:"-10px",left:"-10px", width:"115px",height:"115px"},"slow"); 
$("#img3").stop(true,true).animate({top:"-4px",left:"-4px", width:"41px",height:"41px"},"slow"); 
}) 
$(".water1").mouseout(function(){ 
$("#img1").stop(true,true).animate({top:"0px",left:"0px",width:"335px",height:"335px"},"slow"); 
$("#img2").stop(true,true).animate({top:"0px",left:"0px", width:"95px",height:"95px"},"slow"); 
$("#img3").stop(true,true).animate({top:"0px",left:"0px", width:"33px",height:"33px"},"slow"); 
}) 
}); 
</script> 
<style> 
.show{ width:1440px; height:474px; position:relative; background-color:#3d9abc;} 
.water1{ height: 335px; width:335px; border-radius:167.5px; overflow:hidden; position:absolute; left:186px; top:69px;} 
.water2{ height: 95px; width:95px; border-radius:47.5px; overflow:hidden; position:absolute; left:545px; top:294px;} 
.water3{ height: 33px; width:33px; border-radius:16.5px; overflow:hidden; position:absolute; left:549px; top:220px;} 
#img1{ position:absolute;} 
#img2{ position:absolute; } 
#img3{ position:absolute;} 
</style> 
</head> 
<body> 
<div class="show"> 
<div class="water1"><img id="img1" src="images/big.jpg" /></div> 
<div class="water2"><img id="img2" src="images/middle.jpg" /></div> 
<div class="water3"><img id="img3" src="images/small.jpg" /></div> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
js 通过html()及text()方法获取并设置p标签的显示值
May 14 Javascript
Javascript实现快速排序(Quicksort)的算法详解
Sep 06 Javascript
js判断鼠标位置是否在某个div中的方法
Feb 26 Javascript
原生JS实现匀速图片轮播动画
Oct 18 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
vue项目中微信登录的实现操作
Sep 08 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 #Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
Jun 09 #Javascript
js利用prototype调用Array的slice方法示例
Jun 09 #Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 #Javascript
用box固定长宽实现图片自动轮播js代码
Jun 09 #Javascript
jQuery实现的Div窗口震动特效
Jun 09 #Javascript
js动态创建标签示例代码
Jun 09 #Javascript
You might like
解析PHP跨站刷票的实现代码
2013/06/18 PHP
php创建多级目录的方法
2015/03/24 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
PHP实现上传图片到 zimg 服务器
2016/10/19 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
JSQL 基于客户端的成绩统计实现方法
2010/05/05 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
判断数组是否包含某个元素的js函数实现方法
2016/05/19 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
微信小程序实现拖拽功能
2019/09/26 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python 递归函数详解及实例
2016/12/27 Python
Django如何配置mysql数据库
2018/05/04 Python
QML实现钟表效果
2020/06/02 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
土耳其风格手工珠宝:Ottoman Hands
2019/07/26 全球购物
幼儿园数学教学反思
2014/02/02 职场文书
建筑施工安全责任书
2014/07/24 职场文书
国庆节活动总结
2014/08/26 职场文书
学习教师法的心得体会
2014/09/03 职场文书
小学国庆节活动方案策划书
2014/09/16 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
放假通知格式
2015/04/14 职场文书
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers