用CSS和JS实现在WEB页面内任意拖动图片

实现类似于Flash的超酷特效代码是用表格布局的！这个特效是改成用DIV+CSS布局实现的！

<style>

*{font:normal normal 13px/1.5em "宋体"}

dl{width:200px;float:left;}

dd{margin:0;padding:0;line-height:1.8em;padding-left:3px;}

dd a{text-decoration:none;}

img{float:left;}

dd a:hover{color:#f00;}

.first{width:20px;height:190px;border:1px solid #ccc;border-left:0;float:left;text-align:center;cursor:pointer;}

.first0{width:68px;height:190px;border-left:1px solid #ccc;float:left;text-align:center;cursor:pointer;overflow:hidden;}

.second{float:left;border:1px solid #ccc;display:none;"}

</style>

<script>

function $(obj){

return document.getElementById(obj);

}

function showAds(n){

for(var i=0;i<6;i++){

if(n==i){

$("ads"+i).style.display="block";

}else{

$("ads"+i).style.display="none";

}

}

}

</script>

<div>

<!--part0-->

<div class="first0" onmouseover="showAds('0')"><img src="http://www.knowsky.com/upfiles/20070627/20070627085728_01.jpg" title="" /></div>

<div class="second" style="display:block;" id="ads0" ><img src="http://www.knowsky.com/upfiles/20070627/20070627085737_02.jpg" title="" /></div>

<!--part1-->

<div class="first" onmouseover="showAds('1')">美丽地图</div>

<div class="second" id="ads1" >

<dl>

<dd>[上海]典范造型缘于专业

如果您总是先选择发型师，再选择美发店，那么这……</dd>

<dd><a href="#">·[广州]奥龙堡 运动起来</a></dd>

<dd><a href="#">·[广州]青鸟健身新时尚</a></dd>

<dd><a href="#">·[广州]安索瑜珈释放心灵</a></dd>

</dl>

<img src="http://www.knowsky.com/upfiles/20070627/20070627085743_03.jpg" title="" />

</div>

<!--part2-->

<div class="first" onmouseover="showAds('2')">非常食尚</div>

<div class="second" id="ads2" >

<dl>

<dd>[上海]露纳的"养命仙汤"进入露纳餐厅，四处看看，不论是大厅还是包房……</dd>

<dd><a href="#">·[上海]Pasti意菜香气缠绵</a></dd>

<dd><a href="#">·[上海]全罗道 享辛辣乐趣 </a></dd>

<dd><a href="#">·[上海]印度小厨 食之魅</a></dd>

</dl>

<img src="http://www.knowsky.com/upfiles/20070627/20070627085752_04.jpg" title="" />

</div>

<!--part3-->

<div class="first" onmouseover="showAds('3')">最佳去处</div>

<div class="second" id="ads3" >

<dl>

<dd>[上海]燕慕的江南旗袍今天为大家介绍的这家“燕慕”中装定制店，设在……</dd>

<dd><a href="#">·[上海]溢香坊 中国式性感</a></dd>

<dd><a href="#">·[上海]迷你韩国城新款春装</a></dd>

<dd><a href="#">·[上海]心乐坊饰品款款撩人</a></dd>

</dl>

<img src="http://www.knowsky.com/upfiles/20070627/20070627085805_05.jpg" title="" />

</div>

<!--part4-->

<div class="first" onmouseover="showAds('4')">绝色美女</div>

<div class="second" id="ads4" >

<dl>

<dd>Eve&Anna私人礼服定制“每个女人的衣橱里，应该有一件真正属于她的礼…… </dd>

<dd><a href="#">·香若尔服装的奢华礼遇</a></dd>

<dd><a href="#">·丽多坊 打造公主式新娘</a></dd>

<dd><a href="#">·巴黎婚纱之漂亮新娘</a></dd>

</dl>

<img src="http://www.knowsky.com/upfiles/20070627/20070627085816_06.jpg" title="" />

</div>

<!--part5-->

<div class="first" onmouseover="showAds('5')">城市漫游</div>

<div class="second" id="ads5" >

<dl>

<dd>北京人12种新不文明现象咱们北京的随地吐痰现象令许多外国人惊讶。记得……</dd>

<dd><a href="#">·隐私！揭秘王小丫私生活照</a></dd>

<dd><a href="#">·北京12个盗车贼最爱光顾地</a></dd>

<dd><a href="#">·正在被北京抛弃的北京人</a></dd>

</dl>

<img src="http://www.knowsky.com/upfiles/20070627/20070627085824_07.jpg" title="" />

<!--part 5 end-->

</div>

</div>