想请教一下大家,一个鼠标滑过的效果该怎么写。效果就是当把鼠标放到一个图片上时下面可以显示出一个层。就是类似于网易相册的那样的效果。把鼠标放上去就会出现删除或者修改的连接。
解决方案 »
- 如何读取层的top和left并更改
- extjs store 第一次查询后 关闭 再打开查询还是第一次的值??
- extjs的问题
- 美女帅哥们,怎么样才能让别人在网页上一点击我的QQ号码就直接能跟我在QQ里对话?
- 请教:正则replace问题!如一个字符串"aaabbcc",想替换bb为其他如kk,用replace正则怎么做?
- 高手救命?类似于3721拖动DIV的层问题?
- 帮我指正一下怎么改才正确,就这么一点分了,感谢
- MSN的正则表达式要怎么写
- 怎么让IE可以在按了回车之后从当前输入框跳到下一个输入框
- 请问.js文件的格式是什么样的,急用...
- 操作Msxml2.DOMDocument查找节点的问题
- 一个网页编程入门菜鸟的几个问题
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<style type="text/css">
*{margin:0; padding:0;}
body{font-size:12px; font-family:"Times New Roman", Times, serif; background-color:#333;}
#main{margin:100px auto; width:300px;}
#main ul{list-style:none;}
#main ul li{line-height:20px; border-bottom:1px dashed #FC0;}
#main ul li a{color:#E7E7E7; text-decoration:none; position:relative; display:block;}
#main ul li a div{display:none;}
#main ul li a:hover{ visibility:visible; color:#FFF;}
#main ul li a:hover div{position:absolute; left:280px; top:-40px; background-color:#FFF; display:block; width:300px; height:100px; color:#000; overflow:hidden;}
#main ul li a:hover div dt{float:left; width:8px; background:url(234.gif) center no-repeat;height:100px; display:block; background-color:#333;}
#main ul li a:hover div dd{float:right; width:270px; height:auto; line-height:18px; padding:6px 10px;}
</style>
</head>
<body>
<p>
</p>
<p>
</p>
<div id="main">
<ul>
<li><a href="javascript:void(0);">Customizing Form Objects and Validating Forms<div><dt></dt><dd>Rollovers are very easy using Dreamweaver. All you need to do is export two images from Fireworks (the image itself and the rollover image). Next, in Dreamweaver, click on Insert>Rollover Image. Give a name to the image, choose the images from the folder icon and finally give the link to the image. That's it! You've now got a great looking effect for your site.
</dd></div> </a></li>
<li>
<a href="javascript:void(0);">Best Time Saving Tips in Dreamweaver
<div><dt></dt><dd>Before uploading your site you need to make sure that there are no dead links in the site. You can do this by going to your site map, right clicking on any of the files and then clicking on 'check links'. Now you can choose to either check links in the entire site or within the selected file or folder. If there are any dead links you can fix them by using the folder icon to select the right files.
</dd></div>
</a>
</li>
<li>
<a href="javascript:void(0);">Customizing Form Objects and Validating Forms
<div><dt></dt><dd>After resizing an image in Dreamweaver, click on Commands>Optimize Image in Fireworks. You will get a dialog box saying 'Editing image.gif. Do you wish to use an existing Fireworks document as the source of image.gif.' Click on No and then click Update. The image is now updated and optimized in Dreamweaver. This saves you the trouble of opening the image in Fireworks, resizing it and exporting it again.
</dd></div>
</a>
</li>
<li>
<a href="javascript:void(0);">Dreamweaver Tips & Tutorials <div><dt></dt><dd>We've shared some really cool tips on Macromedia Dreamweaver in this article. They are handy tips that all Dreamweaver users should know about to allow more flexibility and creativity while designing sites in Dreamweaver.
</dd></div>
</a>
</li>
<li>
<a href="javascript:void(0);">Jump Menus, Pop Up Windows and Swap Images
<div><dt></dt><dd>Rollovers are very easy using Dreamweaver. All you need to do is export two images from Fireworks (the image itself and the rollover image). Next, in Dreamweaver, click on Insert>Rollover Image. </dd></div>
</a>
</li>
</ul>
</div>
</body>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站,js.alixixi.com</a>
1.W3C没问题
2.没有兼容性的问题
3.速度
不过,单图转滚没法贴出代码,要根据实际大小来做,
我的网站上用的就是这个方法,
看一下
在最下方的SITE MAP处有十个小图片