• <fieldset id="8imwq"><menu id="8imwq"></menu></fieldset>
  • <bdo id="8imwq"><input id="8imwq"></input></bdo>
    最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
    問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
    當前位置: 首頁 - 科技 - 知識百科 - 正文

    基于jQuery仿淘寶產品圖片放大鏡特效_jquery

    來源:懂視網 責編:小采 時間:2020-11-27 21:49:06
    文檔

    基于jQuery仿淘寶產品圖片放大鏡特效_jquery

    基于jQuery仿淘寶產品圖片放大鏡特效_jquery:在開發商城的時候,往往會用到圖片的放大功能,這里把自己在近期項目中使用的放大鏡特效做一下總結(非插件)。 放大鏡效果 常用的js組件jquery.imagezoom,jquery.jqzoom,jquery.zoom等 這些組件大同小異。 大家感興趣的話可以去搜索引擎搜索。 本文主要是使用非
    推薦度:
    導讀基于jQuery仿淘寶產品圖片放大鏡特效_jquery:在開發商城的時候,往往會用到圖片的放大功能,這里把自己在近期項目中使用的放大鏡特效做一下總結(非插件)。 放大鏡效果 常用的js組件jquery.imagezoom,jquery.jqzoom,jquery.zoom等 這些組件大同小異。 大家感興趣的話可以去搜索引擎搜索。 本文主要是使用非
    在開發商城的時候,往往會用到圖片的放大功能,這里把自己在近期項目中使用的放大鏡特效做一下總結(非插件)。

    放大鏡效果 常用的js組件jquery.imagezoom,jquery.jqzoom,jquery.zoom等 這些組件大同小異。 大家感興趣的話可以去百度一下。

    本文主要是使用非組件方法來做放大鏡效果。

    每一張圖片都要生成三種尺寸,否則放大鏡的效果不會太明顯,這里是 54X54 320X320 800X800。

    首先看效果:鼠標經過小圖時,大圖隨之切換。

    首先是html

    
     
     和朋友們一起想辦法(第二輯):全8冊
     
     
     和朋友們一起想辦法(第二輯):全8冊
     
     
     
     和朋友們一起想辦法(第二輯):全8冊
     和朋友們一起想辦法(第二輯):全8冊
     和朋友們一起想辦法(第二輯):全8冊
     和朋友們一起想辦法(第二輯):全8冊
     和朋友們一起想辦法(第二輯):全8冊
    
     
     
    
    

    這里id為move的div是放大鏡的手柄 id為detailPic的div是右側放大鏡

    css

    .infoimg { float: left; padding: 0 20px 30px 0; position: relative; width: 320px; }
    
    .infoimg img { display: block; height: 320px; width: 320px; }
    
    .allImg { height: 58px; margin: 15px 0 0 10px; overflow: hidden; width: 310px; }
    
    .allImg img { cursor: pointer; float: left; height: 54px; margin-right: 3px; padding: 2px; width: 54px; }
    
    .allImg img.current { border: 1px solid #f1f1f1; padding: 1px; }
    
    .mainImg { position: relative; }
    
    .mainImg .zoom_pup { background: url("../images/zoom_pup.png") repeat 0 0; cursor: move; height: 175px; left: 0px; position: absolute; top: 160px; width: 175px; display: none; }
    
    .big_pic { background-color:#fff; border: 1px solid #f5f5f5; height: 400px; left: 320px; overflow: hidden; position: absolute; text-align: center; top: 0; width: 400px; display: none; }
    .big_pic img{ width: 800px; height: 800px;}
    
    

    JS代碼

    當然這里最下面一排小圖片 還缺少一個功能,就是當圖片大于5張的時候可以左右滾動圖片,這樣可以容納大于5張的圖片。這里項目中使用的圖片一般都小于5張,因此這個功能沒有,大家可以參考一下當當或京東。

    聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    基于jQuery仿淘寶產品圖片放大鏡特效_jquery

    基于jQuery仿淘寶產品圖片放大鏡特效_jquery:在開發商城的時候,往往會用到圖片的放大功能,這里把自己在近期項目中使用的放大鏡特效做一下總結(非插件)。 放大鏡效果 常用的js組件jquery.imagezoom,jquery.jqzoom,jquery.zoom等 這些組件大同小異。 大家感興趣的話可以去搜索引擎搜索。 本文主要是使用非
    推薦度:
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    主站蜘蛛池模板: 国产精品视频久久| 精品日本一区二区三区在线观看 | 国产成人精品一区二区秒拍| 久久se精品一区二区影院| 久久99精品国产99久久| 精品性影院一区二区三区内射| 手机日韩精品视频在线看网站| 国产99久久久国产精品~~牛| 国产精品www| 国产久热精品无码激情| 亚洲第一极品精品无码久久| 精品无码久久久久久久动漫| 91麻豆精品国产91久久久久久| 国产精品美女久久久久网| 精品无码一区二区三区爱欲九九 | 911亚洲精品国内自产| 国产亚洲精品va在线| 成人国产精品免费视频| 精品黑人一区二区三区| 无码欧精品亚洲日韩一区| 中文精品人人永久免费| 久久精品成人免费国产片小草 | 亚洲精品岛国片在线观看| 国产精品美女久久久免费| 四虎国产精品免费久久久| 精品国产日产一区二区三区 | 国产成人久久精品二区三区| 久久精品国产亚洲网站| 国产美女久久精品香蕉69| 久久精品无码一区二区无码 | 97精品久久天干天天天按摩| 久久久精品2019免费观看| 一色屋精品视频在线观看| 中文字幕精品久久久久人妻| 亚洲精品成人片在线观看| 中文字幕无码精品三级在线电影 | 欧美性videofree精品| 精品一区二区三区中文字幕| 国产精品你懂的| 久久九九青青国产精品| 91精品一区二区综合在线 |