jquery撕页广告效果

所属分类:媒体-图片展示

 44922  391  查看评论 (0)
分享到微信朋友圈
X
jquery撕页广告效果 ie兼容6

实现代码

html

<div id="pageflip">
	<a href="http://www.jq22.com" target="_blank">
    <img width="307" height="319" alt="www.jq22.com" src="images/page_flip.png"></a> 
	<div class="msg_block"></div>
</div>

js

<script type="text/javascript"> 
$(document).ready(function(){

	$("#pageflip").hover(function(){
		$("#pageflip img , .msg_block").stop().animate({width: '307px', height: '319px'}, 500); 
	},function(){
		$("#pageflip img").stop().animate({width: '50px', height: '52px'}, 220);
		$(".msg_block").stop().animate({width: '50px', height: '50px'}, 200);
	});

});
</script>


相关插件-图片展示

jQuery淘宝图片放大镜(原创)

jQuery淘宝图片放大镜,兼容ie7
  图片展示
 37229  372

JQUERY全屏撕裂幻灯片-FULLSCREEN-SLIT-SLIDER

fullscreen-slit-slider由 jQuery 和 css3 打造而成。为我们提供了一个全屏的撕裂效果的幻灯片,接下来我就为大家讲解以下相关的用法。
  图片展示
 46250  421

CSS3三角形图片展示

CSS3三角形图片展示
  图片展示
 41337  398

在圆点上不断滑动鼠标看看效果

图片以圆点显示,随着鼠标的滑动,圆点的尺寸越来越小,图片越来越清晰
  图片展示
 33250  450

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复