• <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
    主站蜘蛛池模板: 亚洲av永久无码精品表情包| 欧美精品888| 欧美精品一本久久男人的天堂| 亚洲精品乱码久久久久久| 国产原创精品 正在播放| 久热这里只精品99re8久| freesexvideos精品老师毛多| 最新精品露脸国产在线| 91精品国产自产在线老师啪| 国产AV国片精品有毛| 欧洲精品久久久av无码电影| 亚洲高清国产拍精品青青草原| 国产在线精品福利大全| 国产精品第一区第27页| 久久伊人精品青青草原高清| 91精品国产综合久久精品| 久久久久国产精品熟女影院| 亚洲国产另类久久久精品黑人 | 亚洲国产精品lv| 99麻豆久久久国产精品免费| 精品久久久久久无码专区不卡| 无码人妻丰满熟妇精品区| 中国大陆精品视频XXXX| 最新国产精品精品视频| 亚洲国产精品无码久久九九| 香蕉99久久国产综合精品宅男自| 久久精品人妻一区二区三区| 久久99国产精品成人欧美| 老湿亚洲永久精品ww47香蕉图片| 精品人妻少妇一区二区三区在线| 韩国三级中文字幕hd久久精品| 精品视频久久久久| 久久伊人精品青青草原日本| 亚州日韩精品专区久久久| 在线观看国产精品普通话对白精品| 中日精品无码一本二本三本| 日韩精品极品视频在线观看免费| 国产精品污WWW在线观看| 国产精品久久久天天影视| 久久精品国产只有精品2020| 亚洲国产精品久久久久婷婷老年|