jQuery 图片跟随放大显示

2013-01-16 16:09 / 前端开发 / zhonghanwu
102316


1）HTML结构（只需在绑定事件的图片是加DOM节点）
如：<img  class=”.shop-environment-pic” src+”a.jpg” />
2)jQuery 组建浮动元素（注：图片未加载时，显示进度条。）
如：var $tip=$(‘<div id=”shop_pic_float”><div><s></s><img src=”‘+this.src+'” /></div></div>’);
3）jQeruy代码
<script type=”text/javascript”>
$(function(){
$(‘.shop-environment-pic’).mouseover(function(){
var $tip=$(‘<div id=”shop_pic_float”><div class=”shop-pic-box”><s></s><img src=”‘+this.src+'” /></div></div>’);
$(‘body’).append($tip);
$(‘#shop_pic_float’).show(‘fast’);
}).mouseout(function(){
$(‘#shop_pic_float’).remove();
}).mousemove(function(e){
$(‘#shop_pic_float’).css({“top”:(e.pageY-60)+”px”,”left”:(e.pageX+30)+”px”})
})
})
</script>

102316