滑入滑出jq版

最新推荐文章于 2023-12-19 16:20:49 发布
最新推荐文章于 2023-12-19 16:20:49 发布
阅读量286 收藏
点赞数
分类专栏： 自娱自乐
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42793160/article/details/89739670
版权

滑入滑出的第一种实现方式运动模块

初始化

获取dom，提取css中left和top的值，用来以后的操作

var init = function($elem) {
		this.$elem = $elem;
		//parseFloat是去除px字母提取数字的方法
		this.curX = parseFloat(this.$elem.css('left'))
		this.curY = parseFloat(this.$elem.css('top'))
	}

运动模块公共部分

运动函数，传入left值和top值，来决定如何移动

var to = function(x,y, callback) {
        //判断是否传入数值如果没有则将x、y赋值为当前值
		x = typeof x === 'number'? x : this.curX;
		y = typeof y === 'number'? y : this.curY;
		//判断是否已经点击过
		if (this.curX === x && this.curY === y) {return;}
		//发送消息，以在运动过程中添加事件
		this.$elem.trigger('move',[this.$elem])
		//判断是否传入回调函数，如果传入则执行
		if (typeof callback === 'function') {
			callback()
		}
		//更新当前位置
		this.curX = x;
		this.curY = y;
    }

没有动画模式

var Silent=function ($elem) {
		init.call(this, $elem); //改变this的指向，这里this指外面的this,如不使用call，this指init。
        this.$elem.removeClass('transition');
	};

	Silent.prototype.to=function (x,y) {
		var self = this;
        to.call(this, x, y, function() {
        //对目标元素进行位置的更改
            self.$elem.css({
                left: x,
                top: y
            });
            //此处为动画执行完毕
            self.$elem.trigger('moved', [self.$elem]);

        });
	};
	//单独的x轴移动
	Silent.prototype.x=function (x) {
		this.to(x)
	};
	//单独的y轴移动
	Silent.prototype.y=function (y) {
		this.to(y)	
	};

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G

有动画模式

var Css3 = function($elem) {
        init.call(this, $elem);
        //添加动画的类
        this.$elem.addClass('transition');
        this.$elem.css({
            left: this.curX,
            top: this.curY
        });

    };

    Css3.prototype.to = function(x, y) {
        var self = this;
        to.call(this, x, y, function() {
           //终止上一次事件执行绑定的事件，可以立即执行下一个动作，不需要等待上一个事件执行完毕
           //可以直接使用transitioned
            self.$elem.off(transition.end).one(transition.end, function() {
                self.$elem.trigger('moved', [self.$elem]);
                //     self.$elem.data('status','moved');
                //     self.curX = x;
                //     self.curY = y;
            });

            self.$elem.css({
                left: x,
                top: y
            });

        });
    }
    Css3.prototype.x = function(x) {
        this.to(x);
    };
    Css3.prototype.y = function(y) {
        this.to(null, y);
    };

方便方法调用

//默认不使用css3方式
var defaults = {
			css3: false
		};
    //判断传入的是那个方法，将this指向那方法
    var move = function($elem, options) {
        var mode =null;
         if (options.css3 && transition.isSupport) {
         	mode = new Css3($elem);
         } else {
         	mode = new Silent($elem);
             
         }
          return {
            to: $.proxy(mode.to, mode), //改变指针this指向mode.
			x: $.proxy(mode.x, mode),
			y: $.proxy(mode.y, mode)
         }
    }
  //使用扩展将方法暴露出去
	$.fn.extend({
		move: function (option, x, y) {
                return this.each(function () {
                	var $this = $(this),
                	//将传入的对象赋值
                	options = $.extend({}, defaults, typeof option === 'object' && option),
                	mode = $this.data('move');
                	//判断是否是第一次调用此方法，如果是则将参数赋值给mode
                	if (!mode) {
                		$this.data('move', mode = move($this, options))
                	}
                     //判断执行哪一个方法，没有传入css3方法则使用默认方法
                	if (typeof mode[option] === 'function') {
                		mode[option](x, y)
                	}
                })
		}

完整代码和HTML部分

对代码进行封装方便调用

(function ($) {
	'use strict';
    var transition = window.mt.transition;
	var init = function($elem) {
		this.$elem = $elem;
		//parseFloat是去除px字母提取数字的方法
		this.curX = parseFloat(this.$elem.css('left'))
		this.curY = parseFloat(this.$elem.css('top'))
	}
    
    var to = function(x,y, callback) {
		x = typeof x === 'number'? x : this.curX;
		y = typeof y === 'number'? y : this.curY;
		//判断是否已经点击过
		if (this.curX === x && this.curY === y) {return;}
		this.$elem.trigger('move',[this.$elem])
		if (typeof callback === 'function') {
			callback()
		}
		this.curX = x;
		this.curY = y;
    }
	var Silent=function ($elem) {
		init.call(this, $elem); //改变this的指向，这里this指外面的this,如不使用call，this指init。
        this.$elem.removeClass('transition');
        console.log('有这个类')
	};

	Silent.prototype.to=function (x,y) {
		var self = this;
        to.call(this, x, y, function() {

            self.$elem.css({
                left: x,
                top: y
            });
            self.$elem.trigger('moved', [self.$elem]);

        });
	};
	Silent.prototype.x=function (x) {
		this.to(x)
		
		
	};
	Silent.prototype.y=function (y) {
		this.to(y)	
	};
	

	// css3 方式
	var Css3 = function($elem) {
        init.call(this, $elem);
        this.$elem.addClass('transition');
        console.log('有这个类')
        this.$elem.css({
            left: this.curX,
            top: this.curY
        });

    };

    Css3.prototype.to = function(x, y) {
        var self = this;
        to.call(this, x, y, function() {

            self.$elem.off(transition.end).one(transition.end, function() {
                self.$elem.trigger('moved', [self.$elem]);
                //     self.$elem.data('status','moved');
                //     self.curX = x;
                //     self.curY = y;
            });

            self.$elem.css({
                left: x,
                top: y
            });

        });
    }

    Css3.prototype.x = function(x) {
        this.to(x);
    };
    Css3.prototype.y = function(y) {
        this.to(null, y);
    };


    // js方式
    var Js = function($elem) {
        init.call(this, $elem);
        this.$elem.removeClass('transition');


    };

    Js.prototype.to = function(x, y) {


        var self = this;
        to.call(this, x, y, function() {
            self.$elem.stop().animate({
                left: x,
                top: y
            }, function() {
                self.$elem.trigger('moved', [self.$elem]);
            });
        });
    };

    Js.prototype.x = function(x) {
        this.to(x);

    };
    Js.prototype.y = function(y) {
        this.to(null, y);

    };


	var defaults = {
			css3: false,
			js: false
		};
    //判断传入的是那个方法，将this指向那方法
    var move = function($elem, options) {
        var mode =null;
         if (options.css3 && transition.isSupport) {
         	mode = new Css3($elem);
         } else if (options.js) {
         	mode = new Js($elem);
         } else {
         	mode = new Silent($elem);
             
         }
          return {
            to: $.proxy(mode.to, mode), //改变指针this指向mode.
			x: $.proxy(mode.x, mode),
			y: $.proxy(mode.y, mode)
         }
    }
  
        

	$.fn.extend({
		move: function (option, x, y) {
                return this.each(function () {
                	var $this = $(this),
                	options = $.extend({}, defaults, typeof option === 'object' && option),
                	mode = $this.data('move');
                	if (!mode) {
                		$this.data('move', mode = move($this, options))
                		// console.log(mode)
                	}
                     console.log(option)
                	if (typeof mode[option] === 'function') {
                		
                		mode[option](x, y)
         
                	}
                })
		}
			
	});

})(jQuery)

HTML部分：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>运动模块</title>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <style>
       .box {
            position: absolute;
            left: 0;
            top: 20px;
            width: 200px;
            height: 100px;
            background-color: red;
        }
        .btns{
            width:100px;
            /*margin-top: 120px;*/
        }

        #box2 {
           
            left: 200px;            
            background-color: yellow;
        }

        .slider{
            overflow: hidden;
            position: relative;
            width:200px;
            height:100px;
            border:2px solid #ccc;
            margin-left:100px;
        }
        .box{
            left:0;
            top:0;
        }
        #box2{
            left:100%;
        }
        #back-btn{
            margin-left:100px;
        }
        
    </style>
    
</head>
<body>
        <div class="slider">
            <div id="box" class="box"></div>
            <div id="box2" class="box"></div>
        </div>     
            <button id="back-btn" class="btns">&lt;</button
            ><button id="go-btn" class="btns">&gt;</button>


        <script src="./js/jquery.js"></script>
        <script src="./js/transition.js"></script>      
        <script src="./js/move.js"></script> 
    
            <script>
                var $box=$('#box'),
                    $box2=$('#box2'),
                    $goBtn=$('#go-btn'),
                    $backBtn=$('#back-btn');
    
                $box.on('move moved',function(e,$elem){
                    console.log(e.type);
                    console.log($elem);
    
                });    
    
                $box.move({
                    css3:false
                }); 
    
                $box2.move({
                    css3:true
                });
        
                 $goBtn.on('click',function () {
                            $box.move('x',-200);
                            $box2.move('x',0);
                }); 
        
                $backBtn.on('click',function () {
                            $box.move('x',0);
                            $box2.move('x',200);
                });   
    </script>   
</body>
</html>

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通过欧拉积分

Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t &ThinSpace; . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞​tz−1e−tdt.

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

Mon 06 Mon 13 Mon 20 已完成 进行中 计划一 计划二 现有任务 Adding GANTT diagram functionality to mermaid
  • 关于 甘特图 语法，参考 这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：:

张三 李四 王五 你好！李四, 最近怎么样? 你最近怎么样，王五？ 我很好，谢谢! 我很好，谢谢! 李四想了很长时间, 文字太长了 不适合放在一行. 打量着王五... 很好... 王五, 你怎么样? 张三 李四 王五

这将产生一个流程图。:

链接
长方形
圆
圆角长方形
菱形
  • 关于 Mermaid 语法，参考 这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

Created with Raphaël 2.2.0 开始 我的操作 确认？ 结束 yes no
  • 关于 Flowchart流程图 语法，参考 这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。
斜体样式

导入

var move = function($elem, options) {
        var mode =null;
         if (options.css3 && transition.isSupport) {
         	mode = new Css3($elem);
         } else if (options.js) {
         	mode = new Js($elem);
         } else {
         	mode = new Silent($elem);

         }
          return {
            to: $.proxy(mode.to, mode), //改变指针this指向mode.
			x: $.proxy(mode.x, mode),
			y: $.proxy(mode.y, mode)
         }
    }
––

如果你想加载一篇你写过的.md文件或者.html文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

jQuery二级菜单滑入滑出效果
yinghanhanhan的博客
12-15 467
使用jQuery滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏。
jq 鼠标滑入划出效果+多条数据滑入划出效果+隔行换底色
God Mu
09-29 681
  &lt;script type="text/javascript"&gt; $(document).ready(function(){ //隔行换底色 $("#contl1&gt;li:even").addClass("odd"); $("#contl2&gt;li:even").addClass("odd"); //鼠标滑
html+css+jquery实现左侧边栏滑入滑出
05-11
html+css+jquery实现侧边栏的滑入滑出 分为两种模式 第一种是hover实现， 第二种是jquery实现
jQuery之动画-滑入、滑出
06-15 1029
滑入、滑出、切换它们都有两个参数，参数一：动画时长，参数二：动画结束后的回调。
jquery效果 显示隐藏 滑入滑出
欢迎来到我的博客
11-27 1693
jquery jquery效果 jquery 给我们封装了很多动画效果，最为常见的如下： 显示隐藏：show() / hide() / toggle() ; 滑入滑出：slideDown() / slideUp() / slideToggle() ; 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 自定义动画：animate() ; ...
jq样式操作和效果(显示隐藏,滑入滑出,淡入淡出)
清风的博客
09-22 1756
jq样式操作和效果 1.样式 1.jq设置样式 $("div").css('属性','值'); 2.jq排他思想 //多选一.排他思想,当前元素设置样式,其与兄弟清除样式 $(this).css("color","green"); $(this).siblings().css("color",""); 3.链式编程 //链式编程是为了节省代码量 $(this).css("color"."gree...
jQuery 滑入滑出动画 slideDown()； slideUp()； slideToggle()；
卡尔特斯
10-28 732
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 300px;
jQuery实现的淡入淡出与滑入滑出效果示例
10-18
在网页动态效果方面，jQuery 提供了丰富的API，使得开发者能够轻松实现各种视觉上的交互效果，如淡入淡出和滑入滑出。这些效果不仅能够提升用户体验，还能使网站看起来更加专业和吸引人。 1. **淡入淡出效果**： ...
Jquery 滑入滑出效果实现代码
10-29
Jquery 滑入滑出效果实现代码知识点 一、Jquery 滑入滑出效果实现代码简介 Jquery 滑入滑出效果实现代码是使用 Jquery 库实现的动画效果，它可以让网页元素滑入或滑出，以达到视觉上的吸引效果。该代码可以应用于...
jQuery事件 滑入和滑出
weixin_44549398的博客
08-18 1462
无动画的显示和隐藏跟滑入滑出都是一样的， 只是滑入滑出是带动画的上下移动。之后不要忘了把jQuery插件引入获取button上面的ID名赋予点击事件，之后事件里面获取需要执行操作的元素ID，用slideUp方法（缓慢的将段落滑上）把显示的窗体隐藏起来。如果你的元素是隐藏状态的就把slideUp改成slideDown方法（缓慢的将段落滑下）把隐藏的元素显示出来。同样如果你觉得这样操作太麻烦，你可以改成以上实例的结果slideToggle（用600毫秒缓慢的将段落滑上或滑下）这样两个显示和隐藏的效果就都用上了。
css3+jQuery实现列表依次滑入效果
qq_39085895的博客
01-17 637
平台需要一个消息提示的列表，原来是弹框形式的，显得太死板老套，网上找了几个都不是想要的那种，果断就手动扣了一个，很简单代码不多也就几十行。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style ty
CSS3滑入/滑出效果
kingwin28的博客
02-17 862
CSS3滑入/滑出效果
实现元素的滑入滑出效果
richest_qi的博客
02-25 9222
文章目录Demo.vue，使用transitionDemo.vue，使用transition，且自定义nameDemo.vue，使用transition，且自定义name，且使用属性appear 先看例子吧。 Demo.vue，使用transition <template> <div class="demo"> <button @click="isShow=!isShow">显示/隐藏</button> <transition
【CSS】鼠标(移入/移出)平滑(显示/隐藏)下划线
少莫千华
06-29 3830
我们给内容添加一个黑色背景 示例 效果 将黑色背景替换成彩色渐变背景 示例 效果 宽度设置100个像素,高度设置10个像素()，此时背景是重复绘制的。 示例 效果 样式添加一个取消背景的重复绘制。 示例 效果 将背景的大小由10像素改为2像素() 示例 效果 给背景样式设置既靠左又靠下的位置() 示例 效果 将背景的宽度设置为0个像素 示例 效果 在鼠标移入内容的事件中设置背景的宽度 示例 效果 给背景大小变化事件添加一个平滑过渡。 示例 效果 给背景样式设置靠右位置() 示例 效果 鼠标移入事件触发时。添
CSS3过渡效果小练习-进度条
nuomi_w的博客
11-15 1519
Document
jQuery基础知识（三）
青椒的博客
03-18 253
1.j
jQuery之滑入与滑出
最新发布
m0_74577714的博客
12-19 499
/ 给淡出button设置点击事件。// 给淡入button设置点击事件。// 给切换滑入滑出按钮设置点击事件。// 不设置毫秒也是可以的。// 不设置毫秒也是可以的。// 不设置毫秒也是可以的。
JavaScript基础--jQuery效果动画
weixin_50909662的博客
11-06 579
基本显示与隐藏 ①显示隐藏的元素jqueryObj.show(speed，easing，fn) speed参数1：表示速度的字符串【‘slow’，‘normal’，‘fast’】或动画时长的毫秒数1000、2000... easing参数2：指定切换效果‘swing’、‘linear’，默认值为‘swing’ fn参数3：效果动画执行完毕后执行的函数 注：如果选择的元素是可见的，这个方法将不会改变任何东西。 <body> <button>显示按钮<...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值