仿酒仙网品牌活动动画效果 (鼠标移上 图片平移)

来源:互联网 发布:手游淘宝交易平台官网 编辑:程序博客网 时间:2024/03/28 18:09

图片格式为280*80像素的图片

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head></head><body><script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script><style>.storeListBox {width: 180px; height: 80px; overflow: hidden; position: relative; }.storeListCon { width: 360px; height: 80px; position: absolute;left: 0; top: 0; }li{width:180px; height: 80px; list-style:none; }</style><script>$(document).ready(function(){$(".storeListWrap li").mouseover(function() {$(this).find(".storeListCon").stop().animate({"left" : "-100px"}, 300)});$(".storeListWrap li").mouseout(function() {$(this).find(".storeListCon").stop().animate({"left" : "0px"}, 300)});});</script><div class="storeListWrap"><div class="storeList" ><ul><li><div class="storeListBox"><div class="storeListCon" ><a href="http://ytcar.com"><img src="http://img07.jiuxian.com/bill/2014/0214/3a4feafda6824b6390336d78105c5733.jpg" width="280" height="80" /></a></div></div></li></ul></div></div></body></html>


0 0
原创粉丝点击