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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
Javascript delete 引用类型对象
Nov 01 Javascript
js使用eval解析json(js中使用json)
Jan 17 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 Javascript
深入了解js原型模式
May 30 Javascript
angularjs请求数据的方法示例
Aug 06 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 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
服务器端解压缩zip的脚本
2006/12/22 PHP
php 连接mysql连接被重置的解决方法
2011/02/15 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
PHP动态柱状图实现方法
2015/03/30 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
获取鼠标在div中的相对位置的实现代码
2013/12/30 Javascript
JS获取计算机mac地址以及IP的实现方法
2014/01/08 Javascript
DIV始终居中的js代码
2014/02/17 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
jQuery向webApi提交post json数据
2017/01/16 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
深入解析Python中的集合类型操作符
2015/08/19 Python
Python实现的凯撒密码算法示例
2018/04/12 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
基于python实现从尾到头打印链表
2019/11/02 Python
Python如何用filter函数筛选数据
2020/03/05 Python
python dir函数快速掌握用法技巧
2020/12/09 Python
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
公司副总经理任命书
2014/06/05 职场文书
学校运动会报道稿
2014/09/23 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
公司保密管理制度
2015/08/04 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers