文档章节

js 各种图片特效

yifon
 yifon
发布于 2014/05/31 12:56
字数 5348
阅读 2520
收藏 39

图片特效

  • JavaScript封装的平滑图片滚动,绝不用jQuery

  • JavaScript封装的平滑图片滚动,绝不用jQuery,我感觉这肯定是位Js高人所为,封装的不错啦,注释内容也很多,研究Js的看看~~~~

  • 竖向图片滚动JavaScript封装版,无jQuery

  • 竖向图片滚动JavaScript封装版,无jQuery,希望大家喜欢,效果确实不错。

  • 纯CSS实现鼠标移上图片添加阴影效果

  • 这个效果挺实用,当把鼠标放到一幅静止的图片上,图片的四周边框会出现阴影,具有立体感的效果,代码是第二次修正,能适应大小...

  • JS图片切换,带缩略图版

  • JavaScript图片切换,带缩略图版,5屏图片幻灯,其实更多一些图片也是可以的,你只需更改数组就行,不过要对布局做些调整。

  • JavaScript图片放大技术代码示例及注释

  • JavaScript图片放大技术代码示例及注释,一个比较热的话题,如何用最简单、最兼容的方法写出图片放大技术,大家一直都在关注,...

  • 纯JS图片批量预加载技术代码

  • 一款实用的图片预加载技术,真正实现加载完成显示图片,加载过程中显示进度指示,本加载可以批量进行,将成批图片加载完成才显...

  • 在图片上单击获取图片原始大小

  • 在图片上单击鼠标,获取图片的原始尺寸大小,变通一下我们可以实现让图片随网页的大小而自动适应,我们可以判断如果图片超出规...

  • 禁止在图片上使用右键

  • 为了阻挡一般用户不能使用图片另存为的功能,这里使用JavaScript对右键菜单做了限制,当在图片上点击右键的时候,会弹出一个提...

  • 图片友情链接滚动,横向,带控制按钮

  • 超不错的图片友情链接滚动特效,横向排列,带控制按钮,这里已经将横向锁定,不能将其修改为竖向的,否则会出错,专一用于横排的图片...

  • CSS使用图片完美修饰的全兼容圆角框

  • CSS列表圆角,在四个角使用了图片,使用图片的好处是兼容性好,在火狐、IE下均有良好表现,而且代码也很少,学习CSS的朋友不妨...

  • 根据鼠标放上切换内容制作的图片导航

  • 根据鼠标放上切换内容制作的图片导航,比较大气的感觉,在图标交替的同进加入了淡入淡出特效,整体效果和一个Flash导航没什么...

  • Javascript 仿Flash图片轮翻

  • Javascript 仿Flash平滑效果的图片轮翻,完全用JavaScript代码实现,图片轮番间隔、按钮每次移动的距离以及图片显示框的...

  • 来自腾讯的JavaScript图片滑动

  • 来自腾讯软件频道的JavaScript图片滑动效果,纯JS实现的,比较平滑的效果,像是使用了jQuery,很实用,拷贝代码到你的网站就可...

  • 图片控制内容框的文字上下翻滚

  • 图片控制内容框的文字上下翻滚,JavaScript一款文字滚动特效,Google广告有这种功能。用到网页上也不错,鼠标放到图片上滚动就...

  • 鼠标移上图片,变换出大图片

  • 又一个JavaScript图片展示特效,鼠标放到图片上会切换到对应的大图并显示,大家在以往见的估计有不少了,自己做的,通过编写这...

    • JavaScript真正的鼠标放上动画加载大图的代码

    • 真正的JavaScript鼠标放上加载大图的效果,唯一不爽的地方是没有Loading,在淘宝网的商品列表中有这样的效果,有些朋友很想要...

    • 按比例缩放图片,JavaScript代码

    • JavaScript按比例缩放图片,找了好放终于找到了,可能是我发现的最好用的JS缩放图片代码,直接放到你的网页中,稍微设置一下,...

    • JavaScript 生成弹性透明的图片放大代码

    • JavaScript 算法生成弹性透明的图片放大效果,代码值得看一下哦,弹性和缓冲是一个意思,JS缓冲效果在网页中使用很频繁,...

    • 浮动的图片广告

    • 一个浮动的图片广告,和漂浮广告有点像,不过作者改动了代码,改变了运动轨迹,增加了感应鼠标停止的功能,图片大孝速度、转变...

    • JavaScript让图片按顺序依次加载

    • JavaScript让图片按顺序依次加载,手动排序的结果,有点遗憾不能设置每个图片加载的时间,有兴趣的完善一下。

    • 规定区域的JS拖动展示效果

    • 规定区域的JS拖动展示,运行看下效果你就明白了,在指定区域内显示图像,鼠标可以拖动图像查看,自动感应图像边界,非常不错。

    • NBA网站大幅JS焦点图切换

    • NBA网站的大幅焦点图切换效果,代码里有较多的注释,适合研究一下,图片是远程地址,你最好保存到本地,本焦点图是动态变化,...

    • JavaScript随机图片显示

    • JavaScript随机图片显示,每次刷新一下网页就会载入不同的图片,可以用作广告功能,不过广告商一般都不希望自己的广告是随机显...

    • 纯CSS代码实现的图片列表滚动

    • 纯CSS代码实现的图片列表滚动,就像有些网站的图片友情链接的功能一样,有拖动条哦,采用CSS实现类似框架的效果,好处是对搜索...

    • 鼠标滑过,缩略图放大显示(纯CSS)

    • 纯CSS实现鼠标经过放大图片,可能不是太好,因为缩略图实际上加载的仍然是完整的大幅图片,只不过是用CSS控制了显示的区域,因...

    • 前后轮翻的JS图片幻灯切换

    • 前后轮翻的JS图片幻灯切换,和普通的图片切换没有什么区别,区别在于图片的切换方式上,用到了一些prototype的相关技术,自动...

    • CSS实现自适应的图片背景边框

    • CSS漂亮的图片边框,边框是用背景图片修饰的,不过可以自适应大小,这点挺实用的,不论你的图片有多大,它始终显示在图片的外...

    • 鼠标放到图片上会滑出提示文字

    • 鼠标放到图片上会滑出提示文字,不用多介绍了,运行一下就知道效果了。

    • 可控的纵向图片滚动

    • 纵向的图片滚动,上下各有控制按钮,点击图片框内的图片就可以向上或向下滚动,滚动步升请根据你的网页布局和其它要求自行修改。

    • 最简的JavaScript鼠标经过切换图片

    • 最简的JavaScript方法实现鼠标经过切换图片,学习JS的朋友可以试着加一个LOADING,这样就上水平了,本代码可以很好的嵌入到ASP...

  •  

    • Js图片连续左右滚动代码

    • 发一个自己写的JavaScript可控的图片滚动,横向左右滚动,可能还有些不完善的地方,也欢迎指正,鼠标放到控制按钮上就可以控制...

    • CSS完成神奇创意的相框

    • Magic Photo Frame 神奇创意的CSS图片相框,这里只是介绍一种方法,至于相册的形状你完全可以自己制作,注意相...

    • 鼠标经过图片由灰色变彩色

    • 鼠标经过图片由灰色变彩色,不少学CSS的朋友再问这效果怎么实现,本段代码只是其中一个的实现方法,这个方法有点笨,就是用两...

    • 图片型不规则菜单的CSs实现方法

    • 不规则导航菜单的CSs实现方法,呵呵CSS部分其实很容易,就是图片处理稍嫌麻烦,需要一个一个把图片处理好让CSS调用,不过,做...

    • 自写Js+CSS轮显效果

    • 自已写的JavaScript轮显切换效果,虽然还不是十分完美,但作为自己的一点小成就奉献给大家,示例里的文字可以换成图片,这样图...

    • JavaScript 图片滚动(绝对酷)

    • 超酷的JavaScript图片横向滚动,Js滚动类已经封装,为了设置方便,单独摘出了控制程序,可以设置图片滚动框宽度、翻页宽度、滚...

    • 向上翻动的内容切换示例

    • 向上翻动的内容切换示例,其实类似一个广告的滚动,完全基于JavaScript的实现,美化一下,在滚动框中放入图片,想必效果会不错。

    • JavaScript 由左向右的图片渐变过渡

    • JavaScript 由左向右的图片渐变过渡效果,给人一种新鲜感,有点遮罩的意思,代码可以再次优化哦。

    • CSS+JS滚动图片功能代码

    • CSS+JS联合打造带控制按钮的滚动图片功能代码,超好用,而且效果不错,希望大家能够喜欢。

    • 像弹簧一样抖动的横向图片滚动

    • 基于JavaScript的横向图片滚动,在每一次滚动完成当前图片都会像弹簧一样抖动两下,很有趣的效果,没有使用JS插件,使用起来挺...

    • 清爽简洁的图片交替导航效果

    • 风格简洁的图片切换,没有过多修饰,看上去挺清爽,当前图片滚动到哪一张,下面的文字的背景会变色,带有三角导航以指引当前的...

    • JS实现鼠标悬停图片交换

    • 鼠标悬停图片交换,JS配合实现的功能,在早两年是这种叫法,现在可以用CSS直接实现,至于实现的方法,要看你的需求,点击运行...

    • 右下角随机显示的JS图片广告

    • 在右下角随机显示的图片广告,随机的形式是载入图片的顺序没有规律,完全由程序随机调用的图片,至于显示在什么地方,这个是灵...

    • Js拖动特效,一串水晶球

    • 请等待图片加载完成,比较炫的一个创意,你自行车的链条一样,鼠标拖动水晶球,模拟了系在一起的物体的运动过程,那些小球也挺...

    • CSS强制等比例缩小图片

    • CSS等比例缩小图片,实用性较强的一个CSS技巧,等比例一般都是在我们规定的高度或宽度超出范围时候,另图片以高或宽为基准按比..

  • .

    • 点击显示大图的JS效果

    • 又一个点击出现大图的效果,个人感觉效果不是太理想,因为虽然实现了放大图片,但实际上显示小图的时候仍然需要下载大图,这样...

    • 有点炫的JavaScript立体图片展示

    • 图片3D展示,鼠标晃动的时候图片跟着就动了,点击的时候会稍微放大一些,不同的角度会出现不一样的效果,JavaScript与CSS结合...

    • 一个载入图片等待状态的Loading效果

    • 图片载入Loading效果,当图片没有载入的时候,显示正在加载中,当加载完成出现图片,LOADING可以有效防止资源浪费,提升用户体...

    • 鼠标经过图片时显示半透明文字,边框变色

    • 这是个很常见的图片显示特效,当鼠标经过图片的时候,图片上浮动一个半透明的层,层内显示文字,同时图片边框变亮,视觉效果相...

    • 用CSS实现图片的双边框效果

    • 纯CSS实现图片的双边框修饰效果,鼠标经过图片时换色,这是一个比较基础的CSS美化实例,先定义存放图片的容器边框,再定义IMG...

    • JavaScript图片特效

    • 一个老外完成的JS图片特效,运用了特殊算法,将多幅图片组合在一起,使浏览器变得智能起来,当移上某个图片的时候,图片会慢慢...

    • 图片点击后变灰色的CSs代码

    • 图片点击后变灰色的CSs代码,效果虽好,但是感觉不太实用,因为CSS代码有点繁琐,如果图片多的话,CSS代码会大的历害,仅供学...

    • 美化过的匀速图片滚动

    • 经过美化过的匀速图片滚动,速度在JS函数里可以自己调整,带有注释,数值越大滚动越慢。为了节省下载时间,这里的图上用文字代...

    • JS模拟Windows的图片放大特效

    • JS模拟Windows的图片放大特效,两边有控制按钮,不是真正意义上的放大,因为图片的像素没有达到的话,放大也也照样不清淅哦。

    • QQ网支持火狐的图片切换效果

    • QQ网支持火狐的图片切换效果,设计得很漂亮,还带有渐变效果。注意,这里的CSS以及图片都是调用腾讯网的,时间长的话有可能会...

    • JS图片翻页效果

    • 简单的图片翻页效果,用好了还真不错,这里没有美化,图片也是临时找的,所以整体效果有些简单了,如果加上你的美化,应该是不...

    • CSS将图片自动变为圆角

    • 最近见到Facebook网站的图片圆角很特别,将一张方角的图片经过CSS定义后自动变成了圆角,后来研究了一番,发觉是用CSS控制一个...

    • CSS 图片放大查看特效

    • CSS制作的图片查看特效,鼠标放上后出现放大的图片,带漂亮的边框修饰,还可以加入简短的图片说明。

    • 可以点击控制的手机图片滚动切换

    • 一个JavaScript图片滚动切换,点击两侧的按钮可实现左右滚动控制,请注意一次滚动的距离要和你的图片的宽度配合起来,本实例中...

    • 图片雷达效果,像光照一样

    • 不知道该如何形容这种效果,就叫做雷达效果吧,像一束光一样照亮整个图片,背景图片变暗,这里是用CSS降低了图片的透明度。个...

    • 天极网的JS卡通图片切换

    • 来自经典论坛的一款仿天极网图片切换特效,含有详细的设置说明,使用起来比较简单。请在开始时设置图片目录、标题长度、图片切...

    • CSS制作的类似相册浏览的功能

    • 用CSS制作一个ImageView,类似一个相册浏览的功能,重点研究一下层与布局,调用了一个远程Google的文件,整体效果感觉不错。

    • JavaScript图片预加载代码,显示loading

    • JavaScript图片预加载技术,和平时大家说的网页loading有点像,本代码真正实现了加载完图片再显示的功能,如果图片没有下载完...

    • 图片围成环形滚动,有空间感

    • 图片围成环形来回滚动的图片特效,有立体感,而且设计的也挺不错,演示中源码爱好者去除了部分图片,为了让页面加载更快,如果...

    • 按钮可以控制的JS横向图片滚动

    • 一个JavaScript图片滚动效果,与其它不同的区别是,它是可以被控制的,向左向右滚动都需要点击两端的小箭头,图片滚动时候带有...

    • 仿265网站LOGO,会盯着你看的眼睛

    • 仿265网站LOGO,会盯着你看的眼睛,会跟着你的鼠标转,有意思吧?这可是用JavaScript实现的哦,学习JS控制图像很不错的实例。

    • 鼠标经过图片时,出现说明文字

    • 纯CSS代码特效,当鼠标经过图片时,图片弹出说明文字,文字背景半透明,同时图片的边框会变换颜色。

    • 经典的图片切换

    • 一个比较经典的JavaScript图片轮番切换代码,使用相当方便,图片列表完全可以由你从数据库中取出,这使得你有可能将其布置到你...

    • 从两侧向中间拼合的JavaScript图片切换效果

    • 从两侧向中间拼合的JavaScript图片切换效果,请注意在调用图片的时候图片的长宽要和CSS里面设置的一样大,要不然出来的效果可...

    • 腾讯QQ网站的Js图片切换

    • 腾讯QQ网站的图片切换特效,非常大气,纯JavaScript实现,效果很不错,现在腾讯正在用的功能,演示调用了腾讯的图片,如果图片...

    • JS图片滚动,从右向左滚动

    • JavaScript图片滚动,看了一下代码,好像这方法挺简便的,容易修改,滚动无空隙,循环连续滚动,鼠标放上后停止,中间部分代码...

    • CSS强制按比例缩小图片

    • CSS强制按比例缩小图片,有时候图片太大,会破环网页整齐的布局。这时可以用css来强制按比例压缩图片的高度或宽度。

    • JavaScript图片翻转,垂直和水平

    • JavaScript垂直和水平翻转图片,翻转过程中你可以和原图进行比较,本实例仅水平和垂直翻转,暂不能指定旋转角度,仅供参考。

    • 精美图片滚动

    • 精美的JS图片水平向左滚动,设计的比较好,看上去视觉效果很不错。

    • 仿淘宝星星投票,兼容性好

    • 仿淘宝星星投票,兼容性好,淘宝网在交易完毕后有一个星星投票,看着很漂亮。

    • 点击图片,把图片放大,最简单的实现方法

    • 点击图片,把图片放大,最简单的实现方法,没有修饰效果,同时对图片的比例没有加以判断,有时候放大会造成图片失真,不过方法...

    • 图片闪烁代码

    • 图片闪烁代码,闪的挺来劲,用JS实现起来非常简单,这时注意时间间隔这个参数,数值越大闪烁越不连续,数值越小闪烁越历害,你...

    • JavaScript动态控制图片透明度的变化

    • JavaScript动态控制图片透明度的变化,这里所放说的动态是指“适时变化”,也就是用JS去控制CSS在1秒钟或者2秒内高频率改变多...

    • 马赛克效果的JS图片切换代码

    • 像马赛克效果一样的图片切换技术,每一张都可以加链接,相信我们在不少网站上都已经见到过本效果。

    • JavaScript改变图片透明度,鼠标放上渐渐显示

    • JavaScript改变图片透明度,当我们把鼠标放到图片上的时候,图片的透明度慢慢变大,图片越来越清淅,也就是大家常说的图片渐变...

    • JS+CSS给图片加上鼠标滑过的方框

    • JS+CSS给图片加上鼠标滑过的方框,其实用CSS也可以实现哦,感觉这里用JS有点多余呢……

    • JS漂浮图片,点击图片后会关闭

    • 点击图片后,图片关闭的JS代码,类似漂浮广告的效果,只不过这里的关闭事件是图片本身,如果再加上“关闭”两个字,将事件驱动...

    • 亮丽的JS图片渐变导航

    • 亮丽的JS图片渐变导航,打开演示页面后,请等待片刻,需要图片加载完毕后才能看到效果。鼠标放到图片上,第一张淡出,第二张淡...

    • JavaScript获取远程图片大小(长度和宽度)

    • JavaScript获取远程图片大小,这里是需要获取图片的长度和宽度,而并非占用空间大小,获取完毕后以Alert弹窗的形式返回数值,...

    • 很有意思的图片分裂复制效果

    • 很有意思的图片分割效果,你可以点击任意一个图片,会看到图片会成对分裂复制,无限制下去,就像链式反应一样,运行一下,看看...

    • 图片旋转构成3D圆环的展示特效

    • 很炫的图片展示特效,由一组图片构成一个3D的圆环状,并自动旋转,鼠标放到某一图片上会自动停止,JavaScript 的功能真够...

    • JS点击小图预览大图(仿淘宝)

    • 仿淘宝网的商品图片预览效果,点击小缩略图会生成预览大图,这里的生成是指调用,当鼠标放到小图上时激活脚本,开始加载大图,...

本文转载自:http://blog.sina.com.cn/s/blog_745d6b010101d3gt.html

共有 人打赏支持
yifon

yifon

粉丝 10
博文 37
码字总数 29078
作品 0
广州
程序员
加载中

评论(3)

melody9527
melody9527
更改
首席装逼官-CSO
首席装逼官-CSO
没一个好看的。实用性也一般,功能,体验,精致结合才是王道。
许雷神
许雷神
厉害,谢谢分享
8种Javascript过渡特效

看过很多后,本人觉得jQuery scrollable 在其中算很优秀的。 以下转自:http://paranimage.com/8-kinds-of-transition-effects-javascript/ 8种JavaScript 过渡特效 , 涵盖淡入淡出、翻转特...

晨曦之光
2012/03/09
0
0
面向对象,更适合JavaScript

面向对象程序设计是软件开发中一个很庞大很复杂的话题,它并不是仅仅学会类、继承、封装、多态这些面向对象编程语法元素就表示掌握的,这些语法元素只是实现面向对象程序的工具, 就像砖块、...

陈宏鸿
05/07
0
0
jQuery特效---菜单伸缩展开收起效果

jQuery特效---菜单伸缩展开收起效果 演示地址:http://www.iiwnet.com/js_menu/998.html 演示图片: 更多:JS特效 核心代码如下 <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitiona...

西西爱OS
2012/10/17
0
1
javascript学习资料分享

有志于web前端工作的话,javascript的知识是必不可少的。越学,我越觉得自己所欠缺的越多。路漫漫其修远兮,吾将上下而求索。下面将一些好的资料分享给大家。 JavaScript学习资料: (1)遇见...

小微
2012/04/06
0
5
JavaScript浏览器地址栏特效之无敌风火轮特效

这篇文章和大家分享一个 javascript 在浏览器地址栏上的特效,非常的有趣。它可以使页面上所有的图片元素一个个得排列起来并不停的转圈。因为转圈弧度为半圆且棱角分明,我们姑且称之为风火轮...

脚本编程网站
2013/04/26
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

c语言之内存分配笔记

先看一个数组: short array[5] = {1,2} // 这儿定义的一个int类型的数组,数组第1和第2个元素值是1和2.其余后面默认会给值为0; 或者 short array[] = {1,2};//这儿数组第1和第2个元素,数组...

DannyCoder
48分钟前
0
0
Shell | linux安装包不用选择Y/N的方法

apt-get install -y packageOR echo "y" | sudo apt-get install package

云迹
今天
1
0
Hadoop的大数据生态圈

基于Hadoop的大数据的产品圈 大数据产品的一句话概括 Apache Hadoop: 是Apache开源组织的一个分布式计算开源框架,提供了一个分布式文件系统子项目(HDFS)和支持MapReduce分布式计算的软件架...

zimingforever
今天
4
0
八大包装类型的equals方法

先看其中一个源码 结论:八大包装类型的equals方法都是先判断类型是否相同,不相同则是false,相同则判断值是否相等 注意:包装类型不能直接用==来等值比较,否则编译报错,但是数值的基本类型...

xuklc
今天
2
0
NoSQL , Memcached介绍

什么是NoSQL 非关系型数据库就是NoSQL,关系型数据库代表MySQL 对于关系型数据库来说,是需要把数据存储到库、表、行、字段里,查询的时候根据条件一行一行地去匹配,当量非常大的时候就很耗...

TaoXu
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部