您当前位置：首页 > php开源 > DedeCMS > 各类CMS通用“鼠标触发”放大图片效果

各类CMS通用“鼠标触发”放大图片效果

来源：程序员人生发布时间：2013-12-25 18:45:12 阅读次数：3427次

　　先看一下代码，其中有css与html代码部分：

以下为引用的内容：
<title>liehuo.net</title>
<style>
/*定义CSS*/
div#resize a:hover{position: absolute; margin-left:-200px; float:left}
div#resize a img{width: 333px;}
div#resize a img{height: 180px;}
div#resize a:hover img{width: 666px;}
div#resize a:hover img{height: 378px;}
</style>

演示效果

<div id=resize>
<a href=http://www.veryhuo.com/ target=_blank><img src=http://www.veryhuo.com/uploads/allimg/090930/1_090930171900_1.jpg border=0></a>
</div>

　　如果你会CSS，可以做到更完美。

<title>liehuo.net</title><style>/*定义CSS*/div#resize a:hover{position: absolute; margin-left:-200px; float:left}div#resize a img{width: 333px;}div#resize a img{height: 180px;}div#resize a:hover img{width: 666px;}div#resize a:hover img{height: 378px;}</style>演示效果<div id=resize><a href=http://www.veryhuo.com/ _fcksavedurl="http://www.veryhuo.com/" target=_blank><img src=http://www.veryhuo.com/uploads/allimg/090930/1_090930171900_1.jpg _fcksavedurl="http://www.veryhuo.com/uploads/allimg/090930/1_090930171900_1.jpg" border=0></a></div><br /><center>网更多教程，请访问：<a href=http://www.veryhuo.com/ target=_blank _fcksavedurl="http://www.veryhuo.com/ target=_blank">http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 php验证邮箱地址合法性

下一篇 DEDECMS数据库配置文件在哪?如何进行配置

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点