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可突破windows弹退效果代码
Aug 09 Javascript
javascript一些不错的函数脚本代码
Sep 10 Javascript
javascript 写类方式之六
Jul 05 Javascript
javascript之学会吝啬 精简代码
Apr 25 Javascript
JQuery 操作select标签实现代码
May 14 Javascript
jQuery的deferred对象使用详解
Aug 20 Javascript
jQuery中remove()方法用法实例
Dec 25 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
自己动手封装一个React Native多级联动
Sep 19 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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
JS实现php的伪分页
2008/05/25 PHP
PHP安全防范技巧分享
2011/11/03 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
javascript textarea光标定位方法(兼容IE和FF)
2011/03/12 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
深入理解Angular2 模板语法
2016/08/07 Javascript
JavaScript函数节流的两种写法
2017/04/07 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
JavaScript实现三级级联特效
2017/11/05 Javascript
python检测服务器是否正常
2014/02/16 Python
Python解析xml中dom元素的方法
2015/03/12 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python多进程写入同一文件的方法
2019/01/14 Python
python selenium firefox使用详解
2019/02/26 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
捷克移动配件网上商店:ProMobily.cz
2019/03/15 全球购物
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
函授本科毕业自我鉴定
2013/10/09 职场文书
自我鉴定范文
2013/11/10 职场文书
机电一体化求职信
2014/03/10 职场文书
论文评语大全
2014/04/29 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
金砖之国观后感
2015/06/11 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
zabbix自定义监控nginx状态实现过程
2021/11/01 Servers
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js