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

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.jb51.net/js/2011/ZoomerforjQuery/

赞 (0)

相关推荐

  • php+flash+jQuery多图片上传源码分享

    php+flash+jQuery多图片上传源码分享

    flash+php多图片上传的源码,测试成功,一个经典的上传源码,为什么要用flash作为上传的组件呢,其实这里不仅仅是flash,另加了jquery的技术,这样做的目的是为了更好更方便的管理图片,使用过QQ空间进行上传图片的童鞋都知道,QQ空间的上传体验度很好,而且管理我们上传的图片非常的方便,使用的技术基本上就是flash与jquery技术了. flash+jquery是作为前端图片上传展示的,还需要与php的结合才能将图片上传到指定的目标,这里的php一共有两个文件,一个upload.ph

  • jquery实现仿Flash的横向滑动菜单效果代码

    jquery实现仿Flash的横向滑动菜单效果代码

    本文实例讲述了jquery实现仿Flash的横向滑动菜单效果代码.分享给大家供大家参考.具体如下: 这是一个仿Flash的jquery滑动菜单,横向,延时效果明显,如果觉得延时太长的话,自己可以修改参数,通过这个菜单主要是想向大家掌握一些jQuery生成动画的技巧,同时这也是jquery强大功能的体现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-f-flash-style-move-menu-codes/ 具体代码如下: <!

  • jquery+easeing实现仿flash的载入动画

    jquery+easeing实现仿flash的载入动画

    去年面试过一家做网站的 公司,看了一下他们的案例,看懂一个蛮有意思的 ,一个房地产的官网,是用flash做的.感觉不错. 于是,闲暇之际,简单的jquery 模仿做了一下.下面是我的效果图.脚本也没啥优化,流畅度也没有flash流畅.但是重要的是看到这个flash,想到 如何实现它效果的思路,非常适合新手. 观察上诉,首先左侧是个载入动画, 复制代码 代码如下: $('.left').find('ul').delay(90).animate({left:0},700,'easeOutSine',

  • jQuery实现的类flash菜单效果代码

    先来看看效果:http://demo.jb51.net/js/jquery_flash/demo.htm 因为下面的menu和上面的logo的实现原理一样,为了简化起见,我们这里只拿logo部分的代码来说明一下原理: HTML代码: 复制代码 代码如下: <a id="logotype" href=""><span>Logo Type</span></a> CSS代码: 复制代码 代码如下: a#logotype{ b

  • 基于jquery1.4.2的仿flash超炫焦点图播放效果

    好嘞!废话不多说!Code贴上!哪位高手有更好的方式可以多多指点! CSS Code 复制代码 代码如下: /* * images player * author:mr·zhong * date:2010-04-19 */ #playerBox{ width:305px; height:282px; border:1px solid #ccc; } #playerImage ul{ padding:0px; margin:0px; border:0px; list-style:none; pos

  • 基于jQuery的仿flash的广告轮播

    整个页面如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

  • flash+jQuery实现可关闭及重复播放的压顶广告

    flash+jQuery实现可关闭及重复播放的压顶广告

    特效介绍 仿门户网站首页泰山压顶式可关闭及重复播放的从上面"压"下来的广告flash+jQuery代码,广告播放的时候,会将整个页面都压下去(这要求您把html部分代码放到您网站最顶部,<body>的下面),气势恢宏. 演示图 使用方法 1.在head引入css. 2.建议,在您网站最顶部放入下面的代码,这样,广告播放,会把您页面的所有内容压下去,气势恢宏: <div class="gg_full wrapfix"> <div clas

  • jQuery仿Flash上下翻动的中英文导航菜单实例

    本文实例讲述了jQuery仿Flash上下翻动的中英文导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/1

  • jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】

    jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】

    本文实例讲述了jQuery模拟实现经典FLASH导航动画效果的方法.分享给大家供大家参考,具体如下: 一.前言: FLASH在中国互联网发展初期的时候非常的热,各种各样的矢量造型和动作,加上专门配制的音效,让很多人眼前一亮,并且让很多人迷上了这种新兴的媒体,那时候兴起了很多大大小小的专门发布FLASH的网站,印象中记得的像"FLASH闪吧"."FLASH帝国"."闪客天地"等这些都是很火很热的网站,在当时盛极一时,由此也产生了一大批的专门从事FL

  • 超炫的jquery仿flash导航栏特效

    FLASH导航现在基本上已经是过时了,但是我们可以用jQuery来实现flash效果,非常的不错. 演示地址:http://demo.jb51.net/js/2014/jqeryfangflashdh/demo.html 复制代码 代码如下: <html>  <head>      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">      <

  • 基于jQuery的仿flash的广告轮播代码

    整个页面如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

  • jQuery实现Flash效果上下翻动的中英文导航菜单代码

    jQuery实现Flash效果上下翻动的中英文导航菜单代码

    本文实例讲述了jQuery实现Flash效果上下翻动的中英文导航菜单代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现Flash效果鼠标感应式的翻动导航菜单,支持中英文切换,所使用的jQuery类库版本为1.3.2. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-flash-style-sx-cha-chen-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//

随机推荐