• 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. acid数据库事务正确执行的四个基本要素的缩写编辑本义项

    ACID,指数据库事务正确执行的四个基本要素的缩写.包含:原子性(Atomicity).一致性(Consistency).隔离性(Isolation).持久性(Durability).一个支持事务(T ...

  2. sql中的case when

    sql语言中有没有类似C语言中的switch case的语句?? 没有,用case   when   来代替就行了.            例如,下面的语句显示中文年月         select ...

  3. C++11 : 外部模板（Extern Template）

    在C++98/03语言标准中,对于源代码中出现的每一处模板实例化,编译器都需要去做实例化的工作:而在链接时,链接器还需要移除重复的实例化代码.显然,让编译器每次都去进行重复的实例化工作显然是不必要的, ...

  4. Vim的设置和使用——编程者

    一.第一个插件:Ctags 当我们看到一个陌生的变量或者函数,我们总想知道它的含义,因此,快速找到它的定义很重要.Ctags插件中的"Ctrl+]"快捷键就可以做到. 二.教你高效 ...

  5. Movie播放Gif，完美实现屏幕适配

    android播放gif  我研究过3种 第一 :GifView支持android播放gif,效果是 先加载第一帧,然后慢慢加载完其他的针,这样效果视觉很不好,是从模糊到清晰的过程:第二:是流行的把g ...

  6. 基本SQL语句练习之SELECT

    一.SQL Plus连接sqlplus:以命令行方式连接数据库sqlplusw:以窗口登录方式连接数据库conn sys/password as sysdba;show userselect * fr ...

  7. linux nc命令

    即NetCat简写,在网络工具中有“瑞士军刀”美誉,其有Windows和Linux的版本.因为它短小精悍(1.84版本也不过25k,旧版本或缩减版甚至更小).功能实用,被设计为一个简单.可靠的网络工具 ...

  8. Android-兼容问题

    兼容性问题从何而来?答:使用了低版本没有的功能,可是目标设备包括低版本. 那我们如何解决兼容性问题? 1.如果是JAVA代码 1.1 使用TargetApi(x)注解,避免Android Lint报错 ...

  9. 来自GitHub的Android UI开源项目

    最近在搞Android开发,做了一个项目后感觉,Android开发入门很是简单,但要能做出用户体验比较完美的APP实在是一件很不容易的事情!要达到一定的水准,估计还需要慢慢的积累,这里先保存一个Git ...

  10. mysql 5.6 参数详解

    系统变量提供的是各种与服务器配置和功能有关的信息.大部分的系统变量都可以在服务器启动时进行设置.在运行时,每一个系统变量都拥有一个全局值或会话值,或者同时拥有这两个值.许多系统变量都是动态的,也就是说 ...