08 2011 档案
摘要：代码简介：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>
阅读全文
摘要：代码简介：支持火狐的图片切换效果，设计得很漂亮，还带有渐变效果。代码内容：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"><
阅读全文
摘要：代码简介：一级横向滑动，二级竖向下拉综合菜单，这个菜单一共是三级，前两级是滑动切换的方式，第三级主要是下拉菜单的形式，虽然简单的样式简约，但是实现他们其实是很复杂的，希望从事前端开发的朋友一同参考一下吧。代码内容：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.o
阅读全文
摘要：代码简介：纯CSS代码实现比较经典的蓝色风格下拉菜单，最多支持两级，适用于各种企业网站，新闻资讯类网站，效果挺棒的，不是吗？虽然没有用到过多的修饰，但给你的感觉清新、大方、简洁，符合现代网站的特点。代码内容：View Code <html><title>经典的蓝色JS+CSS下拉菜单_网页代码站(www.webdm.cn)</title><style>*{margin:0;padding:0;border:0;}#div_center{width:790px;height:23px;background:#003399;margin-left:a
阅读全文