随笔分类 - 图片特效代码
各类精彩图片特效代码。
摘要：代码简介：又一个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
阅读全文
浙公网安备 33010602011771号