图片效果集合(js、jquery或html5)

时间:2023-01-13 18:41:30

1.jQuery HTML5 幻灯片
使用支持HTML5的浏览器会有特殊效果,即切换图片时颜色的改变
文章:http://keleyi.com/a/bjac/b8i3xdui.htm效果:http://keleyi.com/keleyi/phtml/html5/1.htm

图片效果集合(js、jquery或html5)

2. jQuery图片延迟加载
一开始不加载实图,只用灰图占位,当图片出现在视线中才加载实图,减少对服务器的压力。
效果网址:http://keleyi.com/keleyi/phtml/image/index.htm文章网址:http://keleyi.com/a/bjac/et551617.htm
图片效果集合(js、jquery或html5)

3.jquery使用ColorBox弹出图片组浏览层
使用ColorBox插件弹出图片组浏览层,半透明背景
文章:http://keleyi.com/a/bjac/141932b419e08101.htm
效果:http://keleyi.com/keleyi/phtml/colorbox/
图片效果集合(js、jquery或html5)

4.HTML5和jQuery实现彩图变灰与还原
初始时图片灰色,光标悬停彩色,离开又变灰色。
文章:http://keleyi.com/a/bjac/hso1iuv7.htm
效果:http://keleyi.com/keleyi/phtml/image/2/
图片效果集合(js、jquery或html5)

5. js插件使彩图变灰
使用javascript使彩图变灰,支持IE和Opera,而Chrome则支持得不好。

效果:http://keleyi.com/keleyi/phtml/image/3.htm
文章:http://keleyi.com/a/bjac/n2lodhc5.htm
图片效果集合(js、jquery或html5)

6.在图片上显示左右箭头的翻页
效果:http://keleyi.com/keleyi/phtml/picnext/
文章:http://keleyi.com/a/bjac/a6e756c811719fff.htm
图片效果集合(js、jquery或html5)

7.龙舟比赛
用javascript让静态的图片动起来。
效果:http://keleyi.com/keleyi/phtml/duanwu/index.htm
文章:http://keleyi.com/a/bjac/trj18bxu.htm
图片效果集合(js、jquery或html5)

8.jquery图片轮播切换
效果:http://keleyi.com/dev/453467666cab56d0.htm
文章:http://keleyi.com/dev/453467666cab56d0.htm
图片效果集合(js、jquery或html5)

9.纯js画图像,是图片不是图形
文章:http://keleyi.com/a/bjac/yg5xnh2t.htm
效果:http://keleyi.com/keleyi/phtml/image/4.htm
图片效果集合(js、jquery或html5)

10.HTML5特效 柯乐义触须
文章:http://keleyi.com/a/bjac/k3pi4ehx.htm效果:http://keleyi.com/keleyi/phtml/html5/2.htm
图片效果集合(js、jquery或html5)

图片效果集合(js、jquery或html5)的更多相关文章

  1. js,jquery,css,html5特效

    包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全 ...

  2. js,jQuery获取html5的data-*属性

    今天做项目的时候发现一个坑,关于jQuery获取data-*属性的方法data(),特写此篇来记录. data-*自定义数据属性 HTML5规定可以为元素添加非标准型的属性,只需添加前缀data-,这 ...

  3. js+jquery+html实现在三种不通的情况下,点击图片放大的效果

    js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定 ...

  4. JavaScript、jQuery、HTML5、Node.js实例大全-读书笔记3

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  5. javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)

    在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...

  6. javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)

    类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...

  7. JavaScript、jQuery、HTML5、Node&period;js实例大全-读书笔记2

    技术很多,例子很多,只好慢慢学,慢慢实践!!现在学的这本书是[JavaScript实战----JavaScript.jQuery.HTML5.Node.js实例大全] JavaScript.jQuer ...

  8. JQuery缓冲加载图片插件lazyload&period;js的使用方法

    lazyload.js是一个基于JQuery的插件,可以用来缓冲加载图片.如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动 ...

  9. 基于jquery的锚点滚动插件&lpar;百度百科效果&rpar; anchorScroll&period;js

    1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面 ...

随机推荐

  1. js正则表达式校验非正整数:&Hat;&lpar;&lpar;-&bsol;d&plus;&rpar;&vert;&lpar;0&plus;&rpar;&rpar;&dollar;

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. &period;Net反射机制分析和使用

    1..NET反射的概述 .NET反射是审查元数据并动态收集关于它的类型信息的能力. 应用程序结构分为应用程序域—程序集—模块—类型—成员几个层次,公共语言运行库加载器管理应用程序域.这些域在拥有相同应 ...

  3. 【转载】C内存对齐

    http://blog.csdn.net/hbuxiaofei/article/details/9491953 当你看到这个标题,仍想往下读的时候说明你已经开始关注数据在内存存储问题了. 好吧,下面先 ...

  4. neutron-----openstack网络操作

    #查看子网 openstack subnet list #删除子网 openstack subnet delete name/id #查看网络 openstack network list #删除网络 ...

  5. VS2010常用插件

  6. 《Linux内核精髓:精通Linux内核必会的75个绝技》一HACK &num;17 如何使用ext4

    HACK #17 如何使用ext4 本节介绍ext4的编写和挂载方法.开发版ext4的使用方法.ext4是ext3的后续文件系统,从Linux 2.6.19开始使用.现在主要的发布版中多数都是采用ex ...

  7. 前端学习 -- Css -- 伪类

    伪类和伪元素用来表示元素所处的一个特殊的状态,或者是一个特殊的位置 比如:访问过的超链接,比如普通的超链接,比如获取焦点的文本框当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类 为没访问过 ...

  8. Oracle replace&lpar;&rpar;函数

    往Oracle 中导入数据时,有一个列导入的数据应该时‘2017-04-17’ 的格式,结果导入的数据为 ‘2017/04/17’格式的,1000多条记录要一条条改基本不可能. 于是想到了replac ...

  9. 关于UML

    http://www.cnblogs.com/zfc2201/archive/2011/08/16/2141433.html

  10. BZOJ1082&lowbar;栅栏&lowbar;C&plus;&plus;

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1082 题解:http://www.cnblogs.com/hadilo/p/5924546.h ...