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跨域刷新实现代码
Jan 01 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 Javascript
vue实现修改图片后实时更新
Nov 14 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的历史和优缺点
2006/10/09 PHP
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
js修改input的type属性问题探讨
2013/10/12 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
JQuery做的一个简单的点灯游戏分享
2014/07/16 Javascript
深入分析下javascript中的[]()+!
2015/07/07 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
Python实现Linux中的du命令
2017/06/12 Python
python输入错误密码用户锁定实现方法
2017/11/27 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
理论讲解python多进程并发编程
2018/02/09 Python
Python多线程原理与用法详解
2018/08/20 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
python的debug实用工具 pdb详解
2019/07/12 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
python-地图可视化组件folium的操作
2020/12/14 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
2019史上最全Database工程师题库
2015/12/06 面试题
大学生毕业求职的自我评价
2013/09/29 职场文书
公司开业庆典主持词
2014/03/21 职场文书
团代会主持词
2014/04/02 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2014年质检工作总结
2014/11/26 职场文书
Nginx安装完成没有生成sbin目录的解决方法
2021/03/31 Servers
Linux、ubuntu系统下查看显卡型号、显卡信息详解
2022/04/07 Servers