随笔分类 -  图片特效代码

各类精彩图片特效代码。
摘要:代码简介:支持火狐的图片切换效果,设计得很漂亮,还带有渐变效果。代码内容: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><title>兼容火狐漂亮的图片切换效果代码_网页代码站(www.webd 阅读全文
posted @ 2011-08-22 10:10 网页代码站 阅读(432) 评论(0) 推荐(0)
摘要:代码简介:JS模拟Windows的图片放大特效,两边有控制按钮,不是真正意义上的放大,因为图片的像素没有达到的话,放大也也照样不清淅哦。代码内容:View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><head><title>JS实现的防Windows的图片放大特效代码_网页代码站(www.webdm.cn)</title 阅读全文
posted @ 2011-08-22 10:09 网页代码站 阅读(399) 评论(0) 推荐(0)
摘要:代码简介:经过美化过的匀速图片滚动,速度在JS函数里可以自己调整,带有注释,数值越大滚动越慢。为了节省下载时间,这里的图上用文字代替了,你用的时候自己加上吧。代码内容:View Code <HTML><HEAD><TITLE>可用于产品展示的匀速图片滚动代码_网页代码站(www.webdm.cn)</TITLE><style>P{MARGIN:20px}.table-left-right{BORDER-LEFT:#E7E7E71pxsolid;BORDER-RIGHT:#E7E7E71pxsolid;}TD{font-size:12p 阅读全文
posted @ 2011-08-16 08:35 网页代码站 阅读(493) 评论(0) 推荐(0)
摘要:代码简介:一个老外完成的JS图片特效,运用了特殊算法,将多幅图片组合在一起,使浏览器变得智能起来,当移上某个图片的时候,图片会慢慢放大一些并靠近你,如果点击的话,会快速放大到你的眼前,其它的远去或变暗。可能算法原因,运行后CPU占用很历害,电脑有点慢。代码内容:View Code <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><title>【荐】一个漂亮的Java 阅读全文
posted @ 2011-08-16 08:34 网页代码站 阅读(644) 评论(0) 推荐(0)
摘要:代码简介:这是个很常见的图片显示特效,当鼠标经过图片的时候,图片上浮动一个半透明的层,层内显示文字,同时图片边框变亮,视觉效果相当好。代码内容:View Code <html><head><title>鼠标滑过图片显示半透明文字,边框变色代码_网页代码站(www.webdm.cn)</title><styletype="text/css">body{background:#333}img{border:none}.wrap{margin:10px;position:relative;}.photoa{positio 阅读全文
posted @ 2011-08-13 08:21 网页代码站 阅读(1089) 评论(1) 推荐(0)
摘要:代码简介:图片载入Loading效果,当图片没有载入的时候,显示正在加载中,当加载完成出现图片,LOADING可以有效防止资源浪费,提升用户体验的好方法。代码内容:View Code <title>一个简单的载入图片等待状态的Loading代码_网页代码站(www.webdm.cn)</title><script>functionaaa(){document.getElementById('aa').innerHTML='';}</script><divstyle="margin:300px0px0 阅读全文
posted @ 2011-08-13 08:20 网页代码站 阅读(719) 评论(0) 推荐(0)
摘要:代码简介:图片3D展示,鼠标晃动的时候图片跟着就动了,点击的时候会稍微放大一些,不同的角度会出现不一样的效果,JavaScript与CSS结合共同形成的效果。代码内容:View Code <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><title>【荐】超绚的JavaScript立体图片展示代码_网页代码站(www.webdm.cn)</title>& 阅读全文
posted @ 2011-08-12 09:35 网页代码站 阅读(354) 评论(0) 推荐(0)
摘要:代码简介:CSS等比例缩小图片,实用性较强的一个CSS技巧,等比例一般都是在我们规定的高度或宽度超出范围时候,另图片以高或宽为基准按比例缩小或放大,这样保证网页布局的整齐性,这也是CSS功能的强大之处。不过本处是CSS调用了expression,也就是说用CSS调用了JavaScript,有点不爽。代码内容:View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" 阅读全文
posted @ 2011-08-12 09:34 网页代码站 阅读(563) 评论(0) 推荐(1)
摘要:代码简介:请等待图片加载完成,比较炫的一个创意,你自行车的链条一样,鼠标拖动水晶球,模拟了系在一起的物体的运动过程,那些小球也挺漂亮。代码内容:View Code <html><head><title>JS拖动水晶球特效代码_网页代码站(www.webdm.cn)</title><styletype="text/css">body{cursor:crosshair;margin:0;padding:0;position:absolute;overflow:hidden;background:#000;left:0; 阅读全文
posted @ 2011-08-11 09:48 网页代码站 阅读(658) 评论(0) 推荐(0)
摘要:代码简介:最简的JavaScript方法实现鼠标经过切换图片,学习JS的朋友可以试着加一个LOADING,这样就上水平了,本代码可以很好的嵌入到ASP/PHP/ASP.NET程序中,图片地址可由这些程序上传后从数据库读取出来。代码内容:View Code <title>超简单的JavaScript鼠标经过切换图片代码_网页代码站(www.webdm.cn)</title><script>functionshowDaTu(src){document.getElementById("defaultImg").src=src;}</scr 阅读全文
posted @ 2011-08-11 09:47 网页代码站 阅读(917) 评论(0) 推荐(0)
摘要:代码简介:鼠标放到图片上会滑出提示文字,不用多介绍了,运行一下就知道效果了。代码内容: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><title>鼠标放到图片上会滑出提示文字代码_网页代码站(w 阅读全文
posted @ 2011-08-08 10:36 网页代码站 阅读(535) 评论(0) 推荐(0)
摘要:代码简介:CSS漂亮的图片边框,边框是用背景图片修饰的,不过可以自适应大小,这点挺实用的,不论你的图片有多大,它始终显示在图片的外围,不会错位,这当然还要归功于CSS的功劳。代码内容:View Code <html><head><title>CSS实现自适应的图片背景边框代码_网页代码站(www.webdm.cn)</title><styletype="text/css">body{text-align:center;margin-top:100px;}.in{border:1pxsolid#666;padding 阅读全文
posted @ 2011-08-08 10:29 网页代码站 阅读(979) 评论(0) 推荐(1)
摘要:代码简介:前后轮翻的JS图片幻灯切换,和普通的图片切换没有什么区别,区别在于图片的切换方式上,用到了一些prototype的相关技术,自动检测图片张数,运行时如果看不到效果,请等待图片加载完成。代码内容:View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml 阅读全文
posted @ 2011-08-06 10:03 网页代码站 阅读(354) 评论(0) 推荐(0)
摘要:代码简介:纯CSS实现鼠标经过放大图片,可能不是太好,因为缩略图实际上加载的仍然是完整的大幅图片,只不过是用CSS控制了显示的区域,因此可能会影响网页加载,不过CSS方法是不错,初学者参考一下。代码内容:View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml 阅读全文
posted @ 2011-08-06 10:02 网页代码站 阅读(521) 评论(0) 推荐(0)
摘要:代码简介:NBA网站的大幅焦点图切换效果,代码里有较多的注释,适合研究一下,图片是远程地址,你最好保存到本地,本焦点图是动态变化,会自动播放,鼠标点击的时候会响应鼠标,用JavaScript实现的。代码内容:View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xht 阅读全文
posted @ 2011-08-05 11:51 网页代码站 阅读(391) 评论(0) 推荐(0)
摘要:代码简介:真正的JavaScript鼠标放上加载大图的效果,唯一不爽的地方是没有Loading,在淘宝网的商品列表中有这样的效果,有些朋友很想要的效果,但是却不知该如何形容,本放大还带有渐入渐出动画,如果不想要的话,可以去掉哦,这样代码就更精简了。代码内容:View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="h 阅读全文
posted @ 2011-08-05 11:49 网页代码站 阅读(378) 评论(2) 推荐(0)
摘要:代码简介:JavaScript 算法生成弹性透明的图片放大效果,代码值得看一下哦,弹性和缓冲是一个意思,JS缓冲效果在网页中使用很频繁,使用缓冲技术可以制作出超多的精美特效来。代码内容:View Code <html><head><title>JavaScript弹性透明的图片放大代码_网页代码站(www.webdm.cn)</title><styletype="text/css">html{overflow:hidden;}body{margin:0px;padding:0px;background:#000;p 阅读全文
posted @ 2011-08-04 11:09 网页代码站 阅读(430) 评论(3) 推荐(0)
摘要:代码简介:在右下角随机显示的图片广告,随机的形式是载入图片的顺序没有规律,完全由程序随机调用的图片,至于显示在什么地方,这个是灵活的,你也可以改为显示在最上角。代码内容:View Code <html><head><title>右下角随机显示的CSS+JS图片广告_网页代码站(www.webdm.cn)</title><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"></head><body> 阅读全文
posted @ 2011-08-04 11:08 网页代码站 阅读(439) 评论(0) 推荐(0)
摘要:代码简介:自已写的JavaScript轮显切换效果,虽然还不是十分完美,但作为自己的一点小成就奉献给大家,示例里的文字可以换成图片,这样图片切换的效果就出来了。代码内容:View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><hea 阅读全文
posted @ 2011-08-03 10:51 网页代码站 阅读(364) 评论(0) 推荐(0)
摘要:代码简介:鼠标经过图片由灰色变彩色,不少学CSS的朋友再问这效果怎么实现,本段代码只是其中一个的实现方法,这个方法有点笨,就是用两张完全一样的图片,只是一张灰色、一和彩色,用CSS定义鼠标经过切换两张图片而完成,虽然方法有点笨,但是兼容性非常好,不管是在IE、火狐或GG浏览器都兼容。代码内容:View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">< 阅读全文
posted @ 2011-08-03 10:50 网页代码站 阅读(578) 评论(0) 推荐(0)