当前位置:首页 > 编程教程 > jQuery技术文章 > JQuery控制图片由中心点逐渐放大效果

JQuery如何实现控制图片由中心点逐渐放大

  • 发布时间:
  • 作者:码农之家
  • 点击:91

这篇文章主要知识点是关于jquery、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

PHP与jQuery开发实例
  • 类型:PHP开发大小:9.8 MB格式:PDF作者:(印) 乔希 (Joshi,V.) 著,
立即下载

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

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

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

从中心点进行缩放

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

实现代码如下:

<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控制图片由中心点逐渐放大效果的相关知识,希望对大家有所帮助,如果大家想了解更多内容敬请关注码农之家网站!

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.804870

jQuery的promise与deferred对象在异步回调中的作用

一、前言 为了让前端们从回调的地狱中回到天堂, jQuery 也引入了 Promise 的概念。 Promise 是一种令代码异步行为更加优雅的抽象,有了它,我们就可以像写同步代码一样去写异步代码。 jQuery 从1.5版本开始实现了 CommonJS Promise/A 规范这一重量级方案,不过没有严格按照规范进行实现,有一些API上的差异。 好,让我们来看看他们的特性吧( 本文示例基于jquery 1.8版本以上 )。 二、示例 以前写动画时,我们通常是这么干的: $('.animateEle').animate({ opacity:'.5'}, 4000,function(){ $('.animateEle2').animate({ width:'100px' },2000,function(){ // 这样太伤了 $('.animateEle3').animate({ height:'0' },2000); });}); 假如这么使用回调的话,那就太伤了。幸好,还有一些现成的 Promise 解决方案来优雅地解决这种问题。 我们看看 jQuery 提供的解决办法。 var animate1 = function() { return $('.animateEle1').animate({opa……

网友NO.851484

jquery获取tr并更改tr内容示例代码

$(document).ready(function() { $("#Email tr").each(function(){ var objString =$(this).children("#Emailtd").text(); if(objString.length46){ objString=$(this).children("#Emailtd").text(objString.substring(0,46) + "...") } }); }); pre code_snippet_id="186521" snippet_file_name="blog_20140213_2_9981621" name="code" class="html" tbody id="Email" c:forEach items="${Warns }" var="Warn" tr /prepre code_snippet_id="186521" snippet_file_name="blog_20140213_3_5314559" name="code" class="html"//为了看着简单凸显主题,。。。代替无用的 td${。。。}/td td${。。。 }/td td${。。。 }/td td${。。。}//td td${。。。 }/td td id="Emailtd"${Warn.mail }/td td${。。。 }/td /tr /c:forEach /tbody/prepre code_snippet_id="186521" snippet_file_name="blog_20140213_3_5314559" name="code" class="html"pre code_snippet_id="186521" snippet_file_name="blog_20140213_3_5314559"/pre pre/pre pre/pre pre/pre pre/pre pre/pre /pre ……

网友NO.324484

教你用jquery实现iframe自适应高度

iframe代码,注意要写ID iframe src="test.html" id="main" width="700" height="300" frameborder="0" scrolling="auto"/iframe jquery代码一: //注意:下面的代码是放在test.html调用 $(window.parent.document).find("#main").load(function(){ var main = $(window.parent.document).find("#main"); var thisheight = $(document).height()+30; main.height(thisheight); }); jquery代码二: //注意:下面的代码是放在和iframe同一个页面调用 $("#main").load(function(){ var mainheight = $(this).contents().find("body").height()+30; $(this).height(mainheight); }); ……

网友NO.157702

jQuery如何获取同一个类标签的所有值(默认无法获取)

碰巧在开发的时候遇到这个问题,因为jQuery总是只返回第一个类标签的值,所以无法达到我们的要求。 比如: var btn = jQuery('.btn').val(); 获取的只是第一个类标签为btn的html元素的value值。 要获得一组类标签的所有html元素的值。就得使用jQuery的each遍历。 var btns = new Array(); //或者写成:var btns= []; jQuery('.btn').each(function(key,value){ btns[key] = $(this).val(); //或者也可以这么写: // btns[key] = $(value).val(); }); ……

网友NO.258174

jQuery图片切换插件jquery.cycle.js实例效果

Cycle是一个很棒的jQuery图片切换插件,提供了非常好的功能来帮助大家更简单的使用插件的幻灯功能 下载cycle插件并引入,此时,注意把引入它的代码放在引入jQuery主文件之后。 head script type=text/javascript src=js/jquery-1.8.0.min.js/script script type=text/javascript src=js/jquery.cycle.all.js/script link href=style.css rel=stylesheet type=text/css /head jquery.cycle.all.js在演示代码中有。 Cycle插件可以作用于页面中的任何一组同辈元素。为展示这一点,我们需要一个简单的 HTML文档,文档中是一个包含商品封面和相关信息的列表,可以添加到HTML文档的主体中: ul id=goods li img src=img/lenovopad.jpg alt=lenove pad / div class=title联想A3000(8GB/白色)/div div class=author娱乐平板电脑,手机平板电脑 /div /li li img src=img/note3.jpg alt=note3 / div class=title三星GALAXY Note III/div div class=author三星Note系列的第三代产品,配备5.7英寸全高清炫丽……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com