JavaScript搜索框如何呈现商品展示图片

2023-03-18 11:31:01JavaScript018

JavaScript搜索框如何呈现商品展示图片,第1张

是想在搜索框显示出：搜索商品关键词展示符合的商品图片？

这个实现步骤

1：在商品上传时，程序应同步抓取商品图片作为缩略图存到对应商品表缩略图字段中

2：在搜索款检索商品关键词，实时使用ajax去请求符合的商品并返回商品相关信息（含缩略图）

3：ajax返回商品数据后【应是对象数组】，然后循环显示即可

function pagenum(page,pagesum,actcs)

if cint(page)>10 then

ks=page-5

js=page+5

if ks<1 then

ks=1

js=ks+10

end if

if js>cint(pagesum) then

js=pagesum

ks=js-10

end if

else

if cint(pagesum)>11 then

ks=1

js=11

else

ks=1

js=pagesum

end if

if page<>1 then

response.Write("<a href='" &actcs &"1'>首页</a><a href='" &actcs &page-1 &"'>上一页</a>")

else

response.Write("首页上一页 ")

end if

for i= ks to js

if i<10 then

if cint(i)=cint(page) then

response.Write("<font color='#FF0000'>0"&i &"</font>")

else

response.Write("<a href='" &actcs &i &"'>0"&i &"</a>")

end if

else

if cint(i)=cint(page) then

response.Write("<font color='#FF0000'>"&i &"</font>")

else

response.Write("<a href='" &actcs &i &"'>"&i &"</a>")

end if

if cint(page)<cint(pagesum) then

response.Write("<a href='" &actcs &page+1 &"'>下一页</a><a href='" &actcs &pagesum &"'>尾页</a>")

else

response.Write("下一页尾页 ")

end if

end function

sclass_id=cint(rs("sclass_id"))

set rs=server.CreateObject ("ADODB.RecordSet")

rs.Source="select * from products where sclass_id="&sclass_id

rs.Open rs.source,conn,3,3

<tr>

<%while not rs.eof

i=i+1%>

<p>

<a href="views.asp?hw_id=<%=rs("hw_id")%>"><img border="0" src="../<%pic=split(rs("hw_pic"),"*")%><%=pic(1)%>" title="<%=rs("hw_name")%>"/ width="160" height="120" class="pic"></a>

</p>

<p><a href="views.asp?hw_id=<%=rs("hw_id")%>"class="leftmenu_5"><%=rs("hw_name")%></a></p>

<p><a href="views.asp?hw_id=<%=rs("hw_id")%>"class="leftmenu_3"><%=rs("hw_sn")%></a><input type="checkbox" Name="cpbm" value="<%=rs("hw_id")%>"></p>

</td>

if i mod 4=0 then Response.Write("</tr><tr>")

rs.movenext

wend %>

</tr>

</table>

rs.close

'set rs=nothing

'conn.close

'set conn=nothing %>

<% call PageNum(1,PageSum,"页面的名字?id=1&page=") %>

<!DOCTYPE HTML>

<html>

<head>

<title>同页面多方向的图片滚动，面向对象</title>

<style>

div,h2,ul,li,img,span{margin:0padding:0}

li{list-style:none}

/*layout*/

.wrapper{width:960pxmargin:0 auto}

.prize{width:960pxmargin:20px autoposition:relativebackground:#f6f4f2font:12px Tahoma,sans-serifborder:1px solid #cccpadding:1pxcolor:#052d30}

/*title*/

.prize h2{height:25pxfont:bold 14px/25px Tahomabackground:#0cftext-indent:10pxtext-shadow:1px 1px 1px #fff}

/*content*/

.prize-con{width:900pxmargin:0 autoheight:128pxoverflow:hiddenpadding:10px 0position:relative}

.prize-con ul{width:200%position:absolute}

.prize-con li{float:left_display:inlineline-height:25pxtext-align:centermargin-right:5px}

.prize-con li img{width:141pxheight:110pxdisplay:blockborder:1px solid #cccpadding:1px}

.block2{width:220pxmargin:0}

.block2 .prize-con{width:150pxheight:410pxpadding:0margin:10px auto}

.block2 ul{width:auto}

.block2 li{float:none}

/*button*/

.prize span{display:blockposition:absolutetop:50%width:13pxheight:15pxbackground:#000 url(bun-bg.jpg) no-repeat 0 0cursor:pointer}

span.l-bun{left:5px}

span.r-bun{background-position:0 -15pxright:10px}

</style>

</head>

<body>

<ul>

</ul>

</div>

</div>

<ul>

</ul>

</div>

</div>

//find elements

_get = function(e,c){

var _isClass = e.indexOf(".")>=0,_isId = e.indexOf("#")>=0,newEle = e.substring(1)

//get frist argument

if(_isClass&&_isId) return

if(_isId){

var obj = typeof newEle=="string"?document.getElementById(newEle):false

}else if(_isClass){

var obj = _class(e)

}else{

return

}

//get class

function _class(c,o){

var oDom = o?o:document,

cParent = oDom.getElementsByTagName("*"),

classAry = [],

leng = cParent.length

for(var i=0i<lengi++){

allC = cParent[i].className

if(allC.match("\\b"+newEle+"(?:$|[^\w\-])")){

classAry.push(cParent[i])

}

return classAry.length==1?classAry[0]:classAry

}

//second argument

var _isArr = obj.constructor==Array

if(!!c){

if(_isArr){

for(var j=0,len=obj.lengthj<lenj++){

var ele = obj[j].getElementsByTagName(c)

obj[j] = ele.length==1?ele[0]:ele

}

}else{

obj = obj.getElementsByTagName(c)

}

return obj.length==1?obj[0]:obj

}

//even

function Roll(){this.initial.apply(this,arguments)}

Roll.prototype = {

initial:function(o,l,r,s){

var _this = this

this.obj = o

this.child = o.children

this.timeId = null

this.interval = null

this.funTime = null

this.set(s||{})

this.oAttr = !!this.s.dir?this.child[0].offsetHeight:this.child[0].offsetWidth

this.dirNo = !!this.s.dir?"top":"left"

l.onclick = function(){_this.prev()_this.s.auto = false}

r.onclick = function(){_this.next()_this.s.auto = false}

o.onmouseover = function(){_this.s.auto = falseclearInterval(_this.funTime)}

this.s.auto&&(this.next(),o.onmouseout = l.onmouseout = r.onmouseout = function(){_this.funTime = setTimeout(function(){_this.s.auto = true_this.next()},500)})

set:function(v){

this.s = {

dir:0,//滚动方向，0为横向滚动，1为纵向滚动

auto:true//是否自动滚动

}

for(c in v){this.s[c] = v[c]}

prev:function(){

this.obj.insertBefore(this.child[this.child.length-1],this.obj.firstChild)

this.obj.style[this.dirNo] = -this.oAttr+"px"

this.moverIt(0)

next:function(){

this.moverIt(-this.oAttr,function(){

var dir = !!this.s.dir?"top":"left"

this.obj.appendChild(this.child[0])

this.obj.style[this.dirNo] = 0

})

moverIt:function(i,callBack){

var _this = this

clearInterval(this.timerId)

clearInterval(_this.funTime)

clearInterval(this.interval)

this.timerId = setInterval(function(){

var dir = !!_this.s.dir?_this.obj.offsetTop:_this.obj.offsetLeft,

iSpeed = (i-dir)/5

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed)

dir==i?(clearInterval(_this.timerId),callBack&&callBack.apply(_this),!!_this.s.auto&&(_this.interval=setTimeout(function(){_this.next()},1500))):_this.obj.style[_this.dirNo] = iSpeed + dir + "px"

},30)

}

//marquee

var menu = _get(".prize-con","ul"),lBun = _get(".l-bun"),rBun = _get(".r-bun")

for(var i=0,leng=menu.lengthi<lengi++){

var mq = new Roll(menu[i],lBun[i],rBun[i],{dir:i%2?1:0}),mq = null//实例化，当板块为偶数的时候像左边滚动，反之向上

}

</script>

</body>

</html>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：简单的HTML+js图片轮播?