随笔分类 - 图片特效代码
各类精彩图片特效代码。
摘要：代码简介：来自腾讯网商品滚动特效，引用了远程的图片和文字 ，请下载到本地，总之效果还是不错的，美观，占用位置少。布局灵活。代码内容：View Code <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"><HTML><HEAD><TITLE>JS+CSS防腾讯网商品滚动效果代码-www.webdm.cn</TITLE><METAhttp-equiv=Content-Typecontent="text/html;charset=gb2312&
阅读全文
摘要：代码简介：JavaScript控制图片水平淡入淡出切换，同时实现图片的半透明效果，修改一下就可以变成一个图片幻灯了。代码内容：View Code <html><head><title>JavaScript图片水平淡入淡出切换效果代码-www.webdm.cn</title></head><body><tablealign=centercellpadding=0cellspacing=0border=0><tr><tdalign="center"valign="mi
阅读全文
摘要：代码简介：类似于点击小图预览图片的功能，在淘宝网可以见到这种图片展示技巧，当用鼠标点击小图的时候，大图会从小图的位置突然弹出来，而且慢慢放大，至于这么大到什么程序，这个需要由您来设定，实际上本特效还是非常有用的。代码内容：View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1
阅读全文
摘要：代码简介：仿淘宝网的商品图片预览效果，点击小缩略图会生成预览大图，这里的生成是指调用，当鼠标放到小图上时激活脚本，开始加载大图，一方面减少网页带宽，另一方面可以方便用户浏览图片，提高用户操作舒适度，总体感觉效果不错，几乎和淘宝网的一一模一样。代码内容：View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http
阅读全文
摘要：代码简介：很炫的图片展示特效，由一组图片构成一个3D的圆环状，并自动旋转，鼠标放到某一图片上会自动停止，JavaScript 的功能真够强大，你是不是后悔没有学好JS呢？代码内容：View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="www.w3.org/1999/xhtml"><head><
阅读全文
摘要：代码简介：片闪烁代码，闪的挺来劲，用JS实现起来非常简单，这时注意时间间隔这个参数，数值越大闪烁越不连续，数值越小闪烁越历害，你可以随意更改这个值，真到你满意的效果。代码内容：View Code <title>图片闪烁代码-www.webdm.cn</title><DIVID="soccer"STYLE="position:absolute;left:150;top:30"><imgSRC="http://www.webdm.cn/themes/pic/webdm_logo.gif"borde
阅读全文
摘要：代码简介：仿淘宝星星投票，兼容性好，淘宝网在交易完毕后有一个星星投票，看着很漂亮。代码内容：View Code <title>仿淘宝网评价的五角星投票代码-www.webdm.cn</title><scriptlanguage="javascript">yg_Ratings.Msgs=newArray("差","及格","一般","比较好","棒极了");yg_Ratings.Labels=newArray("1Star"
阅读全文
摘要：代码简介：精美的JS图片水平向左滚动，设计的比较好，看上去视觉效果很不错。代码内容：View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type&
阅读全文
摘要：代码简介：CSS按比例缩小图片，有时候图片太大，会破环网页整齐的布局。这时可以用css来强制按比例压缩图片的高度或宽度。提示：这样用CSS来套JS，会损失很大的加载运行速度等。代码内容：View Code <title>按比例缩小图片的CSS代码-www.webdm.cn</title><style>img,aimg{border:0;margin:0;padding:0;max-width:200px;width:expression(this.width>200?"200px":this.width);max-height:20
阅读全文
摘要：代码简介：JavaScript图片滚动，看了一下代码，好像这方法挺简便的，容易修改，滚动无空隙，循环连续滚动，鼠标放上后停止，中间部分代码使用了Table，不懂CSS的朋友也没关系，你可以继续开发，以满足你的需要。代码内容：View Code <title>JS实现图片从右向左滚动代码-www.webdm.cn</title><divid=demostyle=overflow:hidden;height:180;width:600;color:#ffffff><tablealign=leftcellpadding=0cellspace=0border=
阅读全文
摘要：代码简介：一个比较经典的JavaScript图片轮番切换代码，使用相当方便，图片列表完全可以由你从数据库中取出，这使得你有可能将其布置到你的后台管理程序中，比如可以适时从本地上传图片，由前台程序读出数据库路径，而不用更改JS代码，这样会方便很多。代码内容：View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="ht
阅读全文
摘要：代码简介：仿265网站LOGO，会盯着你看的眼睛，会跟着你的鼠标转，有意思吧？这可是用JavaScript实现的哦，学习JS控制图像很不错的实例。代码内容：View Code <html><head><title>JavaScript仿265网站LOGO会盯着你看的眼睛代码-www.webdm.cn</title></head><body><scripttype="text/javascript">if((document.getElementById)&&window.ad
阅读全文
摘要：代码简介：一个JavaScript图片滚动效果，与其它不同的区别是，它是可以被控制的，向左向右滚动都需要点击两端的小箭头，图片滚动时候带有缓冲效果，演示图片没有加链接，你决定用了就好好完善它，现在只是一个基础的框架，也没有怎么美化，请注意，JavaScript代码一定要放在调用图片的代码之后，否则会失效。代码内容：View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q
阅读全文
摘要：代码简介：图片围成环形来回滚动的图片特效，有立体感，而且设计的也挺不错，演示中除了部分图片，为了让页面加载更快，如果你想用的话，你可以无限制添加下去，只要你的网页很快哦。代码内容：View Code <html><head><title>有空间感的图片环形滚动代码-www.webdm.cn</title><style>html,body{background:#990000;margin:0px;}#pics_3d{position:absolute;height:300px;width:100%;background:#000;to
阅读全文
摘要：代码简介：JavaScript图片预加载技术，和平时大家说的网页loading有点像，本代码真正实现了加载完图片再显示的功能，如果图片没有下载完则一直显示正在加载，而且不会影响网页其它部分的正常下载，可以提高你网页的速度。代码内容：View Code <html><head><title>JavaScript预加载图片并显示loading的代码-www.webdm.cn</title><styletype="text/css">div{border:#aaaaaa3pxsolid;width:200px;paddi
阅读全文
摘要：代码简介：用CSS制作一个ImageView，类似一个相册浏览的功能，重点研究一下层与布局。代码内容：View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="zh-cn"lang="zh-cn"><h
阅读全文
摘要：代码简介：来自经典论坛的一款仿天极网图片切换特效，含有详细的设置说明，使用起来比较简单。请在开始时设置图片目录、标题长度、图片切换的时间等，还可以设置Ad跟踪条的颜色，更多的自定义选项让它更能适合你网站的使用。代码内容：View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/19
阅读全文
摘要：代码简介：不知道该如何形容这种效果，就叫做雷达效果吧，像一束光一样照亮整个图片，背景图片变暗，这里是用CSS降低了图片的透明度。个人感觉不怎么实用，有喜欢的拿去。代码内容：View Code <html><head><title>图片上的雷达光照效果代码-www.webdm.cn</title></head><BODYbgColor=#000000onload=go()><script><!--varLight_X=20varLight_Y=20varLight_Z=40varxInc=10;varyIn
阅读全文
摘要：代码简介：CSS制作的图片查看特效，鼠标放上后出现放大的图片，带漂亮的边框修饰，还可以加入简短的图片说明。代码内容：View Code <html><head><title>鼠标移向小图显示大图-www.webdm.cn</title><styletype="text/css">.thumbnail{position:relative;z-index:0;}.thumbnail:hover{background-color:transparent;z-index:50;}.thumbnailspan{positio
阅读全文
摘要：代码简介：最近见到Facebook网站的图片圆角很特别，将一张方角的图片经过CSS定义后自动变成了圆角，后来研究了一番，发觉是用CSS控制一个圆角背景图片叠加而成，值得学习，不过因为是Facebook的资源图片，你在变动图片大小的时候最好将背景图片也变大。 注意，本效果在IE7以下版本浏览器有问题。代码内容：View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"<head><title>将图片四角变为圆角的CSS代码-www.webdm.cn</title>
阅读全文
浙公网安备 33010602011771号