JQuery控制图片由中心点逐渐放大效果

有的时候我们需要做一个当鼠标放置在图片上的时候，希望图片逐渐变大，即图片的width和height逐渐变大，但是此时，其left值与top值没有改变，故看似不是从中心点进行缩放的。如下图：

从中心点进行缩放

实现代码如下：

<meta charset="utf-8">
<style type="text/css">
#div1{ width:600px; height:400px; margin:50px auto; position:relative; text-align: center; padding-left:50px;}
#div1 img{ position:absolute; left:0; top:0; margin: 0 auto;}
</style>
<div id="div1">
<img src="images/1.jpg" width="100px" height="80px">
</div>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$('#div1 img').mouseenter(function(){
var wValue=1.5 * $(this).width();
var hValue=1.5 * $(this).height();
$(this).animate({width: wValue,
height: hValue,
left:("-"+(0.5 * $(this).width())/2),
top:("-"+(0.5 * $(this).height())/2)}, 1000);
}).mouseleave(function(){
$(this).animate({width: "100",
height: "80",
left:"0px",
top:"0px"}, 1000 );
});
});
</script>

以上所述是小编给大家介绍的JQuery控制图片由中心点逐渐放大效果的相关知识，希望对大家有所帮助，如果大家想了解更多内容敬请关注我们网站！

赞 (0)

相关推荐

  • jquery图片滚动放大代码分享（2）

    jquery图片滚动放大代码分享（2）

    本文实例讲述了jquery图片滚动放大效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现图片滚动放大效果代码,像是一个放大镜,适合用于产品展示,便于用户浏览产品细节,是一款非常实用的特效代码. 运行效果图:                 -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片滚动放大效果代码如下 <head> <meta http-eq

  • Jquery实现鼠标移动放大图片功能实例

    Jquery实现鼠标移动放大图片功能实例

    本文实例讲述了Jquery实现鼠标移动放大图片功能的方法.分享给大家供大家参考.具体分析如下: 做毕业设计,老师看完小样后,嫌弃我购物车里商品图片太大,不美观,让美化个效果.上网查查代码,修改了一个简单版的. 使用的是jquery, 未使用JavaScript获取鼠标状态,这主要和JavaScript需在标签本身内含写出所调用到的动作,太麻烦了,一会就把自己搞糊涂了,使用jquery技术直接根据标签的id,class等等,就可以辨识出来触发条件,直接作出回应(百度百科上说这是jquery很大的一

  • jQuery实现类似淘宝网图片放大效果的方法

    本文实例讲述了jQuery实现类似淘宝网图片放大效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <title>类似淘宝网的图片放大代码</title> <script type="

  • jQuery插件zoom实现图片全屏放大弹出层特效

    jQuery插件zoom实现图片全屏放大弹出层特效

    1.介绍 jQuery制作zoom图片全屏放大弹出层插件. 2.使用方法 1.引入以下的js和css文件 <link rel="stylesheet" href="css/zoom.css" media="all" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/zoom.min.js&quo

  • 图片放大镜jquery.jqzoom.js使用实例附放大镜图标

    图片放大镜jquery.jqzoom.js使用实例附放大镜图标

    1. jquery.jqzoom.js //************************************************************** // jQZoom allows you to realize a small magnifier window,close // to the image or images on your web page easily. // // jqZoom version 2.2 // Author Doc. Ing. Renzi

  • 基于jQuery仿淘宝产品图片放大镜代码分享

    基于jQuery仿淘宝产品图片放大镜代码分享

    这篇文章主要介绍了jQuery淘宝产品图片放大镜特效,鼠标点击图片,图片放大,特别适合图片细节展示,感兴趣的小伙伴可以参考下. (1)html代码: <div class="box"> <div class="tb-booth tb-pic tb-s310"> <a href="images/01.jpg"> <img src="images/01_mid.jpg" alt="

  • jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)

    本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果.分享给大家供大家参考,具体如下: 该插件乃文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实际需求来设置是否添加左右切换图片的效果.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

  • 基于jquery实现图片放大功能

    本文实例为大家分享了jquery实现图片放大功能的具体实现代码,供大家参考,具体内容如下 图片放大功能类似于淘宝上的商品的查看,如果鼠标移动到小图上就会在相应的位置显示出大图.如果自己写这些代码,会很痛苦.官方网站上提供了一个类库--jquery.jqzoom.js:只需要引入次类库,引用此类库,添加一些css代码即可实现此功能: HTML框架如下: <div class="jqzoom"> <img src="images/pro_img/blue_one

  • jQuery左右滚动支持图片放大缩略图图片轮播代码分享

    jQuery左右滚动支持图片放大缩略图图片轮播代码分享

    本文实例讲述了jQuery左右滚动支持图片放大缩略图图片轮播效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的左右滚动支持图片放大缩略图图片轮播效果,常用的jQuery图片左右轮播效果,同时支持底部缩略图左右滚动展示,点击大图片后支持放大效果. 运行效果图:                                     -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大

  • JQuery控制图片由中心点逐渐放大效果

    JQuery控制图片由中心点逐渐放大效果

    有的时候我们需要做一个当鼠标放置在图片上的时候,希望图片逐渐变大,即图片的width和height逐渐变大,但是此时,其left值与top值没有改变,故看似不是从中心点进行缩放的.如下图: 从中心点进行缩放 实现代码如下: <meta charset="utf-8"> <style type="text/css"> #div1{ width:600px; height:400px; margin:50px auto; position:rel

  • JS与CSS3实现图片响应鼠标移动放大效果示例

    JS与CSS3实现图片响应鼠标移动放大效果示例

    本文实例讲述了JS与CSS3实现图片响应鼠标移动放大效果.分享给大家供大家参考,具体如下: 今天看网易的网站上,当我把鼠标放上去的时候发现图片放大,移开图片缩小,于是自行尝试,结果如下. 方法一:使用js和css3 效果如图: 这样的实现非常简单,就是利用js的mouseover和 mouseout事件,但是不知道如何使图片从中间放大,日后再行尝试吧,代码如下: <!DOCTYPE html> <html> <head> <title>网易图片动画</

  • jQuery控制div实现随滚动条滚动效果

    本文实例讲述了jQuery控制div实现随滚动条滚动效果的方法.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条滚动效果</title> <script src="../js/jquery-1.11.1.min.js" type="text/javascript"&

  • jquery实现图片无缝滚动 蒙版遮蔽效果

    本文实例为大家分享了jquery实现图片无缝滚动.蒙版效果的具体代码,供大家参考,具体内容如下 1.无缝连接:通过对li设置属性float:left:消除标签之间的间隔 2.通过对ul整体进行偏移设置,使图片整体滚动, 3.设置图片切换时机, 4.蒙版遮罩移入时机的选择 代码片. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

  • jQuery实现图片上传预览效果功能完整实例【测试可用】

    jQuery实现图片上传预览效果功能完整实例【测试可用】

    本文实例讲述了jQuery实现图片上传预览效果功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net jquery图片上传预览效果</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.j

  • jquery实现图片轮播和滑动效果

    jquery实现图片轮播和滑动效果

    本文实例为大家分享了jquery实现图片轮播和滑动效果的具体代码,供大家参考,具体内容如下 实习做了一个简易的图片轮播效果 下图是做出来的效果 源码 html 和 js部分 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link type="text/css" rel="sty

  • jQuery控制图片的hover效果（smartRollover.js）

    用js实现的好处是:如果一个网站中图片的hover效果比较多,可能每一个都要有css控制,那样代码有的冗余.但是有了js控制,不管有多少图片,hover效果都可以用同样的js,但是必须保证图片的out/off效果和over/on效果命名有规律性,比如: navi01_out.jpg/navi01_off.jpg navi01_over.jpg/nvai02_on.jpg 这样js控制起来非常方便.找到匹配的名称,hover时替换成另一个名称. 今天我想用jQuery控制一下效果: 代码如下: 复

  • 基于Jquery制作图片文字排版预览效果附源码下载

    基于Jquery制作图片文字排版预览效果附源码下载

    基于jQuery图文排版图片预览特效.这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效. 效果图如下所示,怎么样感兴趣吗,感兴趣的朋友继续往下学习哦. 效果演示    源码下载 html代码: <div id="fullscreen"> <div id="fullscreen-inner"> <div id="fullscreen-inner-left" class="fullscree

  • 原生js和jquery实现图片轮播淡入淡出效果

    原生js和jquery实现图片轮播淡入淡出效果

    图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后

  • jQuery实现为图片添加镜头放大效果的方法

    jQuery实现为图片添加镜头放大效果的方法

    本文实例讲述了jQuery实现为图片添加镜头放大效果的方法.分享给大家供大家参考.具体如下: 运行效果如下图所示: 主要代码如下: $(function () { $("#img_01").imageLens(); $("#img_02").imageLens({ lensSize: 200 }); $("#img_03").imageLens({ imageSrc: "images/sample01.jpg" }); $(&

随机推荐