• jQuery鼠标悬浮放于图片上之后图片放大显示的效果，即鼠标移到图片上图片突出显示，鼠标移开后恢复原来的模样，你可以在图片滚动效果中加上本特效，相信会更炫一些。

<!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>
<title>jQuery鼠标悬浮图片放大特效</title>
<script src="/ajaxjs/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var imgWid = 0 ;
var imgHei = 0 ; //变量初始化
var big = 1.2;//放大倍数
$(".banimg li").hover(function(){
$(this).find("img").stop(true,true);
var imgWid2 = 0;var imgHei2 = 0;//局部变量
imgWid = $(this).find("img").width();
imgHei = $(this).find("img").height();
imgWid2 = imgWid * big;
imgHei2 = imgHei * big;
$(this).find("img").css({"z-index":2});
$(this).find("img").animate({"width":imgWid2,"height":imgHei2,"margin-left":-imgWid2/2,"margin-top":-imgHei2/2});
},function(){$(this).find("img").stop().animate({"width":imgWid,"height":imgHei,"margin-left":-imgWid/2,"margin-top":-imgHei/2,"z-index":1});});
})
</script>
<style type="text/css">
*{margin: 0; padding: 0; list-style: none;}
.banimg{width: 600px;height: 200px; margin: 20px auto;}
.banimg li{ width: 200px; height: 200px; float: left; position: relative;}
.banimg li img{ width: 200px; height: 200px; position: absolute; left: 50%;top: 50%;margin: -100px 0 0 -100px;z-index: 1;}
</style>
</head>
<body>
<ul class="banimg">
<li><a href="#"><img src="/jscss/demoimg/wall_s7.jpg" /></a></li>
<li><a href="#"><img src="/jscss/demoimg/wall_s8.jpg" /></a></li>
</ul>
</body>
</html>

jQuery鼠标悬停图片放大显示的更多相关文章

  1. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

  2. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

  3. jquery图片放大插件鼠标悬停图片放大效果

    都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  4. jQuery点击图片放大显示原图效果

    HTML部分:<div id="append_parent"></div> JS代码部分: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  5. j-query应用---鼠标悬停不同文字显示不同背景图片banner动画

    源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  6. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

  7. 浅谈CSS和JQuery实现鼠标悬浮图片放大效果

    对于刚刚学习网页前台设计的同学一定对图片的处理非常苦恼,那么这里简单的讲解一下几个图片处理的实例. 以.net为平台,微软的Visual Studio 2013为开发工具,当然前台技术还是采用CSS3 ...

  8. 常用css样式（文字超出部分用省略号显示、鼠标经过图片放大、出现阴影）

    文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis ...

  9. JQuery鼠标移到小图显示大图效果的方法

    JQuery鼠标移到小图显示大图效果的方法 本文实例讲述了JQuery鼠标移到小图显示大图效果的方法.分享给大家供大家参考.具体分析如下: 这里的显示大图功能类似上一篇<JQuery实现超链接鼠 ...

随机推荐

  1. 新版ADT出现appcompat_v7的问题

    问题 更新ADT至22.6.0版本号之后,创建新的安装项目,会出现appcompat_v7的内容.而且是创建一个新的内容就会出现. 事实上appcompat_v7是Google自己的一个兼容包.一个支 ...

  2. [Typescript] Function defination

    Define a function type and params type: // The function init // Accept two params which are both typ ...

  3. ios 基于CAEmitterLayer的雪花，烟花，火焰，爱心等效果demo

    demo功能:基于CAEmitterLayer的雪花,烟花,火焰,爱心等效果. demo说明:基于Core Animation的粒子发射系统,粒子用CAEmitterCell来初始化. 粒子画在背景层 ...

  4. LSI SAS 2308配置操作

    介绍LSISAS2308的配置操作 3.1 登录CU界面 介绍登录LSISAS2308的CU配置界面的方法. 3.2 创建RAID 介绍在LSISAS2308扣卡上创建RAID的操作方法. 3.3 配 ...

  5. DELL RACADM 工具使用介绍

    如果iDRAC的IP或者设置出现问题,不能够链接,那么可以通过RACADM这个程序在系统层面可以对iDRAC进行设置,使用的方法以及命令都在下边. RACADM provides command li ...

  6. Python字符串方法

    capitalize() 把字符串的第一个字符改为大写 casefold() 把整个字符串的所有字符改为小写 center(width) 将字符串居中,并使用空格填充至长度 width 的新字符串 c ...

  7. C#。总结

    数据类型--变量与常量--运算符与表达式--语句(if,for)--数组--函数--结构体一.数据类型: (一)内建类型 整型(int short long byte uint ushort ulon ...

  8. 使用Razor来进行页面布局

    UI设计师们现在也讲究页面设计的语义化和结构化,把一个页面分成很多个模块,使用语义化的类名或id来标识这些模块.Razor推出了新的布局解决方案来迎合这一潮流. 这里涉及到Razor的一些语法,大家可 ...

  9. GridView格式化数据DataFormatString

    设定BoundField的DataFormatString,通常有以下几种 DataFormatString= "{0:C}" 货币,货币的格式取决于当前Thread中Cultur ...

  10. Google推出iOS功能性UI测试框架EarlGrey

    经过了一段时间的酝酿后,Google很高兴地宣布了EarlGrey,一款针对于iOS的功能性UI测试框架.诸如YouTube.Google Calendar.Google Photos.Google ...