• 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. Heritrix源码分析(十四)

    近段时间在搞定Lucene的一些问题,所以Heritrix源码分析暂时告一段落.今天下午在群里有同学提到了Heritrix异常终止的问题以及让Heritrix不停的抓取(就是抓完一遍后载入种子继续抓取 ...

  2. [React Testing] Children with Shallow Rendering

    When testing React components, we often want to make sure the rendered output of the component match ...

  3. Ubuntu 搭建NDK环境

    一. NDK下载地址 https://developer.android.com/tools/sdk/ndk/index.html 二. NDK环境两种方式 NDK下载后,解压缩后放置于目录/home ...

  4. 浏览器格式化JSON输出，thinkphp

    1 //编写类方法用$this->ajaxReturn()返回数据 2 public function index(){ 3 $user = M('User'); 5 $data = $user ...

  5. channel c3 disabled, job failed on it will be run on another channel

    今天执行备份时,报错: allocated channel: c3 channel c3: sid=131 instance=orcl2 devtype=DISK   RMAN-03009: fail ...

  6. CentOS7.1 使用资源搜集

    1.配置java环境 -openjdk* 测试 java -version 2.安装Tomcat8.0.35 点击题目可以参考源网页,但有些代码无法执行,更改如下(亲测可行): 一定要先安装java环 ...

  7. The use of function Merge (update、insert、delete)

    1.The use of function merge(update.insert.delete) Example: #1.Initialize the data create table #test ...

  8. 服务器是windows时tomcat无法打印所有日志配置修改

    Tomcat运行仅一天磁盘空间突然就增加了很多,发现是日志文件太大了,修改tomcat的日志配置即可. 查看目录所占空间大小: ? 1 [root@XXX webapps]du -sh 清理方法: ? ...

  9. python之6-5偏函数

    functools.partial 偏函数的作用是简化操作,简化什么操作呢?就是当我们有一个已知函数A,且这个函数包含有某个或多个参数A1,通过固定这个参数A1,我们可以自己编写一个新函数B,来减少代 ...

  10. unresolved import 解决办法

    安装paramiko 需要先安装另两个模块 安装时未注意32bit,安装了64的,本地python是32的所以出错,重装后报错unresolved import,环境是eclipse(pydev) 用 ...