基于Jquery的仿照flash放大图片效果代码


Posted in Javascript onMarch 16, 2011

Html:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 
<link rel="stylesheet" type="text/css" href="css/zoomer.css" media="screen" /> 
<title>Zoomer for jQuery</title> 
<style type="text/css"> 
body { 
font: Arial, Helvetica, sans-serif normal 10px; 
margin: 0; padding: 0; 
} 
* {margin: 0; padding: 0;} 
#page{ 
margin:0 auto; 
position:relative; 
width:850px; 
font-family:verdana; 
font-size:12px; 
} 
#content{ 
width:100%; 
} 
pre{ 
border:3px solid #ccc; 
padding:5px; 
font-size:12px; 
font-family:arial; 
} 
.bold{font-weight:bold;} 
.blue{color:blue;} 
.red{color:red;} 
#footer{ 
margin-top:5px; 
text-align:center; 
width:100%; 
height:auto; 
padding:5px; 
background-color:#ccc; 
} 
#logo,#foot { margin-left: 10px; } 
</style> 
</head> 
<body> 
<div id="page"> 
<div id="content"> 
<div class="container"> 
<ul class="thumb"> 
<li><a href="#"><img src="imgs/robots.jpg" alt="Robots like cameras" /></a></li> 
<li><a href="#"><img src="imgs/monster.jpg" alt="Monsters!" /></a></li> 
<li><a href="#"><img src="imgs/santa.jpg" alt="Santa down under" /></a></li> 
<li><a href="#"><img src="imgs/thumb6.jpg" alt="Sponguebob!" /></a></li> 
<li><a href="#"><img src="imgs/thumb7.jpg" alt="Star Wars" /></a></li> 
<li><a href="#"><img src="imgs/hulk.jpg" alt="Hulk Smash!" /></a></li> 
<li><a href="#"><img src="imgs/dino.png" alt="Dinosaur time" /></a></li> 
<li><a href="#"><img src="imgs/orange.jpg" alt="Orange car" /></a></li> 
<li><a href="#"><img src="imgs/alien.jpg" alt="Aliens!" /></a></li> 
<li><a href="#"><img src="imgs/supe.jpg" alt="It's Superman!" /></a></li> 
<li><a href="#"><img src="imgs/garfield.jpg" alt="Where's my lasagne?" /></a></li> 
<li><a href="#"><img src="imgs/bridge.jpg" alt="The bridge at Sunset" /></a></li> 
<li><a href="#"><img src="imgs/peanuts.jpg" alt="Peanuts!" /></a></li> 
<li><a href="#"><img src="imgs/thumb5.jpg" alt="1956 Yellow Car" /></a></li> 
<li><a href="#"><img src="imgs/thumb4.jpg" alt="Ooooh. Pretty" /></a></li> 
<li><a href="#"><img src="imgs/thumb3.jpg" alt="Lets build something" /></a></li> 
<li><a href="#"><img src="imgs/thumb2.jpg" alt="Puppy love" /></a></li> 
<li><a href="#"><img src="imgs/thumb1.jpg" alt="It's a Toy Story" /></a></li> 
</ul> 
</div> 
</div> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript" src="js/zoomer.js"></script> 
<script type="text/javascript"> 
$(document).ready(function () { 
$('ul.thumb li').Zoomer({ speedView: 200, speedRemove: 400, altAnim: true, speedTitle: 400, debug: false }); 
}); 
</script> 
</body> 
</html>

css:
ul.thumb {float: left;list-style: none;margin: 0; padding: 10px;width: 800px;background-color: white;} 
ul.thumb li {margin: 0; padding: 5px;float: left;position: relative;width: 110px;height: 110px;} 
ul.thumb li img {width: 100px; height: 100px;border: 1px solid #ddd;padding: 5px;background: #f0f0f0;position: absolute;left: 0; top: 0;-ms-interpolation-mode: bicubic; } 
ul.thumb li img.hover {margin-top:15px;background:url(../imgs/thumb_bg.png) no-repeat center center;border: none;} 
.title{position:absolute;width:185px;height:35px;margin:0;font-weight:900;background:url(../imgs/blue.png) no-repeat center center;padding:17px 0 0 0;text-align:center; color: #fff; }

js:
(function ($) { 
$.fn.Zoomer = function (b) { 
var c = $.extend({ speedView: 200, speedRemove: 400, altAnim: false, speedTitle: 400, debug: false }, b); 
var d = $.extend(c, b); 
function e(s) { 
if (typeof console != "undefined" && typeof console.debug != "undefined") 
{ console.log(s) } else { alert(s) } 
} 
if (d.speedView == undefined || d.speedRemove == undefined || d.altAnim == undefined || d.speedTitle == undefined) { 
e('speedView: ' + d.speedView); 
e('speedRemove: ' + d.speedRemove); 
e('altAnim: ' + d.altAnim); 
e('speedTitle: ' + d.speedTitle); 
return false 
} 
if (d.debug == undefined) { 
e('speedView: ' + d.speedView); 
e('speedRemove: ' + d.speedRemove); 
e('altAnim: ' + d.altAnim); 
e('speedTitle: ' + d.speedTitle); 
return false 
} 
if (typeof d.speedView != "undefined" || typeof d.speedRemove != "undefined" || typeof d.altAnim != "undefined" || typeof d.speedTitle != "undefined") { 
if (d.debug == true) { 
e('speedView: ' + d.speedView); 
e('speedRemove: ' + d.speedRemove); 
e('altAnim: ' + d.altAnim); 
e('speedTitle: ' + d.speedTitle) 
} 
$(this).hover(function () { 
$(this).css({ 'z-index': '10' }); 
$(this).find('img').addClass("hover").stop().animate({ marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '175px', height: '181px', padding: '20px' }, d.speedView); 
if (d.altAnim == true) { 
var a = $(this).find("img").attr("alt"); if (a.length != 0) { 
$(this).prepend('<span class="title">' + a + '</span>'); 
$('.title').animate({ marginLeft: '-42px', marginTop: '90px' }, d.speedTitle).css({ 'z-index': '10', 'position': 'absolute', 'float': 'left' }) 
} 
} 
}, function () { 
$(this).css({ 'z-index': '0' }); 
$(this).find('img').removeClass("hover").stop().animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', height: '100px', padding: '5px' }, d.speedRemove); 
$(this).find('.title').remove() 
}) 
} 
} 
})(jQuery);

在线演示:http://demo.3water.com/js/2011/ZoomerforjQuery/
Javascript 相关文章推荐
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
VUE axios上传图片到七牛的实例代码
Jul 28 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
javascript之Object.assign()的痛点分析
Mar 03 Javascript
jQuery前台数据获取实现代码
Mar 16 #Javascript
最短的IE判断代码
Mar 13 #Javascript
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 #Javascript
js中巧用cssText属性批量操作样式
Mar 13 #Javascript
js中获取事件对象的方法小结
Mar 13 #Javascript
js中关于new Object时传参的一些细节分析
Mar 13 #Javascript
重载toString实现JS HashMap分析
Mar 13 #Javascript
You might like
解析php时间戳与日期的转换
2013/06/06 PHP
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
如何用javascript去掉字符串里的所有空格
2007/02/08 Javascript
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
JS解密入门 最终变量劫持
2008/06/25 Javascript
jquery键盘事件介绍
2011/01/31 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
详解js中的几种常用设计模式
2020/07/16 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
Python中一行和多行import模块问题
2018/04/01 Python
wxPython的安装与使用教程
2018/08/31 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
pandas删除行删除列增加行增加列的实现
2019/07/06 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
python中如何打包用户自定义模块
2020/09/23 Python
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
学校安全工作汇报材料
2014/08/16 职场文书
辣妈辣妹观后感
2015/06/10 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
个人合作协议范本
2015/08/06 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
详解Redis主从复制实践
2021/05/19 Redis