jquery

jquery

改变zoho的salesiq小技巧

WordPressLeo 发表了文章 • 1 个评论 • 306 次浏览 • 2018-08-02 09:46 • 来自相关话题

我们常用的salesiq,有些时候那个浮动按钮并不是很适合部分网站的需求,有时候可能需要隐藏这个浮动按钮,然后通过其他方式弹出对话框。
仔细看一下html结构,我们可以发现这是可以实现的。
首先
.zsiq_floatmain{
    display: none !important;
}
这样可以隐藏浮动按钮,然后我们可以通过jquery的点击事件,弹出对话框
        $('#gotong_a').click(function(){
            $('.zls-sptwndw').addClass('siqanim');
            $('.zls-sptwndw').css('top','auto');
        });
 
 
 
over!! 查看全部
我们常用的salesiq,有些时候那个浮动按钮并不是很适合部分网站的需求,有时候可能需要隐藏这个浮动按钮,然后通过其他方式弹出对话框。
仔细看一下html结构,我们可以发现这是可以实现的。
首先
.zsiq_floatmain{
    display: none !important;
}
这样可以隐藏浮动按钮,然后我们可以通过jquery的点击事件,弹出对话框
        $('#gotong_a').click(function(){
            $('.zls-sptwndw').addClass('siqanim');
            $('.zls-sptwndw').css('top','auto');
        });
 
 
 
over!!

利用jquery api进行简单的批量替换链接

WordPressLeo 发表了文章 • 1 个评论 • 333 次浏览 • 2018-04-16 08:41 • 来自相关话题

$(".content-tel").children("a:first-child").attr("href","http://www.domain.com/contact");
 
 
如果有很多同样的元素要修改为同一个链接,那这样就省去了一个个页面修改链接的时间,提高效率 查看全部
$(".content-tel").children("a:first-child").attr("href","http://www.domain.com/contact";);
 
 
如果有很多同样的元素要修改为同一个链接,那这样就省去了一个个页面修改链接的时间,提高效率

分享一款前端交互效果较好的菜单插件superfish

WordPressLeo 发表了文章 • 2 个评论 • 362 次浏览 • 2018-04-13 09:24 • 来自相关话题

superfish基础版菜单
superfish垂直版菜单(适用于侧边栏)
superfish tab切换型菜单
superfish超级版菜单
分为这四个版本,https://superfish.joelbirch.co/examples/ 相关文件以及配置jq都有。 查看全部
superfish基础版菜单
superfish垂直版菜单(适用于侧边栏)
superfish tab切换型菜单
superfish超级版菜单
分为这四个版本,https://superfish.joelbirch.co/examples/ 相关文件以及配置jq都有。

jquery小思路

其他Leo 发表了文章 • 1 个评论 • 298 次浏览 • 2018-03-26 16:15 • 来自相关话题

碰到一个需求,可能是自己写html的时候走歪路了,本来是要给图片加个遮罩的,也很容易写好了,但是发现没有加载图片的时候,遮罩还是存在着。
那么我想了一下,可以做一个简单的if判断,当图片src值为空,那么遮罩隐藏
 
var imgsrc=$('.fourrightbox + img').attr('src');
        if(imgsrc == "" || imgsrc == null || imgsrc == undefined){
            $('.fourrightbox').css('display','none');
        }
 
隐藏方法有很多种,你也可以用jquery api里hide()等等 查看全部
碰到一个需求,可能是自己写html的时候走歪路了,本来是要给图片加个遮罩的,也很容易写好了,但是发现没有加载图片的时候,遮罩还是存在着。
那么我想了一下,可以做一个简单的if判断,当图片src值为空,那么遮罩隐藏
 
var imgsrc=$('.fourrightbox + img').attr('src');
        if(imgsrc == "" || imgsrc == null || imgsrc == undefined){
            $('.fourrightbox').css('display','none');
        }
 
隐藏方法有很多种,你也可以用jquery api里hide()等等

前端图片延迟加载和滚动下拉加载

其他Leo 发表了文章 • 2 个评论 • 306 次浏览 • 2018-03-26 11:35 • 来自相关话题

最近看到一篇文章,看了大牛的讲解,感觉整体还是比较容易理解的,可以尝试着玩玩。以下是转载的正文:前端页面的用户体验对于一个网站来说是至关重要的,我们在访问一些图片量比较大的网站的时候,往往会有这样的感受:显示在我电脑屏幕可视区域的图片总是不能及时的刷出来,这就造成了对于一些没有什么耐心的用户而言,他们就不愿意多等下去,索性直接关闭了网站去看其他的网站,这就使得本网站的用户量的流失,这往往是一个网站最不愿意看到的情况,那么对于这样的情况而言,开发者们不断的努力,很快就想到了解决的方案,让在可视区域的图片立即加载进来,而让不在可视区域并且需要通过滚动条进行滚动显示的图片在图片滚动到可视区域内再显示出来,这就比一次性把所有的图片资源加载进来从而造成图片刷新较慢的用户体验好的多的多。 
 那么,图片延迟加载的技术具体如何实现呢?下面来做详细的介绍: 
首先,定义图片为三列,一共有5行,具体代码如下:  










 
里面用到的bootstrap的布局技术(当然,这不是重点),请看img标签中的src,一开始我们并没有给它具体的图片的资源路径,而是自己定义了一个属性 x-src,该属性的值是图片图片的资源路径,每一行的img都是如此,接下来,当页面载入的时候,我们使用jquery(当然,你想javascript原生的代码也可以,我这里只是为了省时间而已)来循环遍历每一个img,判断每一个图片是否在当前可视区域内,是则显示图片,否则稍后处理,这里需要知道三个数据: 

             注:因为我所写的是当图片的一半进入的浏览器的可视区域内才将这张图片进行加载,所以需要第三个数据,这个看个人的需求是什么,如果你的需求是图片只要已进入可视区域内就加载,可直接忽略第三个数据!!!! 

                                   1:浏览器可视区域的高度 

                                   2:图片相对于文档的偏移量(这里只需要高度上的偏移量) 

                                   3:图片元素本身的高度 

             如果图片先对于文档的偏移量+图片元素本身的高度的一半    <  浏览器可视区域的高度,即表明图片已经有一半进入的可视区域了,那么我就应该要把这张图片加载进来了,可是img标签的src是为空的,x-src的值才是图片的资源路径,这个时候就需要用jquery将img 标签的x-src值传给src,从而将图片加载进来,具体实现代码如下: 





 
  查看全部
最近看到一篇文章,看了大牛的讲解,感觉整体还是比较容易理解的,可以尝试着玩玩。以下是转载的正文:前端页面的用户体验对于一个网站来说是至关重要的,我们在访问一些图片量比较大的网站的时候,往往会有这样的感受:显示在我电脑屏幕可视区域的图片总是不能及时的刷出来,这就造成了对于一些没有什么耐心的用户而言,他们就不愿意多等下去,索性直接关闭了网站去看其他的网站,这就使得本网站的用户量的流失,这往往是一个网站最不愿意看到的情况,那么对于这样的情况而言,开发者们不断的努力,很快就想到了解决的方案,让在可视区域的图片立即加载进来,而让不在可视区域并且需要通过滚动条进行滚动显示的图片在图片滚动到可视区域内再显示出来,这就比一次性把所有的图片资源加载进来从而造成图片刷新较慢的用户体验好的多的多。 
 那么,图片延迟加载的技术具体如何实现呢?下面来做详细的介绍: 
首先,定义图片为三列,一共有5行,具体代码如下:  

3126f528-4229-4019-8698-7cf085f1e8bf.png


abc884da-5167-4ecb-9e03-def86e9eed6a.png

 
里面用到的bootstrap的布局技术(当然,这不是重点),请看img标签中的src,一开始我们并没有给它具体的图片的资源路径,而是自己定义了一个属性 x-src,该属性的值是图片图片的资源路径,每一行的img都是如此,接下来,当页面载入的时候,我们使用jquery(当然,你想javascript原生的代码也可以,我这里只是为了省时间而已)来循环遍历每一个img,判断每一个图片是否在当前可视区域内,是则显示图片,否则稍后处理,这里需要知道三个数据: 

             注:因为我所写的是当图片的一半进入的浏览器的可视区域内才将这张图片进行加载,所以需要第三个数据,这个看个人的需求是什么,如果你的需求是图片只要已进入可视区域内就加载,可直接忽略第三个数据!!!! 

                                   1:浏览器可视区域的高度 

                                   2:图片相对于文档的偏移量(这里只需要高度上的偏移量) 

                                   3:图片元素本身的高度 

             如果图片先对于文档的偏移量+图片元素本身的高度的一半    <  浏览器可视区域的高度,即表明图片已经有一半进入的可视区域了,那么我就应该要把这张图片加载进来了,可是img标签的src是为空的,x-src的值才是图片的资源路径,这个时候就需要用jquery将img 标签的x-src值传给src,从而将图片加载进来,具体实现代码如下: 

d67418a9-a587-47a4-8d0b-fc4425a7dc2e.png

 
 

分享一款前端交互效果较好的菜单插件superfish

WordPressLeo 发表了文章 • 2 个评论 • 362 次浏览 • 2018-04-13 09:24 • 来自相关话题

superfish基础版菜单
superfish垂直版菜单(适用于侧边栏)
superfish tab切换型菜单
superfish超级版菜单
分为这四个版本,https://superfish.joelbirch.co/examples/ 相关文件以及配置jq都有。 查看全部
superfish基础版菜单
superfish垂直版菜单(适用于侧边栏)
superfish tab切换型菜单
superfish超级版菜单
分为这四个版本,https://superfish.joelbirch.co/examples/ 相关文件以及配置jq都有。

改变zoho的salesiq小技巧

WordPressLeo 发表了文章 • 1 个评论 • 306 次浏览 • 2018-08-02 09:46 • 来自相关话题

我们常用的salesiq,有些时候那个浮动按钮并不是很适合部分网站的需求,有时候可能需要隐藏这个浮动按钮,然后通过其他方式弹出对话框。
仔细看一下html结构,我们可以发现这是可以实现的。
首先
.zsiq_floatmain{
    display: none !important;
}
这样可以隐藏浮动按钮,然后我们可以通过jquery的点击事件,弹出对话框
        $('#gotong_a').click(function(){
            $('.zls-sptwndw').addClass('siqanim');
            $('.zls-sptwndw').css('top','auto');
        });
 
 
 
over!! 查看全部
我们常用的salesiq,有些时候那个浮动按钮并不是很适合部分网站的需求,有时候可能需要隐藏这个浮动按钮,然后通过其他方式弹出对话框。
仔细看一下html结构,我们可以发现这是可以实现的。
首先
.zsiq_floatmain{
    display: none !important;
}
这样可以隐藏浮动按钮,然后我们可以通过jquery的点击事件,弹出对话框
        $('#gotong_a').click(function(){
            $('.zls-sptwndw').addClass('siqanim');
            $('.zls-sptwndw').css('top','auto');
        });
 
 
 
over!!

利用jquery api进行简单的批量替换链接

WordPressLeo 发表了文章 • 1 个评论 • 333 次浏览 • 2018-04-16 08:41 • 来自相关话题

$(".content-tel").children("a:first-child").attr("href","http://www.domain.com/contact");
 
 
如果有很多同样的元素要修改为同一个链接,那这样就省去了一个个页面修改链接的时间,提高效率 查看全部
$(".content-tel").children("a:first-child").attr("href","http://www.domain.com/contact";);
 
 
如果有很多同样的元素要修改为同一个链接,那这样就省去了一个个页面修改链接的时间,提高效率

分享一款前端交互效果较好的菜单插件superfish

WordPressLeo 发表了文章 • 2 个评论 • 362 次浏览 • 2018-04-13 09:24 • 来自相关话题

superfish基础版菜单
superfish垂直版菜单(适用于侧边栏)
superfish tab切换型菜单
superfish超级版菜单
分为这四个版本,https://superfish.joelbirch.co/examples/ 相关文件以及配置jq都有。 查看全部
superfish基础版菜单
superfish垂直版菜单(适用于侧边栏)
superfish tab切换型菜单
superfish超级版菜单
分为这四个版本,https://superfish.joelbirch.co/examples/ 相关文件以及配置jq都有。

jquery小思路

其他Leo 发表了文章 • 1 个评论 • 298 次浏览 • 2018-03-26 16:15 • 来自相关话题

碰到一个需求,可能是自己写html的时候走歪路了,本来是要给图片加个遮罩的,也很容易写好了,但是发现没有加载图片的时候,遮罩还是存在着。
那么我想了一下,可以做一个简单的if判断,当图片src值为空,那么遮罩隐藏
 
var imgsrc=$('.fourrightbox + img').attr('src');
        if(imgsrc == "" || imgsrc == null || imgsrc == undefined){
            $('.fourrightbox').css('display','none');
        }
 
隐藏方法有很多种,你也可以用jquery api里hide()等等 查看全部
碰到一个需求,可能是自己写html的时候走歪路了,本来是要给图片加个遮罩的,也很容易写好了,但是发现没有加载图片的时候,遮罩还是存在着。
那么我想了一下,可以做一个简单的if判断,当图片src值为空,那么遮罩隐藏
 
var imgsrc=$('.fourrightbox + img').attr('src');
        if(imgsrc == "" || imgsrc == null || imgsrc == undefined){
            $('.fourrightbox').css('display','none');
        }
 
隐藏方法有很多种,你也可以用jquery api里hide()等等

前端图片延迟加载和滚动下拉加载

其他Leo 发表了文章 • 2 个评论 • 306 次浏览 • 2018-03-26 11:35 • 来自相关话题

最近看到一篇文章,看了大牛的讲解,感觉整体还是比较容易理解的,可以尝试着玩玩。以下是转载的正文:前端页面的用户体验对于一个网站来说是至关重要的,我们在访问一些图片量比较大的网站的时候,往往会有这样的感受:显示在我电脑屏幕可视区域的图片总是不能及时的刷出来,这就造成了对于一些没有什么耐心的用户而言,他们就不愿意多等下去,索性直接关闭了网站去看其他的网站,这就使得本网站的用户量的流失,这往往是一个网站最不愿意看到的情况,那么对于这样的情况而言,开发者们不断的努力,很快就想到了解决的方案,让在可视区域的图片立即加载进来,而让不在可视区域并且需要通过滚动条进行滚动显示的图片在图片滚动到可视区域内再显示出来,这就比一次性把所有的图片资源加载进来从而造成图片刷新较慢的用户体验好的多的多。 
 那么,图片延迟加载的技术具体如何实现呢?下面来做详细的介绍: 
首先,定义图片为三列,一共有5行,具体代码如下:  










 
里面用到的bootstrap的布局技术(当然,这不是重点),请看img标签中的src,一开始我们并没有给它具体的图片的资源路径,而是自己定义了一个属性 x-src,该属性的值是图片图片的资源路径,每一行的img都是如此,接下来,当页面载入的时候,我们使用jquery(当然,你想javascript原生的代码也可以,我这里只是为了省时间而已)来循环遍历每一个img,判断每一个图片是否在当前可视区域内,是则显示图片,否则稍后处理,这里需要知道三个数据: 

             注:因为我所写的是当图片的一半进入的浏览器的可视区域内才将这张图片进行加载,所以需要第三个数据,这个看个人的需求是什么,如果你的需求是图片只要已进入可视区域内就加载,可直接忽略第三个数据!!!! 

                                   1:浏览器可视区域的高度 

                                   2:图片相对于文档的偏移量(这里只需要高度上的偏移量) 

                                   3:图片元素本身的高度 

             如果图片先对于文档的偏移量+图片元素本身的高度的一半    <  浏览器可视区域的高度,即表明图片已经有一半进入的可视区域了,那么我就应该要把这张图片加载进来了,可是img标签的src是为空的,x-src的值才是图片的资源路径,这个时候就需要用jquery将img 标签的x-src值传给src,从而将图片加载进来,具体实现代码如下: 





 
  查看全部
最近看到一篇文章,看了大牛的讲解,感觉整体还是比较容易理解的,可以尝试着玩玩。以下是转载的正文:前端页面的用户体验对于一个网站来说是至关重要的,我们在访问一些图片量比较大的网站的时候,往往会有这样的感受:显示在我电脑屏幕可视区域的图片总是不能及时的刷出来,这就造成了对于一些没有什么耐心的用户而言,他们就不愿意多等下去,索性直接关闭了网站去看其他的网站,这就使得本网站的用户量的流失,这往往是一个网站最不愿意看到的情况,那么对于这样的情况而言,开发者们不断的努力,很快就想到了解决的方案,让在可视区域的图片立即加载进来,而让不在可视区域并且需要通过滚动条进行滚动显示的图片在图片滚动到可视区域内再显示出来,这就比一次性把所有的图片资源加载进来从而造成图片刷新较慢的用户体验好的多的多。 
 那么,图片延迟加载的技术具体如何实现呢?下面来做详细的介绍: 
首先,定义图片为三列,一共有5行,具体代码如下:  

3126f528-4229-4019-8698-7cf085f1e8bf.png


abc884da-5167-4ecb-9e03-def86e9eed6a.png

 
里面用到的bootstrap的布局技术(当然,这不是重点),请看img标签中的src,一开始我们并没有给它具体的图片的资源路径,而是自己定义了一个属性 x-src,该属性的值是图片图片的资源路径,每一行的img都是如此,接下来,当页面载入的时候,我们使用jquery(当然,你想javascript原生的代码也可以,我这里只是为了省时间而已)来循环遍历每一个img,判断每一个图片是否在当前可视区域内,是则显示图片,否则稍后处理,这里需要知道三个数据: 

             注:因为我所写的是当图片的一半进入的浏览器的可视区域内才将这张图片进行加载,所以需要第三个数据,这个看个人的需求是什么,如果你的需求是图片只要已进入可视区域内就加载,可直接忽略第三个数据!!!! 

                                   1:浏览器可视区域的高度 

                                   2:图片相对于文档的偏移量(这里只需要高度上的偏移量) 

                                   3:图片元素本身的高度 

             如果图片先对于文档的偏移量+图片元素本身的高度的一半    <  浏览器可视区域的高度,即表明图片已经有一半进入的可视区域了,那么我就应该要把这张图片加载进来了,可是img标签的src是为空的,x-src的值才是图片的资源路径,这个时候就需要用jquery将img 标签的x-src值传给src,从而将图片加载进来,具体实现代码如下: 

d67418a9-a587-47a4-8d0b-fc4425a7dc2e.png