随笔分类 - 图片特效代码
各类精彩图片特效代码。
摘要：代码简介：这个代码是从搜狐女人频道着页扒下来的，不知道该怎么形容它，它可以响应鼠标运作，鼠标放上去展开，移走复位，像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://www.w3.org/1999/xhtml"
阅读全文
摘要：代码简介：以前见过这种效果，但是是基于FLASH技术，现在是纯用JS实现的，代码有点多，不过效果还不错，实际上它也是一个图片滚动，只不过它完全是用鼠标点击控制的，也就是说鼠标不点击的时候它是静止的，每点一下向后移动一个图片，无缝衔接，如些循环。代码内容：View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=&
阅读全文
摘要：代码简介：非常平滑的JS图片滚动特效代码，无缝循环，速度可自定义，鼠标悬停时停止。它的特点是JS和图片地址分离，这样做你就经易的从数据库动态调用每张图片的地址，方便控制，因此它非常的应用。代码内容：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/
阅读全文
摘要：代码简介：仿QQ的窗口抖动特效，鼠标移到到图片上面，图片就开始疯狂的抖动，好像对你的鼠标过敏一样，比较有意思，有会你的网页增加了修改功能。代码内容：View Code <html><head><title>鼠标移至图片后抖动的JS代码 - www.webdm.cn</title></head><BODY><style>.shakeimage{position:relative}</style><img src=http://www.webdm.cn/images/wall1_s.jpg cla
阅读全文
摘要：代码简介：用鼠标拖动一个图片移动，就像拖动一个层一样，这是一个JS拖动类代码，你可以无限制的增加图片，代码复用率比较高。代码内容：View Code <html><HEAD><title>用鼠标拖动图片的JS代码 - www.webdm.cn</title><style type="text/css"><!--.dragme{position:relative;}--></style><script type="text/javascript">var ie=
阅读全文
摘要：代码简介：不错一款图片无缝滚动特效，前后各有一按钮用来控制图片的控制，当然，也可以不控制，这样由JS代码自动云控制滚动，比较适合于产品列表，推荐图文等版块，看上去真不错。代码内容：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&quo
阅读全文
摘要：代码简介：运行一下代码才能看到效果噢，你会看到百度地图下边有LOGO，那可不是百度加上的噢，是通过CSS滤镜加上的效果，是不是和图片水印的效果相差无几呢？代码内容：View Code <head><title>用CSS实现图片水印效果代码 - www.webdm.cn</title><style type=text/css>.transp-block{background:#fff url(http://www.webdm.cn/themes/pic/webdm_logo.gif) no-repeat right bottom;margin:0p
阅读全文
摘要：代码简介：图片拖拉缩放效果（仿PHOTOSHOP），只是没有PS那么强大，不过也凑合，可以拉，先学习一下吧。代码内容：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><meta http
阅读全文
摘要：代码简介：来自百度联盟的一款图片切换特效，每幅图片淡入淡出切换，美观大方，修改图片地址、链接地址，说明文字都很方便，代码中有详细注释，推荐使用。代码内容：View Code <html><head><title>摘自百度的图片切换特效代码 - www.webdm.cn</title></head><body><script>var links = new Array();links[1] = "/";links[2] = "/";links[3] = "/&qu
阅读全文
摘要：代码简介：一组图片成批向上滚屏特效，在新浪、QQ网经常会看到这种特效。实际上是运用了Iframe嵌入页面，也就类似于DIV区域，这个用的时候尽量改成DIV，IFRAME有很多不太好的地方，希望你喜欢。代码内容：View Code <html><head><title>一组图片+文字向上滚屏特效代码 - www.webdm.cn</title><SCRIPT language=JavaScript> var dde_para = new Array(); var dde_aa = new Array(); var dde_url = d
阅读全文
摘要：代码简介：很有意思的一个JavaScript代码段，鼠标怎么也甩不掉图片，像弹簧一样越甩越远，但就是甩不掉，用好了这一技巧，你就能做出很多漂亮的效果来。代码内容：View Code <HTML><HEAD><META http-equiv=Content-Type content="text/html; charset=gb2312"><title>【荐】JS实现的图片弹性拖动特效代码 - www.webdm.cn</title><STYLE>v\:* { BEHAVIOR: url(#default#
阅读全文
摘要：代码简介：鼠标滑过图片显示缩略图，看上去这个特效很惹人喜欢，闲来无事，在研究CSS，在网上见到类似的效果，又修改了一下，基本实现了鼠标经过缩略图放大图片的功能，主要是运行了CSS的overflow属性，有兴趣的朋友仔细研究一番吧。代码内容：View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="ht
阅读全文
摘要：代码简介：漫天飞花及文字滚动特效，不知道该怎么形容这种效果，它是图片和文字相结合的一种特效，就叫做漫天飞花吧，另外它还可以控制一组文字上下滚动，也就走马灯，个性十足。代码内容：View Code <title>JavaScript实现漫天飞花及文字滚动特效的代码 - www.webdm.cn</title><SCRIPT language=JavaScript> //设置marquee的宽度(in pixels) var marqueewidth=190 //设置marquee的高度 var marqueeheight=200 //设置marquee的速度
阅读全文
摘要：代码简介：用CSS实现简单的图片阴影效果，实现原理是设置图像本身的BORDER，然后在A标签设置比BORDER标签更浅一点的颜色，这样看上去就像是给一个图片加了阴影，如果你得像素之差还可以继续完善，使其更完美。代码内容：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.w
阅读全文
摘要：代码简介：js等比例缩放图片，这个功能非常实用，当网页加载一个尺寸比较大的图片时，往往会把一个网页撑的变形，页面变得很难看，于是我们就想到了用JS去控制超出一定范围的图片，以稳定页面布局，本代码段就是完成了此功能，而且代码非常简洁，效果很好，你可以运行代码看下效果。代码内容：View Code <html><head><title>让图片等比例缩放的代码 - www.webdm.cn</title><script>function DrawImage(ImgD,iwidth,iheight){ //参数(图片,允许的宽度,允许的高度)
阅读全文
摘要：代码简介：来自GOOGLE的图片预加载技术，也就是加载一个图片的时候，为了减轻网页的压力，将图片衰减后先显示出来，然后再慢慢加载，你就会看到一个图片由模糊突然变得清淅起来，这就是预加载的一种。这段代码就完成了图片的预加载功能，你可以点击一个小图然后看到大图慢慢变得清淅，直至加载完成。代码内容:View Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
阅读全文
摘要：代码简介：很奇异的一个图片特效，鼠标移上黑白图片，图片会变成彩色的，是不是很神奇？其实你只要懂得的原理就不觉得稀奇了！实际上图片本来就是一幅彩色的，只不过是先用CSS的FILTER将其设置成gray，也就是灰色，然后再设置鼠标移上图片的效果为空，这样图片就回到了原来的彩色，原来如此！代码内容：View Code <html><head><title>黑白图片变成彩色图片的CSS代码 - www.webdm.cn</title><meta http-equiv="content-Type" content="te
阅读全文
摘要：代码简介：用JavaScript判断远程图片是否存在，不存在话则替换指定的图片，指定图片可以是你网站的LOGO或其它图片，或显示提示信息。没想到用JS还能干这种活，以前都是用笨方法，也就是用ASP/PHP程序去判断，这下可好了，省了很多事。代码内容：View Code <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>判断远程图片是否存在的JavaScript代码 - www.webd
阅读全文
摘要：代码简介：JavaScript图片溶解出现的特效，也可以说是渐隐渐出，在很多图片切换效果中可以看到这种效果，因些可以很好的用到图片转场切换功能中。看了之后才发觉，原来实现起来并不复杂。代码内容：View Code <html><head><title>JavaScript实现的一个图片溶解特效代码 - www.webdm.cn</title><body><SCRIPT FOR=window EVENT=onLoad LANGUAGE=vbscript> image1.filters.item(0).apply() imag
阅读全文
摘要：代码简介：用纯CSS代码实现一幅图片的半透明效果，你可以运行一下代码看看效果怎么样？可以看到图片和文字都有半透明的效果，这里只是对图片进行控制，当改变图片透明度的时候，当然也就感觉文字的透明度也改变了，确实不错。代码内容：View Code <html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>CSS实现图片半透明代码 - www.webdm.cn</title><sty
阅读全文
浙公网安备 33010602011771号