jquery点击div 先变大再缩小

<!DOCTYPE html>
<html>
  <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
         <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
        <title>
         jquery点击div 先变大再缩小
        </title>
        <script>
            $(function(){
                $("div").toggle(function(){
                    $(this).css({
                     "width":"900px",
                      "height":"500px",
                      "position":"absolute",
                      "top":"0",
                      "left":"0"
                    });
                },function(){
                    $(this).css({
                         "width":"200px",
                         "height":"200px",
                    
                        
                    });
                });
            })
        </script>
  </head>
    <body>
    <div style="background-color:blue">
            点击
        </div>
  </body>
</html>

时间： 2024-11-03 05:42:23

jquery点击div 先变大再缩小的相关文章

jQuery之实现页面字体变大、变小

转载请标明,http://www.gxabase.com jQuery之实现字体变大.变小,这在我们做网页的时候经常会使用的功能,以下为实现过程: 1.制作网页页面index.html,页面代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>jQuery training</title> <

点击图片触点变大的方法

android:scaleType="center"android:src="@drawable/goods_item_back_selector" center 不会改变图片大小,在width, height 变大的时候

jquery点击div以外的区域触发事件

1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>网页特效展示中心</title> 5 <style type="text/css"> 6 #testa,#testa2{position:relative;} 7 #pop,#po

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>

鼠标指向div后变大25%

两个方面. 1.21布局,推荐position:absolute;(此题要求3个div),左边两个position:absolute;设置好top与left.右边div设置好margin. 2.js部分 window.onload=function(){ var obj1=document.getElementById("box1"); var obj2=document.getElementById("box2"); var obj3=document.getEl

IE9 下div自动变大变小问题

IE9 下整个div随着滚动条滚动自动发生变化.div里面是table表格 查看元素后发现只有三个CSS样式,未指定高度,可能是div的height默认值为auto,在ie9下会一直自动计算高度,所以可以更改height样式值解决问题. 增加样式 : height:100%; 后问题解决 原文地址:https://www.cnblogs.com/Garen/p/10270992.html

css3实现逐渐变大的圆填充div背景的效果

手机端现在的一些应用会运用上这样一个效果,就是duang的一下出现一个圆变大直到填充整个div,动感十足. 想到css3的scale属性,就自己来实现一下. <div id="bcd" style="width:500px;height:200px;position:relative;background-color:#aaa;overflow:hidden;border:3px solid #333;"> <div class="ani

goodsDetail点击图片变大

运用JQuery点击图片变大 goodsDetail.html中: <link href="css/style.css" rel="stylesheet" /> <script type="text/javascript" src="js/script.js"></script> 显示图片: <div id="tFocus"> <div class=&q

问题1：默认div隐藏，点击按钮时出现，再点击时隐藏。

例:默认div隐藏,点击按钮时出现,再点击时隐藏. <a href="#" onclick="f('ycbc')"; >控制按钮</a> <div id="ycbc" style="display:none">隐藏的内容</div> 解决方法一:javascript 利用onclick事件调用f('ycbc')函数,参数为隐藏的内容div的id,在函数加入钮时出现,再点击时隐藏代