欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

js动画html标签

程序员文章站 2024-01-29 21:57:28
...

1.jQuery 效果 - animate() 方法

    改变 "div" 元素的高度:

    $(".btn1").click(function(){
      $("#box").animate({height:"300px"});
    });

    定义和用法

    animate() 方法执行 CSS 属性集的自定义动画。

    该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。

    只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。

    注释:使用 "+=" 或 "-=" 来创建相对动画(relative animations)。

    语法 1

    $(selector).animate(styles,speed,easing,callback)


    (补充:1em=16px -- 12px=0.75em,10px=0.625em。)

    语法 2

    $(selector).animate(styles,options)

    styles     必需。规定产生动画效果的 CSS 样式和值(同上)。
    options 可选。规定动画的额外选项。
    可能的值:
        speed - 设置动画的速度
        easing - 规定要使用的 easing 函数
        callback - 规定动画完成之后要执行的函数
        step - 规定动画的每一步完成之后要执行的函数
        queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始
        specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数

        详情:http://www.w3school.com.cn/jquery/effect_animate.asp

2015-6-2 新增例子,返回顶部:

 

 $('#gotop').click(function(){
        $('body,html').animate({
            scrollTop: 0
        },
        800);//点击回到顶部按钮,缓懂回到顶部,数字越小越快
        return false;  
    })
 



2.CSS3 opacity 属性

    语法

    opacity: value|inherit;

    value     规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。
    inherit     应该从父元素继承 opacity 属性的值。


3.关于append
            $dl = $(".ybcun").find("dl"),
                        $dl2 = $(".ybctj").find("dl"),
                        dd = document.createElement("dd"),


              html = '<a href="/project/searchResult?psId='+data+'" target="_blank">'+newName+'</a>'
                        dd.innerHTML = html;
                        $dl.append(dd);
                        $dl2.append(dd);
//这样追加内容的话,dl会添加失败。相同, 如果改成 先执行$dl2.append(dd); 在执行$dl.append(dd);的话, dl2会添加失败;
解决方法:        
            html = '<a href="/project/searchResult?psId='+data+'" target="_blank">'+newName+'</a>'
                        dd.innerHTML = html;
                        $dl.append(dd);
                       
                        //重新定义一个对象
                        dd2 = document.createElement("dd"),
                        dd2.innerHTML = html;
                        $dl2.append(dd2);
     //这样追加  新的对象就不会出现上面的问题

 

 4.JQuery给元素绑定click事件多次执行的解决方法

原绑定方法:
 
    $("#sdfsd").on("click",function(e){ ***** });
    这种方法只会在原click方法中继续添加新方法;
解决办法更改绑定方法为:
 
    $("#sdfsd").unbind("click").click(function(e){ ***** });
    在绑定新click方法前对元素所绑定的click方法解绑

5.js冲突问题:
    $(".x").load("")加载页面时,防止加载的页面与父页面的js冲突

6.判断数据返回类型(js判断undefined类型)--typeof

        var id = $(this).attr("id").substring(0,9);
    这个看似没问题,但如果当前标签下不存在id属性, 那么$(this).attr("id")就会返回
    一个undefined,此时.substring就会抛异常,(.substring为截取字符串,显然undefined
    不是一个有效的字符串)
      这时就要使用typeof判断:

    var idStr = $(this).attr("id");
    //判断是否能获取到id(
    //typeof 返回的是字符串,有六种可能:"number"、"string"、
                         "boolean"、"object"、
                         "function"、"undefined")
    if(typeof(idStr) == "undefined"){
    }else{
       var id = idStr.substring(0,9);
       $("#favoriteId").val(id);
    }

 

 

一、HTML <link> 标签的 media 属性
      <link rel="stylesheet" type="text/css" href="/ncss/print.css" media="print"/>
    <link rel="stylesheet" type="text/css" href="/ncss/style.css" media="screen"/>

定义和用法
    media 属性规定被链接文档将显示在什么设备上。
    media 属性用于为不同的媒介类型规定不同的样式。

兼容性
    所有浏览器都支持值为 "screen"、"print" 以及 "all" 的 media 属性。

属性值
    值         描述
    screen         计算机屏幕(默认)。
    tty         电传打字机以及类似的使用等宽字符网格的媒介。
    tv         电视机类型设备(低分辨率、有限的滚屏能力)。
    projection     放映机。
    handheld     手持设备(小屏幕、有限带宽)。
    print         打印预览模式/打印页面。
    braille     盲人点字法反馈设备。
    aural         语音合成器。
    all         适用于所有设备。

二、HTML <td> 标签的 valign 属性
    valign 属性规定单元格中内容的垂直排列方式。

语法   
    <td valign="value">

属性值
    值         描述
    top         对内容进行上对齐。
    middle         对内容进行居中对齐(默认值)。
    bottom         对内容进行下对齐。
    baseline     与基线对齐。

baseline 值
        基线是一条虚构的线。在一行文本中,大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。
    该值的效果常常与 bottom 值相同。不过,如果文本的字号各不相同,那么 baseline 的效果会更好。

 

三、margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

说明

这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。

注释:允许使用负值。

例子 1

margin:10px 5px 15px 20px;
  • 上外边距是 10px
  • 右外边距是 5px
  • 下外边距是 15px
  • 左外边距是 20px

例子 2

margin:10px 5px 15px;
  • 上外边距是 10px
  • 右外边距和左外边距是 5px
  • 下外边距是 15px

例子 3

margin:10px 5px;
  • 上外边距和下外边距是 10px
  • 右外边距和左外边距是 5px

例子 4

margin:10px;
  • 所有 4 个外边距都是 10px
默认值: 继承性: 版本: JavaScript 语法:
0
no
CSS1
object.style.margin="10px 5px"

可能的值

值 描述
auto 浏览器计算外边距。
length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
% 规定基于父元素的宽度的百分比的外边距。
inherit 规定应该从父元素继承外边距。