jquery手机屏幕放大镜效果

1、新建html文档。

2、准备好需要用到的图片。

3、书写hmtl代码。

<div id="main">

<div id="iphone">

    <div id="webpage">

<img src="images/webpage.png

        <div id="retina"></div>

        </div>

    </div>   

</div>

4、书写css代码。

* { margin: 0; padding: 0; }

body { font-size: 14px; color: #666; background: url('../images/demo_bg.jpg') no-repeat center top #111; font-family: Arial, Helvetica, sans-serif; }

#iphone { width: 750px; height: 400px; background: url('../images/iphone_4G.png') no-repeat center center; position: relative; }

#webpage { width: 499px; height: 283px; position: absolute; top: 50%; left: 50%; margin: -141px 0 0 -249px; }

#retina { background: url('../images/webpage.png') no-repeat center center white; border: 2px solid white; position: absolute; height: 180px; width: 180px; display: none; cursor: url('../images/blank.cur'), default; -moz-box-shadow: 0 0 5px #777, 0 0 10px #aaa inset; -webkit-box-shadow: 0 0 5px #777; box-shadow: 0 0 5px #777, 0 0 10px #aaa inset; -moz-border-radius: 90px; -webkit-border-radius: 90px; border-radius: 90px; }

#retina.chrome { cursor: url('../images/blank_google_chrome.cur'), default; }

#main { margin: 40px auto; position: relative; width: 750px; }

h1 { padding: 30px 0; text-align: center; margin: 40px 0 30px; font-size: 44px; color: white; font-weight: normal; }

h2 { font-weight: normal; text-align: center; }

h1, h2 { font-family: "Myriad Pro", Arial, Helvetica, sans-serif; }

p.credit { text-align: center; margin: 50px; }

p.credit a { color: #707070; font-size: 10px; text-decoration: none; border-bottom: 1px dotted; }

p.credit a:hover { border: none; }

a, a:visited { color: #0196e3; text-decoration: none; outline: none; }

a:hover { text-decoration: underline; }

a img { border: none; }

5、书写并添加js代码。<script src="1.4.2/jquery-1.4.2.min.js"></script>

6、代码整体结构。

7、查看效果。