• 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. MySQL删除外键定义的方法

    MySQL外键在定以后,如果我们不再需要这个外键,可以进行删除操作,下面就为您介绍MySQL删除外键定义的方法,供您参考. 不知道大家有没有发现,在定义外键的时候articles.member_id外 ...

  2. android SlidingTabLayout实现ViewPager页卡滑动效果

    先来张效果图(能够滑动切换页卡) watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGVuZ2t2/font/5a6L5L2T/fontsize/400/fi ...

  3. struts2讲义----二

    Struts的namespace 示例工程Struts2_0200_Namespace Struts.xml <struts> <constant name="struts ...

  4. 免费SVN源代码在线托管

    免费的SVN源代码在线托管网站很多,用的最多的是TaoCode吧.但是一般都要求开源,支持私有项目的普遍收费,要不就是流量很少,不够用.对比了一下,发现好库正好能满足需要. 网址: http://ww ...

  5. Head First HTML与CSS — 为你的页面加图像

    HTML中我们用img标签插入图像,在Web中常用的有三种:JPEG, PNG,GIF. 简单来讲,JPEG适合照片和复杂图像使用,而PNG或GIF适合单色图像.logo.和几何图形使用. JPEG: ...

  6. (转)WCF入门教程（一）简介

    原文系列来自http://www.cnblogs.com/yank/p/3653160.html 1.WCF是什么? WCF( Windows Communication Foundation), 是 ...

  7. iframe顶部跳转跨域问题

    $("#button").on("click", function () {                  //  top.location.locatio ...

  8. iOS调节系统音量

    目录[-] 使用MPVolumeView 编程实现系统音量调节2 通过MPVolumeSlider的实例来操作系统音量 有问题!我不喜欢系统弹出音量提示 还有问题,我修改了系统音量但是不是通过我的UI ...

  9. XCode请求数据中接收类型的后台与前台处理(本机模拟)

      Xcode报错问题如下:   解决办法如下: 0x1 ->请求数据时加上缺少的类型 AFHTTPSessionManager *manager = [selfAFHTTPSessionMan ...

  10. Mysql 储存过程以及 python callproc调用

    一.存储过程(stored procedure) 存储过程将存入的一系列SQL语句进行预编译,执行并存放在数据库中,之后如果需要使用sql语句对这一组sql进行访问时可以直接提取(很好理解 存储过程就 ...