随笔分类 - 图片特效代码
各类精彩图片特效代码。
摘要:代码简介:又一个CSS图片边框阴影效果,很不错的,自动适应图片大小,也就是背景会随着图片的大小自动改变,不失真,从国外网站搞下来的,用到有两个背景图像,预览时可以下载。虽然有时候可以不用背景图像就可以实现CSS阴影,但感觉用图片实现的这种效果看上去更自然一些。代码内容:View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html
阅读全文
摘要:代码简介:CSS的“Lightbox”是一个人见人爱的图片显示技术,她可以实现点击小图无刷新显示大图的功能。Discuz论坛就有这种功能,不过好像它还用有JS,这一款没有用到JS,完全用纯CSS实现,而且用起来非常方便。注意,图片的边框和大小这个根据你的网页布局自己设置一下,这里只是演示一下,不一定正好适合你的网页。代码内容:View Code <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head><title>用CSS防Lig
阅读全文
摘要:代码简介:一款比较平滑的图片抖动特效,鼠标放到图片上触发JS函数,记得QQ聊天有一个窗口抖动效果,和这个类似,很可爱。代码内容:View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><titl
阅读全文
摘要:代码简介:一个JS完成的图片切换特效,手动更新,目前限制为4张图片,当然这个是可以自己修改的,如果更改此数字,那么要相应的增加图片单元,否则JS会报错或无法显示图片。本特效很小巧,代码也不是太多,因些适合二次修改。代码内容:View Code <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>JS+CSS实现4张图片滚动切换代码 - www.webdm.cn</title&g
阅读全文
摘要:代码简介:一个基于JavaScript的新闻类图片切换特效,一张一张自动循环播放,虽然没有什么华丽的修饰功能,但这款图片幻灯切换的最大优点是可以很好的和动态语言ASP/PHP/ASP.NET结合,从数据库中读出图片地址,自动生成图片幻灯切换单元,大大增加了它的实用性,对CSS比较熟悉的朋友,你完全可以将Table部分变为标准的CSS。代码内容:View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht
阅读全文
摘要:代码简介:超好的图片幻灯切换效果,带缩略图,响应鼠标滑过动作,鼠标滑过自动切换为相应大图,配合JS生成的动画效果,看上去很入眼,比较适合图片站或游戏站做精品推荐,而且也容易替换为动态读取,全新的CSS LI列表,代码更简洁,很不错吧代码内容:View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="h
阅读全文
摘要:代码简介:非常漂亮的JS+CSS图片幻灯切换特效,用在你的首页比较不错,宽屏图片格式,每张图片平滑飞入切换,鼠标放上自动切换,和FLASH的平滑效果差不多,视觉冲击效果很爽,而且代码也不多,调试调用都方便,建议关注一下哦!代码内容:View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/
阅读全文
摘要:代码简介:使一组图上无缝向上滚动的效果,用CSS定义滚动区域的大小与图片正好重叠,然后用JS定义每次滚动的距离也正好与图片大小一样,实现了这种美妙的图片效果。如果要更改图片的大小,记着要把CSS也一并修改哦!代码内容:View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3
阅读全文
摘要:代码简介:JavaScript+CSS完成的漂亮相册展示效果,运用了大量CSS代码,JS代码并不多,它可以自动获取链接图片的地址以及TITLE标签的信息,当鼠标点击小图的时候它就会自动加载大图,类似有点Ajax的感觉。代码内容:View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://w
阅读全文
摘要:代码简介:鼠标放到图片后,会出现悬停提示,悬停提示内可以是图片,从代码实现思路上来说,本代码很有创意,代码很精简,如果原图你强制变为小图的话,那么当鼠标放上去以后,会放大出大图,实际上加载的是同一张图片,因此这决定了这款代码在加载速度上有些影响。代码内容:View Code <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>鼠标悬停出现图片提示的代码 - www.webdm.
阅读全文
摘要:代码简介:一款使用CSS的Alpha透明度实现的图片链接效果,鼠标放上后图片会变为半透明,然后出现文字介绍,+可以加入其它功能,一般是加入收藏,根据你的需要了,可以自己改。代码内容:View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&qu
阅读全文
摘要:代码简介:JavaScript控制一张图片旋转,每次旋转90度,可旋转一周360度,以前没见到过,也不知道有没有用,奉献给大家,希望喜欢。代码内容:View Code <title>JavaScript控制图片360度旋转代码 - www.webdm.cn</title><script language="javascript"> var isIE = (document.uniqueID)?1:0; var i=1; function rotate(image) { var object = image.parentNode; if(i
阅读全文
摘要:代码简介:名副其实的JS图片幻灯切换特效,风格优美,带动画,图片路径可以轻易修改成从数据库读取,实用性增强,CSS代码可根据你的需要继续优化,确实比较不错。代码内容:View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">&
阅读全文
摘要:代码简介:一款JS图片滚动效果,默认是不滚动,鼠标放到左侧的三角符号上,它才会滚动,效果不错,运行时请耐心一点等待图片加载完成,然后刷新一下页面就正常了。代码内容:<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>控制图片水平方向左右滚动的JS代码 - www.webdm.cn</title><SCRIPT language=JavaScript type=text/
阅读全文
摘要:代码简介:JavaScript圆形虚幻效果,跟PS里面的羽化效果有点像。代码内容:View Code <html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>用JavaScript防PS里的羽化效果代码-www.webdm.cn</title></head><bodyonload=setValues()><center><SCRIPTlangu
阅读全文
摘要:代码简介:JS+CSS实现多种图片过渡效果,模切、竖切、百叶窗、还有马赛克、淡入淡出、透明度变化等,有一些是我们经常会用到了,很好的一段代码,点击运行查看一下效果,如果没看到,请刷新一下页面再试。代码内容:View Code <html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>用JS+CSS实现多种图片漂亮效果的代码-www.webdm.cn</title></head>
阅读全文
摘要:代码简介:这个CSS特效代码很不错,将一幅图片变成拖尾的影子效果,就是大家所说的幻影效果,同样是使用CSS的filter滤镜,一句代码就解决了问题,你可以试着改变他们的参数,会有更炫的效果出现。代码内容:View Code <html><head><title>让图片出现幻影效果的CSS代码-www.webdm.cn</title></head><body><style>#test{filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=30,D
阅读全文
摘要:代码简介:JavaScript水平循环飞舞的图片,这个功能我们在编写游戏的时候能用得上,当然这里的图片你也可以把它换作是文字,JS只管ID而不管内部会是什么内容,本代码修改起来也方便,希望有朋友喜欢。代码内容:View Code <html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>让图片水平循环飞舞的JavaScript代码-www.webdm.cn</title></hea
阅读全文
摘要:代码简介:JavaScript简易图片分割,不能拖动分割,指定区域分割,还不清楚怎么玩,有兴趣的朋友可以研究研究。代码内容:View Code <htmlxmlns:(null)0="http://www.w3.org/TR/REC-html40"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>简易的JavaScript图片分割代码-www.webdm.cn</title&
阅读全文
摘要:代码简介:从老外那里整理出来的,优化了部分JavaScript代码,图片地址及文字描述都写在JS的数组里,因此适合一些不经常更新的页面,因为将地址及信息写进数组,对动态更新造成一定麻烦,用到的可关注一下。代码内容:View Code <html><head><title>JavaScript控制图片左右播放的幻灯片代码-www.webdm.cn</title><style>.Caption{font-family:Arial;font-weight:normal;font-size:12pt;color:#FF3300;}A.Cont
阅读全文