随笔分类 - 图片特效代码
各类精彩图片特效代码。
摘要：代码简介：支持火狐的图片切换效果，设计得很漂亮，还带有渐变效果。代码内容：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
阅读全文
摘要：代码简介：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
阅读全文
摘要：代码简介：经过美化过的匀速图片滚动，速度在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
阅读全文
摘要：代码简介：一个老外完成的JS图片特效，运用了特殊算法，将多幅图片组合在一起，使浏览器变得智能起来，当移上某个图片的时候，图片会慢慢放大一些并靠近你，如果点击的话，会快速放大到你的眼前，其它的远去或变暗。可能算法原因，运行后CPU占用很历害，电脑有点慢。代码内容：View Code <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><title>【荐】一个漂亮的Java
阅读全文
摘要：代码简介：这是个很常见的图片显示特效，当鼠标经过图片的时候，图片上浮动一个半透明的层，层内显示文字，同时图片边框变亮，视觉效果相当好。代码内容：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
阅读全文
摘要：代码简介：图片载入Loading效果，当图片没有载入的时候，显示正在加载中，当加载完成出现图片，LOADING可以有效防止资源浪费，提升用户体验的好方法。代码内容：View Code <title>一个简单的载入图片等待状态的Loading代码_网页代码站(www.webdm.cn)</title><script>functionaaa(){document.getElementById('aa').innerHTML='';}</script><divstyle="margin:300px0px0
阅读全文
摘要：代码简介：图片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>&
阅读全文
摘要：代码简介：CSS等比例缩小图片，实用性较强的一个CSS技巧，等比例一般都是在我们规定的高度或宽度超出范围时候，另图片以高或宽为基准按比例缩小或放大，这样保证网页布局的整齐性，这也是CSS功能的强大之处。不过本处是CSS调用了expression，也就是说用CSS调用了JavaScript，有点不爽。代码内容：View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
阅读全文
摘要：代码简介：请等待图片加载完成，比较炫的一个创意，你自行车的链条一样，鼠标拖动水晶球，模拟了系在一起的物体的运动过程，那些小球也挺漂亮。代码内容：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;
阅读全文
摘要：代码简介：最简的JavaScript方法实现鼠标经过切换图片，学习JS的朋友可以试着加一个LOADING，这样就上水平了，本代码可以很好的嵌入到ASP/PHP/ASP.NET程序中，图片地址可由这些程序上传后从数据库读取出来。代码内容：View Code <title>超简单的JavaScript鼠标经过切换图片代码_网页代码站(www.webdm.cn)</title><script>functionshowDaTu(src){document.getElementById("defaultImg").src=src;}</scr
阅读全文
摘要：代码简介：鼠标放到图片上会滑出提示文字，不用多介绍了，运行一下就知道效果了。代码内容：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
阅读全文
摘要：代码简介：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
阅读全文
摘要：代码简介：前后轮翻的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
阅读全文
摘要：代码简介：纯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
阅读全文
摘要：代码简介：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
阅读全文
摘要：代码简介：真正的JavaScript鼠标放上加载大图的效果，唯一不爽的地方是没有Loading，在淘宝网的商品列表中有这样的效果，有些朋友很想要的效果，但是却不知该如何形容，本放大还带有渐入渐出动画，如果不想要的话，可以去掉哦，这样代码就更精简了。代码内容：View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="h
阅读全文
摘要：代码简介：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
阅读全文
摘要：代码简介：在右下角随机显示的图片广告，随机的形式是载入图片的顺序没有规律，完全由程序随机调用的图片，至于显示在什么地方，这个是灵活的，你也可以改为显示在最上角。代码内容：View Code <html><head><title>右下角随机显示的CSS+JS图片广告_网页代码站(www.webdm.cn)</title><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"></head><body>
阅读全文
摘要：代码简介：自已写的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
阅读全文
摘要：代码简介：鼠标经过图片由灰色变彩色，不少学CSS的朋友再问这效果怎么实现，本段代码只是其中一个的实现方法，这个方法有点笨，就是用两张完全一样的图片，只是一张灰色、一和彩色，用CSS定义鼠标经过切换两张图片而完成，虽然方法有点笨，但是兼容性非常好，不管是在IE、火狐或GG浏览器都兼容。代码内容：View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><
阅读全文
浙公网安备 33010602011771号