首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

图片时载入的渐显特效JQuery

图片时载入的渐显特效JQuery 作者:matrix 被围观: 4,685 次 发布时间:2011-10-01 分类:Wordpress 兼容并蓄 | 2 条评论 » 这是一个创建于 3987...原理: 这个特效是少有的即华丽又加速的效果,因为它能判断访客是不是在查看当前图片,若非则加载预留的填充图片 grey.gif ,等到访客滑动鼠标滑轮或浏览到图片位置时,真正的图片地址才会加载。...实现方法:  jquery.lazyload.js 预填充图片 fill.gif 下载地址: http://www.400gb.com/file/29068037 http://yfdisk.com/...shareid=1087994774&uk=3238236832 将压缩包内两文件,放到WordPress的某个目录,或者你直接在外站调用。...不知道是什么原因,在主题的header.php中无法加载) 中适当位置添加下面 JS调用代码: 【http://hhtjim.com/jquery.lazyload.js部分请自定义地址】 【("img

16.7K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Cocos Creator 如何制作拼图游戏,支持无规则形状!

    其中每个碎片,使用特定形状的遮照,挡住背景,实现部分显示效果。...碎片的遮照 碎片考虑到是特殊形状,我这个实现方式,有个要求,就是碎片四周凸起的高度,都要是一样的,没有凸起的位置,使用透明边补充起来,这样是为了方便计算位置,算法也通用,只要给出几行几列,背景图的大小...比如上图,上下左右四个方向的红色箭头所标记的宽度,需要保持一样,这样的话,算上透明边,每张遮照图都是等宽高的图了,至于凸起或者凹陷的部分,根据需要去调整就行,只要保证凸起和凹陷的高度一致即可。...碎片的显示 有了上一步的碎片遮照,就只需要使用 Mask 来控制显示背景图的位置即可,比如本demo 中的背景图,如果需要显示左上角的那个碎片,适当移动背景图的位置,就能像下图这样进行显示。...吸附效果实现 松开鼠标以后,遍历碎片可能在的所有位置,选择一个离拖动碎片距离最近的点,通过 moveTo 移动到对应坐标点,即可实现吸附效果,操作过程中,注意父节点的变化以及坐标点的变换,如果没有计算对

    2.2K30

    前端特效开发 | 图片翻转的制作

    如上效果,当用户将鼠标移入到每一张图片上,当前的图片会有一个翻转消失的效果,同时有一个图片描述信息的面板会翻转出现。而当鼠标移出图片时,原有的图片会翻转出现,面板信息会翻转消失。...2.2 基本功能逻辑 首先使用JS实现动态添加翻转后展示的信息面板; 然后借助jQuery的hover方法,实现鼠标移入移出的功能; 最后针对不同的翻转变化,让图片与信息面板发生相反的效果展示。...案例实现 3.1 添加面板信息 在鼠标移入相应的图片时,需要让图片可以翻转消失,同时有一个信息面板可以翻转出现。...;第二个函数表示的是鼠标移出发生的事情。...DOCTYPE html> jquery hover鼠标悬停图片旋转动画展示

    3.9K71

    WEB入门之十八 动画特效

    ,图片在1000毫秒内显示;鼠标离开按钮时,图片慢速隐藏。...2:滑动的广告 ​训练技能点​ Ø jQuery自定义动画函数 ​需求说明​ 当单击左右两个箭头图片时,该箭头图片有灰色变为红色,同时控制一组广告图片左移/右移。...3:滑动的横向菜单 ​训练技能点​ Ø jQuery内置动画函数 ​需求说明​ 模拟实现一个如图8.2.3所示的横向菜单,当鼠标悬浮到横向菜单上时,其子菜单 淡入显示;当鼠标离开横向菜单时,其子菜单淡出隐藏...自定义动画函数 ​需求说明​ 图8.2.4和图8.2.5展示了网页侧边菜单,默认是关闭状态,当鼠标悬浮到上面时,侧边菜单就滑出来;当鼠标离开时,侧边菜单就收缩回去。...​训练技能点​ jQuery内置动画函数 ​需求说明​ 图8.2.6显示的是广告图片,默认透明度偏暗,当鼠标悬浮到某个图片时,该图片变亮,离开时恢复变暗。

    7610

    WEB入门之十八 动画特效

    ,图片在1000毫秒内显示;鼠标离开按钮时,图片慢速隐藏。...2:滑动的广告 训练技能点 Ø jQuery自定义动画函数 需求说明 当单击左右两个箭头图片时,该箭头图片有灰色变为红色,同时控制一组广告图片左移/右移。...3:滑动的横向菜单 训练技能点 Ø jQuery内置动画函数 需求说明 模拟实现一个如图8.2.3所示的横向菜单,当鼠标悬浮到横向菜单上时,其子菜单 淡入显示;当鼠标离开横向菜单时,其子菜单淡出隐藏。...自定义动画函数 需求说明 图8.2.4和图8.2.5展示了网页侧边菜单,默认是关闭状态,当鼠标悬浮到上面时,侧边菜单就滑出来;当鼠标离开时,侧边菜单就收缩回去。...训练技能点 jQuery内置动画函数 需求说明 图8.2.6显示的是广告图片,默认透明度偏暗,当鼠标悬浮到某个图片时,该图片变亮,离开时恢复变暗。

    15410

    回顾自己三次失败的面试经历

    他原话的意思是说,让我用jQuery写个轮播图效果,给我提供的条件是,一台没有联网的笔记本电脑,和本地下载好的jQuery的API文档。...回去之后,我便开始研究,如何用jquery去实现轮播图的效果。在这里,我简单地说下,当时很多购物网站(比如说淘宝京东)都会添加商品的图片轮播效果。...然后当想切换到某个index 的图片时,则采用修改ul的left值来实现。比如显示第一张图片初始定位left值为0,要想显示第二张图则将left值修改为-400px即可。...最后就是给li控制按钮(小圆点或者是小长条)绑定事件处理函数,当鼠标移入清除定时器,反之则启动定时器。 大概的原理便是如此,所以说,轮播图最简单也最困难,图要张张轮着播,还要丝滑无缝隙。...现在需要我们先来捋一下思路,分析一下构造器里需要的属性: 初始化所有的样式操作 显示在对应的容器操作 鼠标进入事件 自动播放事件 在这些基本的事件中,我们需要注意调用的顺序,如创建在初始化之前,我们可以把一些通过的属性放到原型链中来编写

    1.8K90

    Excel催化剂功能第11波-快速批量插入图片并保留纵横比

    视频演示 功能介绍 插入图片_图片来源于选定图片 此功能用于单个图片插入,从硬盘上选择要插入的单张图片,然后把图片插入到想放到的Excel单元格区域中(可多个单元格的矩形区域) 插入图片-选择文件...,勾选此按钮,插件查找图片时,不止于在最顶层文件夹查找,还会从父文件夹下的子文件夹里查找,勾选后可能会有些查询性能的影响,请根据实际情况酌情操作。...3.插入的图片的内容在A列,最终图片存放到B列,即列偏移一个单位 4..插入的图片是从【F:\test\不同规格图片】文件夹中查找,查找模式包含子文件夹 多图插入-参数配置完的插图场景 多图插入-插入图片演示效果...未找到图片时高亮颜色显示 当需要插入的图片,有部分在图库文件夹里找寻不到,插件将会对其单元格底色进行标注,方便后续想查找哪些单元格没有图片时只需用Excel自带的颜色筛选即可查找得到。...同时若只想删除单张图片,可以右击鼠标即可在弹出框的提示下删除图片。 多图插入-鼠标双击放大图片 多图插入-鼠标右击删除图片

    1.3K30

    【数据可视化】Echarts的高级功能

    ECharts提供了多图表联动(connect)的功能,连接的多个图表可以共享组件事件并实现保存图片时的自动拼接。多图表联动支持直角系下tooltip的联动。...注意,如果ECharts主题中需要使用到jQuery,那么还应该再在页面中引用jQuery的.js文件。 (3)指定主题名。...在ECharts 4.x/5.x的shine主题柱状图代码中,首先引入主题的.js文件,同时,由于主题需要使用jQuery,所以也需要引入jquery-3.7.1.js文件。...在添加鼠标单击事件的柱状图代码中,通过on方法绑定鼠标的单击事件(click),鼠标事件包含一个参数params,通过params.name获得用户鼠标单击的数据名称,再通过window.alert方法弹出一个对话框...(4)将网页文件拖放到打开的Google浏览器中。

    51110

    前端架构师之01_JQuery

    mouseover([[data],function]) 当鼠标移入对象时触发 鼠标事件 mouseout([[data],function]) 在鼠标从元素上离开时触发 鼠标事件 click([[data...焦点图的各个图片(即需要轮播的图片)依次横向排列。...设置焦点图的外边框的宽度以及超出隐藏,限定其只能显示一张图片。 切换到下一张时,只需要修改焦点图外层样式中的left值,就可以将焦点图整体向左移动,从而显示第2张图片。...当焦点图显示到最后一张图片时,再向左切换就会回到第一张图片,这就是无缝切换效果。...为了实现这种效果,将第一张图片连接到最后一张图片的后面,然后等这张图片向左移动直到完全显示之后,立即将焦点图的left值设为0,就切换到第1张图片了。

    6900
    领券