网页特效-天兴工作室

当前位置：首页 > 教程 > 网页特效

记录瀑布流+下拉无限加载+lightbox页面踩的坑

最近接了个单，页面需要瀑布流加上下拉无限加载，另外点击图片还要有灯箱效果。这种复杂程度的页面自己写显然毫无意义[重复造轮子不可取，另外这种程度的轮子造不出来...]直接上现成的库。瀑布流用...
2021-05-20 1309 ℃ 9 评论 masonry , infinitescroll , lightGallery ,
swiper做导航栏时自动跳转至对应分类的代码

给客户做一个zblog模板，手机端需要实现一个滑动导航栏的需求。分为上下两部分，一级分类显示在上面当导航栏，下面则显示该分类的子分类，左右滑动可切换。于是准备直接用swiper实现，直接new了两个Swiper对象，然后绑定切换，这个效果S...
2020-12-07 1805 ℃ 10 评论 swiper , zblog模板 , swiper导航栏 ,
css实现的图片连续横向滚动效果

今天用css写了个图片连续横向滚动，完成效果如下：总共用了两张图，一张背景图，一张滚动图，html结构如下：<div class="img-box"> &nbs...
2020-07-31 2943 ℃ 5 评论 css动画 , 图片滚动 ,
html图片和css背景图片哪个先开始加载？css占位图怎么操作？

如果你的网站是个图片站，首页显示了很多图片。那么你就会有图片多了导致加载比较慢的困扰。这个时候有几个方案解决。1、物理解决方案：加大网站的带宽+压缩图片大小；2、用图片懒加载js，图片没加载出来之前先加载个缓冲图片占位；3、也就是本文讨论的...
2020-04-10 2626 ℃ 11 评论 css占位图 , 懒加载 , css背景图 ,
css写三角形的原理和使用方法

之前一直用css写三角形，反正网上搜一个案例出来，能用就行。今天花了功夫弄懂了原理和使用方法，记录下来，希望能对跟我基础一样弱的人有所帮助。首先css写三角形是通过border实现的，大多数人用border就是定义边框的。所以要用borde...
2019-11-30 1966 ℃ 3 评论 css3 , css三角形 , css特效 ,
一个输入框调用多个搜索引擎的js代码

要实现的方法是这样的：一个输入框输入关键词，可以调用多个搜索引擎搜索，实现代码是如下：<divclass="searchclearfix">...
2019-08-17 3887 ℃ 5 评论搜索引擎 , js代码 ,
一个纯html+css的下拉导航动画效果

这是天兴工作室自己折腾的一个纯html+css写的下拉导航动画，代码如下。html部分：<div class="nav"> <ul ...
2019-01-24 4598 ℃ 8 评论下拉导航 , 下拉导航动画 ,
JQ特效之：页面向上滚动时弹出模块

页面向上滚动弹出模块这个特效比较适合资源类网站，用户来到你的网站后一般动作就算向下翻页找，找着找着发现没找到，一般会回到顶部去找导航栏之类的，这个时候就会产生一个向上滚动的动作。这个时候就适合弹出一个搜索框提醒用户可以直接通过搜索找到想要的...
2018-06-09 4492 ℃ 6 评论向上滚动 , jq特效 , 网页特效 ,
比较简单易懂的跟随滚动侧栏模块 JQ+html+css

一个跟随滚动条滚动而固定的侧栏模块被认为是放广告位或者推广网站最理想的地方，本文就来详细说下这个效果应该怎么搞。首先声明：以下代码纯属个人瞎折腾，如有错漏欢迎指出。这个效果需要用到JQ，所以一定要引入JQ库。html代码：<div&n...
2018-03-25 4266 ℃ 0 评论跟随滚动模块 , js代码 , jq特效 ,
一个页面可多处重复使用的简单tab标签jQuery代码

之前一直用“SuperSlide”这个js框架写tab标签或者其他一些效果，但是后来慢慢发现，写zblog主题用不上这么大的js框架，特别是SuperSlide对手机端很不友好，所以现在没怎么用了。现在页面的一些简单的js效果都慢慢开始手写...
2018-01-11 4376 ℃ 0 评论 tab标签 , jQuery代码 , 网页特效 ,

‹‹ 1 ››

网页特效

记录瀑布流+下拉无限加载+lightbox页面踩的坑

swiper做导航栏时自动跳转至对应分类的代码

css实现的图片连续横向滚动效果

html图片和css背景图片哪个先开始加载？css占位图怎么操作？

css写三角形的原理和使用方法

一个输入框调用多个搜索引擎的js代码

一个纯html+css的下拉导航动画效果

JQ特效之：页面向上滚动时弹出模块

比较简单易懂的跟随滚动侧栏模块 JQ+html+css

一个页面可多处重复使用的简单tab标签jQuery代码

这是标题

这是标题

这是标题

天兴工作室 | www.txcstx.cn