以下是 屏幕放大镜jquery特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>abc</title>
<style type="text/css" media="all">@import url("css/reset.css?lvhtu3");
@import url("css/layout.css?lvhtu3");
</style>
<!----->
<script type="text/javascript" src="js/jquery.js?v=1.4.4"></script>
<script type="text/javascript" src="js/retina.js?lvhtu3"></script>
<script type="text/javascript" src="js/alpha.js?lvhtu3"></script>
<!---->
<!--[if lt IE 9]><script src="js/html5.js"></script>
<![endif]-->
</head>
<body class="html front not-logged-in no-sidebars page-node page-node- page-node-7 node-type-page">
<div><div><div><section>
<div id="container">
<div class="wrapper">
<header id="header" role="banner">
<div id="header-inner">
</header>
<section id="main-content" class="" role="main">
<div class="page-inner clearfix">
<div class="region region-content">
<section id="block-system-main" class="block block-system">
<div>
<article id="article-7" class="node node-page clearfix" role="article" about="/content/hi-im-alex-cohaniuc" typeof="foaf:Document">
<div>
<div class="field field-name-body field-type-text-with-summary field-label-hidden">
<div class="field-items">
<div class="field-item even" property="content:encoded">
<div class="column-first"> </div></div>
<div class="column-second">
<div class="show-case">
<div class="showcase-item clearfix active">
<div class="show-content"></div>
<a class="showcase-link" rel="images/screen-big.png" href="work#work-9">
<img src="images/screen.png" width="600" height="380" alt="MadeMail"></a></div>
<div class="showcase-item clearfix">
<div class="show-content"></div>
<a class="showcase-link" rel="images/screen-big.png" href="work#work-8">
<img src="images/screen.png" width="600" height="380" alt="MadeMail"></a></div>
<div class="showcase-item clearfix">
<div class="show-content"></div>
<a class="showcase-link" rel="images/screen-big.png" href="work#work-11">
<img src="images/screen.png" width="600" height="380" alt="MadeMail"></a></div>
</div>
<p>
<img id="display" src="images/display.png" width="665" height="562"></p>
</div></div></div></div></div></article></div>
</section></div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
JS代码(retina.js):
;
(function($){
/** * @author Ti ($.fn.retina) http://3apaxi.com/ ti.bugmenot@gmail.com * @author Martin Angelov (idea,example) http://tutorialzine.com/2010/06/apple-like-retina-effect-jquery-css/ * @version 0.1 (07.10.2010) */
$.fn.retina = function(options){
options = $.extend(true,{
// default options:enable:true,// false to deattach retinacss:{
}
,// custom cssappendTo:'body',//src:null,// src of large iamge (else use rel,src or href attrs)radius:null,// css radius (null - auto)ie:{
css3pie:'PIE.htc',// URI of css3pie (for IE)cursor:'blank.cur' // URI of blank.cur (for IE)}
,preload:false // preload large image?}
,options)// attachif (options.enable){
this.each(function(){
if (this.retina) this.retina.deattach() // reattach retinathis.retina = new Retina(this,options.src || $(this).attr('rel') || $(this).attr('src') || $(this).attr('href'),options)}
)}
// deattachelse{
this.each(function(){
if (this.retina){
this.retina.deattach()delete this.retina}
}
)}
return this}
var Retina = function(element,largeImage,options){
var _this = thisvar node = $(element)var glassvar oldIevar init = function(){
oldIe = $.browser.msie && /^[5-8]\./.test($.browser.version)var getCursor = function(){
if (oldIe && options.ie.cursor) return 'url('+options.ie.cursor+'),crosshair'if ($.browser.mozilla || $.browser.opera) return 'none'var blankCur = 'AAACAAEAICAAAAAAAADoAgAAFgAAACgAAAAgAAAAQAAAAAEABAAAAAAAgAIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAACAAAAAgIAAgAAAAIAAgACAgAAAgICAAMDAwAAAAP8AAP8AAAD//wD/AAAA/wD/AP//AAD///8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////w=='if ($.browser.webkit) blankCur = blankCur.slice(0,829)+'P'+blankCur.slice(830,1016)+'f'+blankCur.slice(1017)return 'url(data:text/plain;
base64,'+blankCur+'),none'}
glass = $('<div></div>')glass.css($.extend(true,{
display:'none',background:'no-repeat center center white url('+largeImage+')',border:'2px solid white',/* Positioned absolutely,so we can move it around */
position:'absolute',top:0,left:0,height:300,width:300,/* CSS3 Box Shadow */
boxShadow:'0 2px 4px #777','-webkit-box-shadow':'0 2px 4px #777','-moz-box-shadow':'0 2px 4px #777',cursor:getCursor()}
,options.css))glass.appendTo(options.appendTo)var radius = options.radius || Math.min(glass.width(),glass.height())/2 +'px'glass.css({
/* CSS3 rounded corners */
borderRadius:radius,'-webkit-border-radius':radius,'-moz-border-radius':radius}
)if (oldIe && options.ie.css3pie) glass.css('behavior','url('+options.ie.css3pie+')')$(document).bind('mousemove',_this.move)// on load image - recalculate sizenode.find('img').add(node).load(_this.loadSize)$(window).resize(_this.loadSize)init = $.noop}
var offset,width,height,glassWidth,glassHeight_this.loadSize = function(){
offset = node.offset()width = node.width()height = node.height()glassWidth = glass.width()glassHeight = glass.height()}
_this.show = function(e){
init()_this.loadSize()if (oldIe && options.ie.css3pie) glass.show()else glass.stop(true,true).fadeIn('fast')_this.move(e)}
_this.hide = function(){
if (oldIe && options.ie.css3pie) glass.hide()else glass.stop(true,true).fadeOut('fast')}
_this.move = function(e){
// mouse outif (e.pageX < offset.left || e.pageY < offset.top) return _this.hide()if (offset.left + width < e.pageX) return _this.hide()if (offset.top + height < e.pageY) return _this.hide()glass.css({
// moving the retina div with the mousemarginLeft:e.pageX - glassWidth/2,// left and top css not work in ie with css3pie!marginTop:e.pageY - glassHeight/2,// scrolling the backgroundbackgroundPosition:( (100/width) * (e.pageX - offset.left) )+'% '+( (100/height) * (e.pageY - offset.top) )+'%'}
)}
_this.deattach = function(){
node.unbind('mouseenter',_this.show)if (glass){
glass.remove()$(document).unbind('mousemove',_this.move)node.find('img').add(node).unbind('load',_this.loadSize)$(window).unbind('resize',_this.loadSize)}
}
node.bind('mouseenter',_this.show)// preloadif (options.preload) $(new Image).attr('src',largeImage)}
}
)(jQuery);
CSS代码(reset.css):
/** * HTML5 ✰ Boilerplate * * style.css contains a reset,font normalization and some base styles. * * Credit is left where credit is due. * Much inspiration was taken from these projects:* - yui.yahooapis.com/2.8.1/build/base/base.css * - camendesign.com/design/ * - praegnanz.de/weblog/htmlcssjs-kickstart */
/** * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) * v1.6.1 2010-09-17 | Authors:Eric Meyer & Richard Clark * html5doctor.com/html-5-reset-stylesheet/ */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:"";content:none;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}
input,select{vertical-align:middle;}
/** * Font normalization inspired by YUI Library's fonts.css:developer.yahoo.com/yui/ */
body{font:13px/1.231 sans-serif;*font-size:small;}
/* Hack retained to preserve specificity */
select,input,textarea,button{font:99% sans-serif;}
/* Normalize monospace sizing:en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre,code,kbd,samp{font-family:monospace,sans-serif;}
/** * Minimal base styles. */
/* Always force a scrollbar in non-IE */
html{overflow-y:scroll;}
/* Accessible focus treatment:people.opera.com/patrickl/experiments/keyboard/test */
a:hover,a:active{outline:none;}
ul,ol{margin-left:2em;}
ol{list-style-type:decimal;}
/* Remove margins for navigation lists */
nav ul,nav li{margin:0;list-style:none;list-style-image:none;}
small{font-size:85%;}
strong,th{font-weight:bold;}
td{vertical-align:top;}
/* Set sub,sup without affecting line-height:gist.github.com/413930 */
sub,sup{font-size:75%;line-height:0;position:relative;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
pre{/* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
white-space:pre;white-space:pre-wrap;word-wrap:break-word;padding:15px;}
textarea{overflow:auto;}
/* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
.ie6 legend,.ie7 legend{margin-left:-7px;}
/* Align checkboxes,radios,text inputs with their label by:Thierry Koblentz tjkdesign.com/ez-css/css/base.css */
input[type="radio"]{vertical-align:text-bottom;}
input[type="checkbox"]{vertical-align:bottom;}
.ie7 input[type="checkbox"]{vertical-align:baseline;}
.ie6 input{vertical-align:text-bottom;}
/* Hand cursor on clickable input elements */
label,input[type="button"],input[type="submit"],input[type="image"],button{cursor:pointer;}
/* Webkit browsers add a 2px margin outside the chrome of form elements */
button,input,select,textarea{margin:0;}
/* Colors for form validity */
input:valid,textarea:valid{}
input:invalid,textarea:invalid{border-radius:1px;-moz-box-shadow:0px 0px 5px red;-webkit-box-shadow:0px 0px 5px red;box-shadow:0px 0px 5px red;}
.no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd;}
/* These selection declarations have to be separate No text-shadow:twitter.com/miketaylr/status/12228805301 Also:hot pink! */
::-moz-selection{background:#FF5E99;color:#fff;text-shadow:none;}
::selection{background:#FF5E99;color:#fff;text-shadow:none;}
/* j.mp/webkit-tap-highlight-color */
a:link{-webkit-tap-highlight-color:#FF5E99;}
/* Make buttons play nice in IE:www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button{width:auto;overflow:visible;}
/* Bicubic resizing for non-native sized IMG:code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img{-ms-interpolation-mode:bicubic;}
/** * You might tweak these.. */
body,select,input,textarea{/* #444 looks better than black:twitter.com/H_FJ/statuses/11800719859 */
color:#444;/* Set your base font here,to apply evenly */
/* font-family:Georgia,serif;*/
}
/* Headers (h1,h2,etc) have no default font-size or margin;define those yourself */
h1,h2,h3,h4,h5,h6{font-weight:bold;}
a,a:active,a:visited{color:#607890;}
a:hover{color:#036;}
/** * Primary styles * * Author:*/
/** * Non-semantic helper classes:please define your styles before this section. */
/* For image replacement */
.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr;}
/* Hide for both screenreaders and browsers:css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden{display:none;visibility:hidden;}
/* Hide only visually,but have it available for screenreaders:by Jon Neal. www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */
.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;}
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard:drupal.org/node/897638 */
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto;}
/* Hide visually and from screenreaders,but maintain layout */
.invisible{visibility:hidden;}
/* The Magnificent Clearfix:Updated to prevent margin-collapsing on child elements. j.mp/bestclearfix */
.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;overflow:hidden;}
.clearfix:after{clear:both;}
/* Fix clearfix:blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix{zoom:1;}
分享到QQ
分享到微博
微信扫一扫
