• <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
    主站蜘蛛池模板: www亚洲欲色成人久久精品| 国产精品亚洲高清一区二区| 国产福利电影一区二区三区,亚洲国模精品一区 | 国产成人精品日本亚洲网址| 日韩精品人成在线播放| 中文字幕亚洲精品| laowang在线精品视频| 亚洲精品成人网站在线观看| 久久激情亚洲精品无码?V| 999国产精品视频| 久久久九九有精品国产| 国产亚洲精品精华液| 午夜不卡久久精品无码免费| 西瓜精品国产自在现线| 久久精品免费网站网| 国产欧美日本精品| 国产精品自产拍在线观看花钱看| 日韩精品免费在线视频| 华人亚洲欧美精品国产| 国产成人精品免费视频网页大全| 久久99久久99精品免视看动漫| 亚洲日韩精品一区二区三区| 亚洲精品黄色视频在线观看免费资源| 精品精品国产理论在线观看| 成人精品一区二区久久久| 在线观看91精品国产入口| 四虎成人精品免费影院| 久久精品国产福利国产秒| 黑人精品videos亚洲人| 日本精品一区二区三区在线观看 | 蜜桃麻豆www久久国产精品 | 国产成人精品cao在线| 亚洲精品欧美综合| 精品在线免费观看| 国产精品久久成人影院| 国产午夜精品一区理论片| 国产精品久久久久久久久| 久久精品一区二区三区不卡| 欧美精品亚洲精品日韩| 99久久精品费精品国产| 国产精品最新国产精品第十页 |