Welcome, Old Sport!

图像悬停焦点效果制作 CSS & jQuery

by ilikecss ON 2010/11/16 32907

又一款画廊展示效果,网上看到的,把CSS和脚本都整理出来,另外原效果不支持IE6,现以修改支持大众浏览器。下面就开始学习如果制作这款效果,文章最后有下载Demo
image-hover-zoom-effect

Step1. 创建HTML

<ul class="thumb">
    <li><a href="images/main_image1.jpg"><img src="images/thumb1.jpg" alt="" /></a></li>
    <li><a href="images/main_image2.jpg"><img src="images/thumb2.jpg" alt="" /></a></li>
    <li><a href="images/main_image3.jpg"><img src="images/thumb3.jpg" alt="" /></a></li>
    <li><a href="images/main_image4.jpg"><img src="images/thumb4.jpg" alt="" /></a></li>
    <li><a href="images/main_image5.jpg"><img src="images/thumb5.jpg" alt="" /></a></li>
</ul>

Step2. 创建CSS

#col {
	width: 750px;
	margin: 50px auto 0 auto;
	clear: both;
	padding-bottom: 50px;
}
ul.thumb {
	width: 600px;
	list-style: none;
	margin: 0 auto; 
	padding: 10px 0;
}
ul.thumb li {
	margin: 0; 
	padding: 5px;
	float: left;
	position: relative;  /* Set the absolute positioning base coordinate */
	width: 110px;
	height: 110px;
}
ul.thumb li img {
	width: 100px; height: 100px; /* Set the small thumbnail size */
	-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
	border: 1px solid #ddd;
	padding: 5px;
	background: #f0f0f0;
	position: absolute;
	left: 0; 
	top: 0;
}
ul.thumb li img.hover {
	background: #666;  /* Image used as background on hover effect
	border: none; /* Get rid of border on hover */
}
#main_view {
	width: 750px;
	margin: 0 auto;
	padding-top: 20px;
	text-align: center;
	clear: both;
}

Step3. 插入jQuery和脚本包

<script type="text/javascript">
$(document).ready(function(){
//Larger thumbnail preview 
$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
.animate({
	marginTop: '-110px', 
	marginLeft: '-110px', 
	top: '50%', 
	left: '50%', 
	width: '174px', 
	height: '174px',
	padding: '10px' 
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
	marginTop: '0', 
	marginLeft: '0',
	top: '0', 
	left: '0', 
	width: '100px', 
	height: '100px', 
	padding: '5px'
}, 400);
});
//Swap Image on Click
$("ul.thumb li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;		
});
});
</script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
26条评论
  1. 效果不错,好像运行的时候占用CPU资源有点多~

    测试了下,IE和FF都支持兼容

    • 恩,我做的DEMO都做过浏览器测试的,不兼容我会写出来告诉大家的。

  2. Beneficial info and excellent design you got here! I want to thank you for sharing your ideas and putting the time into the stuff you publish! Great work!

  3. Pretty nice post. I just stumbled upon your blog and wanted to say that I have really enjoyed browsing your blog posts. In any case I’ll be subscribing to your feed and I hope you write again soon!

  4. excellent post you’ve receive

  5. Thank you for one more essential article. Where else may anybody get that type of info in such a complete means of writing? I have a presentation incoming week, and I’m on the lookout for such information.

  6. Would you be interested in exchanging links?

  7. Keep functioning ,impressive job!

  8. Hi! Your article rocks and is really a very good understand!…

  9. #9

    mutuelle说道:

    I found your weblog on google and check several of the early posts. Preserve up the excellent operate. I just additional up your RSS feed to my MSN News Reader. Seeking forward to reading through additional from you later on!…

  10. Frequently I do not put up on blogs, but I would like to say that this put up truly forced me to do so! seriously great post

  11. #11

    pai skincare说道:

    I know I’m a little late in contributing my ideas but this specific write-up produced me think. It was an absorbing blog publish. I’ve grow to be a frequent reader of one’s site because I stumbled on your internet site a while back again. I cannot say that I concur with every thing you said however it was emphatically enlightening! I will likely be back once more soon.

  12. #12

    Jon Hehr说道:

    Hi, what a fantastic facts in your web page listed here

  13. #13

    Denna Fantroy说道:

    Keep functioning ,great job!

  14. #14

    insomnia说道:

    Hi. I needed to drop you a fast be aware to precise my thanks. Ive been following your blog for a month or so and have picked up a ton of fine data and loved the tactic youve structured your site. I am attempting to run my very personal blog nevertheless I feel its too basic and I need to concentrate on a variety of smaller topics. Being all issues to all of us just isn’t all that its cracked as much as be

  15. Thank you very much .

  16. Wow!, this was a real quality post. In theory I’d like to write like this too – taking time and real effort to make a good article… but what can I say… I keep putting it off and never seem to achieve anything

  17. I’d must verify with you here. Which is not something I normally do! I enjoy studying a put up that may make folks think. Additionally, thanks for allowing me to comment!

  18. #18

    men fashion说道:

    It’s best to take part in a contest for one of the best blogs on the web. I will advocate this web site!

  19. #19

    Alpha Reseller说道:

    WONDERFUL Post.thanks for share..more wait .. …

  20. #20

    Jule Decaprio说道:

    You made several nice points there. I did a search on the topic and found a good number of folks will agree with your blog.

  21. Thanks for tip Cecilia, we changed the link. Adam

  22. It is a really good read for me, Must admit that you are probably the greatest bloggers I ever saw.Thanks for posting this informative article.

  23. Hello, what a sexy data in your webpage here

  24. #24

    allexxs说道:

    Very informative and nice design. I really like your posts and your style.




TOP