導航:首頁 > 編程語言 > js淘寶圖片

js淘寶圖片

發布時間:2023-11-21 20:15:46

『壹』 求jQuery或js實現淘寶上面的圖標菜單在手機上滑動的效果。m.taobao.com

在PC端的網頁上,用CSS加個滾動條就可以滑動了,樣式為overflow-x:auto;,
但是在手機端這個樣試是不起作用的,在目前三個主流手機端 ios 、android、wp的系統上,只有wp的系統支持這個樣式,ios和android都不支持,要想在手機端實現同樣的功能,那麼你可以用手機端屬的JS事件來控制
xxx.addEventListener("touchstart",function(e){
//這里放手指移上去的代碼,可以取到手指移上去的屏幕坐標,在e中取。
},false);

document.addEventListener("touchend",function(e){
//這里放手指移出去的代碼,可以取到手指移出後屏幕上的坐標,在e中取。
},false);

document.addEventListener("touchmove",function(e){
//這里放手機在屏幕上劃動的代碼,可以隨時取得手指的坐標,並對元素做相應的調整。
},false);

以上的手機觸屏事件分別對應著PC網頁端的
onmousedown事件、onmouseup事件和onmousemove事年,
注意以上的手機端的JS事件在網頁端是無效的(touchstart,touchend,touchmove)

『貳』 求一段能在淘寶用的 滾動圖片的代碼 左右滾動,最好能無縫的。JS代碼淘寶不支持。

你可以學學marquee語句,適應文字和圖片,設置滾動方式、滾動時間和滾動次數等等,以下為詳細教程,都是圍繞marquee語句進行的。
----------------------------------------------------------
html中Marquee屬性詳解 用於文字,圖片等等....
Marquee標記用於在可用瀏覽區域中滾動文本。
格式:
<MARQUEEALIGN="…"
BEHAVIOR="…"
BGCOLOR="…"
DIRECTION="…"
HEIGHT="…"
WIDTH="…"
HSPACE="…"
VSPACE="…"
LOOP="…"
SCROLLAMOUNT="…"
SCROLLDELAY="…"
ONMOUSEOUT=this.start()
ONMOUSEOVER=this.stop()
>…
</MARQUEE>

屬性:
ALIGN:用於按設定的值對齊滾動的文本。ALIGN可以設定的值有:LEFT,CENTER,RIGHT,TOP,BOTTOM。此屬性不是必須使用的。
例:
<MARQUEEALIGN="TOP"> 這段滾動文字設定為上對齊 </MARQUEE>
BEHAVIOR:可以在頁面上一旦出現文本時讓瀏覽器按照設定的方法來處理文本。如果設定的方法是SLIDE,那麼文本就移動到文檔上,並停留在頁邊距上。如果設定為AlterNATE,則文本從一邊移動到另一邊。如果設定為SCROLL,文本將在頁面上反復滾動。本屬性不是必須使用的。可以設定的值有:SILIDE,AlterNATE,SCROLL。
例:
<MARQUEEBEHAVIOR="AlterNATE"> 文字從一邊移動到另一邊 </MARQUEE>
BGCOLOR:用於設定字幕的背景顏色。背景顏色可用RGB、16進制值的格式或顏色名稱來設定。
例:
<MARQUEEBGCOLOR="RED">用顏色名稱設定滾動文字背景顏色為紅色 </MARQUEE>
<MARQUEEBGCOLOR="#FF0000" >用16進制值設定滾動文字背景顏色為紅色 </MARQUEE>
<MARQUEEBGCOLOR=RGB(100%'0%'0%)> 用RGB設定滾動文字背景顏色為紅色 </MARQUEE>
DIRECTION:用於設定文本滾動的方向,可以設定的值有:LEFT,RIGHT。此屬性不是必須使用的。
例:
<MARQUEEDIRECTION="LEFT" >文字向左邊滾動 </MARQUEE>
<MARQUEEDIRECTION="RIGHT" >文字向右邊滾動 </MARQUEE>
HEIGHT:用於設定滾動字幕的高度,高度可用像素或可視頁面的百分比來表示。此屬性不是必須使用的。
例:
<MARQUEEHEIGHT="10%"> 滾動字幕的高度是可視頁面的10%< /MARQUEE>
<MARQUEEHEIGHT="12" >滾動字幕的高度是12像素 </MARQUEE>
WIDTH:用於設定字幕的寬度,寬度可用像素或可視頁面的百分比來表示。此屬性不是必須使用的。
例:
<MARQUEEWIDTH="90%"> 滾動字幕的寬度是可視頁面的90% </MARQUEE>
<MARQUEEWIDTH="200" >滾動字幕的寬度是200像素 </MARQUEE>
HSPACE:用於設定滾動字幕左右的空白空間,空白空間用像素表示。此屬性不是必須使用的。
例:
<MARQUEEHSPACE="15" >滾動字幕左右空白空間為15個像素 </MARQUEE>
VSPACE:用於設定滾動字幕上下的空白空間,空白空間用像素表示。此屬性不是必須使用的。
例:
<MARQUEEVSPACE="2"> 滾動字幕上下的空白空間為2個像素 </MARQUEE>
LOOP:用於設定滾動字幕的滾動次數。當LOOP的值為"INFINITE"或是"-1"時,則文字會無限制地滾動。此屬性不是必須使用的。
例:
<MARQUEELOOP="-1" >文字滾動無數次 </MARQUEE>
<MARQUEELOOP="5" >文字滾動5次 </MARQUEE>
SCROLLAMOUNT:用於設定每個連續滾動文本後面的間隔,該間隔用像素表示。此屬性不是必須使用的。
例:
<MARQUEESCROLLAMOUNT="10"> 此文本後面的間隔為10個像素 </MARQUEE>
SCROLLDELAY:用於設定兩次滾動操作之間的間隔時間,該時間以毫秒為單位。此屬性不是必須使用的。
例:
<MARQUEESCROLLDELAY="5"> 此文本兩次滾動之間的間隔時間為5毫秒 </MARQUEE>
ONMOUSEOUT=this.start() :用來設置滑鼠移出該區域時繼續滾動
ONMOUSEOVER=this.stop():用來設置滑鼠移入該區域時停止滾動
Marquee 也可以做飄浮廣告效果:
<marquee behavior="alternate" height="300" direction="up" scrollamount="3" scrolldelay="30" width="300" bgcolor="#3399FF">
<marquee behavior="alternate" height="50" direction="left" scrollamount="3" scrolldelay="30" width="100%">
<font style="font-size: 35px">Ouyang</font>
</marquee>
<marquee> ... </marquee>
移動屬性的設置 ,這種移動不僅僅局限於文字,也可以應用於圖片,表格等等 滑鼠屬性
onMouseOut=this.start() ........滑鼠移出狀態滾動
onMouseOver=this.stop() .........滑鼠經過時停止滾動
方向
<direction=#> #=left, right ,up ,down <marquee direction=left>從右向左移!</marquee>
方式
<bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈繞著走!</marquee>
<marquee behavior=slide>只走一次就歇了!</marquee>
<marquee behavior=alternate>來回走</marquee>
循環
<loop=#> #=次數;若未指定則循環不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>
<marquee loop=3 width=50% behavior=alternate>只走 3 趟!</marquee>
速度
<scrollamount=#> <marquee scrollamount=20>啦啦啦,我走得好快喲!</marquee>
延時
<scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!</marquee>
外觀(Layout)設置
對齊方式(Align)
<align=#> #=top, middle, bottom <font size=6>
<marquee align=# width=400>啦啦啦,我會移動耶!</marquee>
</font>
底色
<bgcolor=#> #=rrggbb 16 進制數碼,或者是下列預定義色彩:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>顏色!</marquee>
面積
<height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面積!</marquee>
空白
(Margins)<hspace=# vspace=#>
<marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面積!</marquee> </pre>
-------------------------------------------------------------
以上是html代碼,不是javascript代碼!可以照著
參考代碼:
<html>
<body>
<div style="width:100px;height:50px;overflow:hidden;border:1px solid #f00;padding:0;">
<marquee align="left" DIRECTION="left" SCROLLDELAY="100" HSPACE="0" VSPACE="0">
<table width="200" height="50" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="50" height="50"><img width="50" height="50" alt="no1"></td>
<td width="50" height="50"><img width="50" height="50" alt="no2"></td>
<td width="50" height="50"><img width="50" height="50" alt="no3"></td>
<td width="50" height="50"><img width="50" height="50" alt="no4"></td>
</tr>
</table>
</marquee>
</div>
</body>
</html>

『叄』 淘寶圖片放大鏡特效

淘寶圖片有放大鏡特效是對於商品主圖來說。只要在發布寶貝時把商品主圖的尺寸設置在700X700或者以上,主圖圖片就會有放大鏡特效:

『肆』 求類似於淘寶產品詳情頁面大圖下面多個小圖然後點擊左右箭頭可以換圖片的那種效果的CSS或JS代碼

http://down.admin5.com/texiao/flash/這里有很多的。我這倆天正好做的個那·~但是JS有沖突,希內望到時候你也幫容我

『伍』 求淘寶通欄圖片輪播代碼,包含js,css,html,類似下圖,求各路大神。

用firefox的 firebug插件查看元素,可以找到css,html的源代碼。用js操作動畫的代碼實現的方式不版同。
簡單的思路:權把三張圖P到一起,設置成背景,假如每張圖width:600px,用JS控制每1500毫秒(1.5秒)width增加600px,當width=1800px 設置width=600。

『陸』 怎麼用javascript代碼實現淘寶寶貝圖片放大鏡效果(滑鼠移至小圖 顯示大圖效果),謝謝了

如果可以用插件的話推薦用jquery插件來實現,一分鍾搞定。 如果不能的話就告訴你原理吧,至於具體的實現要做到兼容所有瀏覽器不是一件省心的事。 首先要准備兩張圖片(一個是小的預覽圖,一個是很大的高清圖) 然後寫一個DIV,裡面放一個IMG和一個DIV 也就是 然後給img綁定mousemove事件,在事件內寫下如下實現的代碼 首先計算出滑鼠在這個img標簽上的相對坐標,如果是在img的最左上邊。坐標則為0,0 然後吧這個DIV內部的小DIV固定為100*100大小,然後再就是計算它的比例。 然後再把這個DIV的背景設置成那個大圖,然後再用背景的絕對定位進行移動即可

閱讀全文

與js淘寶圖片相關的資料

熱點內容
中間夾菜單裡面不能顯示壓縮文件 瀏覽:952
如何指導小學生參加編程比賽 瀏覽:275
物業的招標文件有哪些 瀏覽:452
保存游戲文件名非法或只讀 瀏覽:258
js怎麼做圖片時鍾 瀏覽:451
華為應用裡面有了app說明什麼 瀏覽:801
資料庫中xy是什麼意思 瀏覽:893
u盤打不開提示找不到應用程序 瀏覽:609
網站功能介紹怎麼寫 瀏覽:954
word在試圖打開文件時錯誤 瀏覽:108
主板無vga插槽怎麼連接編程器 瀏覽:521
錄視頻文件在哪裡刪除 瀏覽:881
word2013如何插入文件 瀏覽:233
proe教程百度網盤 瀏覽:197
如何控制遠程linux伺服器 瀏覽:740
it教學app有哪些 瀏覽:34
怎麼在ps摳的圖變成矢量文件 瀏覽:405
口袋妖怪銀魂安卓v11 瀏覽:1
網站上芒果tv的賬號都是什麼 瀏覽:104
帶公式的表格如何刷新數據 瀏覽:81

友情鏈接