zoukankan      html  css  js  c++  java
  • 关于JQuery(最后一点动画效果*)

    1,$(':radio').val(['1','2','3']);//特殊写法,把值为1 2 3的都选中。

    2,math.abs(len)取绝对值

    3,按钮高亮显示,一般是配置两个按钮,一个普通的,一个高亮度的(比如普通样式按钮坐标为100,100. 高亮样式按钮坐标为120,120),当鼠标经过,js改变css background-position:100 -100;动态变为120 -120。(至于为什么当你在很多网站要保存一个小图标,却保存成了很大的图片,就是因为网站的图标显示离痛了background-position这种方法)

    4,

    文字被鼠标选中的效果
    //1。扩展jQuery
    $.fn.selectRange = function (start, end) {
    var curObj = $(this).get(0);
    if (!curObj) return;
    else if (curObj.setSelectionRange) {
    curObj.focus(); curObj.setSelectionRange(start, end);
    } /* WebKit */
    else if (curObj.createTextRange) {
    var range = curObj.createTextRange();
    range.collapse(true);
    range.moveEnd('character', end);
    range.moveStart('character', start);
    range.select();
    } /* IE */
    else if (curObj.selectionStart) {
    curObj.selectionStart = start;
    curObj.selectionEnd = end;
    }
    };


    调用的时候直接调用selectRange方法
    .selectRange(1,7);
    //默认选中文字start到end 加载即选中

    5,javascript:void(0);不跳转

    6,$(this).parent().remove();

    7,

    //判断层是否已存在
    if($('#dv1').length==0){};

    8,

    .hover() //鼠标进入,鼠标离开
    $('#btn').hover(function() {
    $(this).css('background-color', 'red');
    }, function() {
    $(this).css('background-color', '');
    });

    9,

    //切换事件 ,toggle();
    $('#btn').toggle(function() {

    }, function() {

    }, function() {

    }, function() {

    });

    10,   01:在内层return false;可以阻止事件冒泡(推荐使用)

            02:function(e)

                e.stopPropagation();
              
    (标准用法)

                $('btn').click(function(e){

                if(!confirm('去不')){
                e.prevrntDefault();//阻止事件
                    } 
                });

    11,

    //在注册事件时候就传值
    $('#btn').click({'name':'小黑'},function(evt){
    alert(evt.data.name);
    });

    12,

    //延时隐藏和展示
    $(function () {
    $('#btnHide').click(function () {
    $('div').hide(1000);
    });
    $('#btnShow').click(function() {
    $('div').show(1000);
    });
    });

    13,***************动画效果

    首先脱离了文档流
    $('img').animate 
    ({"top":"550px","left":"10px","width":"50px","height":"50px"},1500) //这是图片最后的结果
    ; //渐变 从上落到据上面550px 并且逐渐变小
    //动画效果

  • 相关阅读:
    华为:证实已开发出自主操作系统
    Aseprite入门:第一个gif动图
    《亿级用户下的新浪微博平台架构》阅读笔记
    Aseprite入门教程
    “华为起诉美国”事件进展:美国联邦法院给美国政府发传票
    CoCos2dx开发:中文乱码
    谈谈对“华为向美国联邦法院起诉美国”的看法
    《支付宝和蚂蚁花呗的技术架构及实践》阅读笔记
    Cocos2d-x环境配置步骤
    《菜鸟弹性调度系统的架构设计》阅读笔记
  • 原文地址:https://www.cnblogs.com/chenliyang/p/6595406.html
Copyright © 2011-2022 走看看