• 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. android工程gen目录中R.java包名是怎么确定

    新建一个工程,包名用的com.mythroad.adskiller, 后来觉得不好,又改成com.mythroad.adsinscepter,但是我发现gen下的R.java文件的包名还是原来的com ...

  2. 常用渗透性测试工具(Tools for penetration testing)

    常用渗透性测试工具 原文:http://hi.baidu.com/limpid/item/14a2df166adfa8cb38cb3068 对一个应用项目进行渗透性测试一般要经过三个步骤.  第一步, ...

  3. sys--system-sysdba-sysoper用户区别

    当Oracle 数据库安装完毕后,系统会自动创建sys和system这两个帐户.1.sys :缺省密码为CHANGE_ON_INSTALL ,且被授予DBA角色system :缺省密码为MANAGER ...

  4. Mac打造python2 python3开发环境

    最新版的MacOS Sierra默认带的python环境仍然为2.7.10,本文将介绍使用Brew安装python3.5并做简单的配置,打造python2,python3共存的开发环境 直接尝试bre ...

  5. django: db - many to many

    本讲介绍数据库多对多关系,代码样例继前文使用. 一,在 blog/models.py 中创建对象: # Many-To-Many Example : Authors vs Books class Au ...

  6. css优先级计算

    主要的css选择器有id,class,tag,[],:,::等,而通常需要对其优先级进行判断的有id,class,tag,另外内联样式和!important也和css的优先级有关系. 如果将这五种不同 ...

  7. HTML基础总结<文本格式>

    HTML 文本格式化标签 标签 描述 <b> 定义粗体文本 <em> 呈现为被强调的文本 <i> 定义斜体字 <small> 定义小号字 <str ...

  8. Android Activity 分类

    在安卓系统中,Activity 按照优先级可以分为三种: 1. 前台Activity,是指正在和用户进行交互的Activity,优先级最高: 2.可见但非前台Activity,是指可见但无法与用户进行 ...

  9. zip命令的使用

    zip命令可以用来将文件压缩成为常用的zip格式.unzip命令则用来解压缩zip文件. 1. 我想把一个文件abc.txt和一个目录dir1压缩成为yasuo.zip: # zip -r yasuo ...

  10. MongoVUE查询备忘

    用了一段时间的MongoVUE,把一些在MongoVUE中常用的查询记录一下,以便查阅.1.and查询    查询date等于2016-01-08,并且page_url等于shouye.html   ...