標籤

4GL (1) 人才發展 (10) 人物 (3) 太陽能 (4) 心理 (3) 心靈 (10) 文學 (31) 生活常識 (14) 光學 (1) 名句 (10) 即時通訊軟體 (2) 奇狐 (2) 音樂 (2) 產業 (5) 郭語錄 (3) 無聊 (3) 統計 (4) 新聞 (1) 經濟學 (1) 經營管理 (42) 解析度 (1) 遊戲 (5) 電學 (1) 網管 (10) 廣告 (1) 數學 (1) 機率 (1) 雜趣 (1) 證券 (4) 證券期貨 (1) ABAP (15) AD (1) agentflow (4) AJAX (1) Android (1) AnyChart (1) Apache (14) BASIS (4) BDL (1) C# (1) Church (1) CIE (1) CO (38) Converter (1) cron (1) CSS (23) DMS (1) DVD (1) Eclipse (1) English (1) excel (5) Exchange (4) Failover (1) FI (57) File Transfer (1) Firefox (2) FM (2) fourjs (1) gladiatus (1) google (1) Google Maps API (2) grep (1) Grub (1) HR (2) html (23) HTS (8) IE (1) IE 8 (1) IIS (1) IMAP (3) Internet Explorer (1) java (3) JavaScript (22) jQuery (6) JSON (1) K3b (1) LED (3) Linux (112) Linux Mint (4) Load Balance (1) Microsoft (2) MIS (2) MM (51) MSSQL (1) MySQL (27) Network (1) NFS (1) Office (1) Oracle (125) Outlook (3) PDF (6) Perl (59) PHP (33) PL/SQL (1) PL/SQL Developer (1) PM (3) Postfix (2) postfwd (1) PostgreSQL (1) PP (50) python (1) QM (1) Red Hat (4) Reporting Service (28) ruby (11) SAP (234) scp (1) SD (16) sed (1) Selenium-WebDriver (5) shell (5) SQL (4) SQL server (8) SQuirreL SQL Client (1) SSH (2) SWOT (3) Symantec (2) T-SQL (7) Tera Term (2) tip (1) tiptop (22) Tomcat (6) Trouble Shooting (1) Tuning (5) Ubuntu (33) ufw (1) utf-8 (1) VIM (11) Virtual Machine (2) vnc (3) Web Service (2) wget (1) Windows (19) Windows (1) WM (6) youtube (1) yum (2)

2014年7月17日 星期四

利用jQuery and CSS 做到放大境效果 (jQZoom 插件)

1.
在 <head> </head> 之間放入

<script type="text/javascript" src="/js/jquery.jqzoom-core.js"></script>
<link rel="stylesheet" href="/css/jquery.jqzoom.css" type="text/css" media="screen" />

2.
在 <head> </head> 之間放入
<script type="text/javascript" language="javascript">
<!--
$(document).ready(function(){
    var options = {
        zoomType: 'standard',
        lens:true,
        preloadImages: true,
        alwaysOn:false,
        zoomWidth: 350,
        zoomHeight: 290,
        //xOffset:90,
        //yOffset:30,
        position:'right'
        //...MORE OPTIONS
    };
    $('.product_zoom').jqzoom(options);
    //取得css物件
    });
-->
</script>

3.
選定圖案做放大效果,class是放在外層的<a></a>
<a class='product_zoom' id='product_zoom_id' href='onpylu.jpg' title='75 %藥用酒精( 安皮露75%酒精液)' rel='gal1'><img src='onpylu.jpg' width='360' border='0' name='box_img_name' title='75 %藥用酒精( 安皮露75%酒精液)'></a>

沒有留言:

張貼留言