漂亮实用的商品对比效果js代码（漂亮实用的商品对比效果js代码怎么写）

本文目录一览：

• 1、JQuery或JS实现商品加入对比的代码
• 2、商品信息对比的js代码应该怎么写？类似于这个网站的http://tech.sina.com.cn/notebook/search.html
• 3、怎么制作网页中图片转换，就是一幅一幅的显示，跟淘宝网的商品展示一样，用到JS代码，代码怎么编写？
• 4、比较购物网站中比较代码如何实现?
• 5、关于js的页面跳转的传值问题

JQuery或JS实现商品加入对比的代码

如果是用cookie记录的话，在显示的页面应该是有个定时器不断的读取cookie然后更新页面的，也就是说cookie的写（更新）操作是要等用户做了某个操作之后触发的，比如添加、删除，而读是在有对比栏呈现的时候（不管是新开页面还是一个弹出层的形式）定时读取然后更新UI即可，总之，纯js实现的话定时器是必须的

商品信息对比的js代码应该怎么写？类似于这个网站的http://tech.sina.com.cn/notebook/search.html

可以创建一个对象，如

function Goods(id,name,other…){

this.id=id,

this.name=name

…….

}

也可以用这种方式添加一个属性

Goods.prototype.id=”

在对比的时候每添加一个对比物品，可以var goods1= new Goods() 一下，然后对goods1的各个属性进行赋值，然后对每个对象进行按着不同的属性进行对比，你可以按着这个思路试试看看

怎么制作网页中图片转换，就是一幅一幅的显示，跟淘宝网的商品展示一样，用到JS代码，代码怎么编写？

你可以存有 X 张图片，名字差不多，（类似于imp1.jpg,imp2.jpg……impX.jpg）

然后通过定时器 定时改变imp标签里的src属性：js如下

var i =1;

funcition setSrc(){

if(i = X){ // 这里X是你 图片的数量

i =1 ;

}

var srcStr = “imp” + i +”jpg”; // 嗯，这里 i 不知道有没有问题，希望没有，

// 有的话，我想楼主也能轻易解决的

document.getElementById(“impId”).src=srcStr; (impId 为imp标签的id属性)

i++;

}

定时器 以下任选一种即可：

setInterval(“setSrc()”,3000);

setTimeout(“setSrc()”,3000); //需要函数触发

//如 放置在 body 的 onload事件里面

希望对你有帮助

比较购物网站中比较代码如何实现?

1.建立一个compare.html内含js脚本，以实现与php程序通信，代码如下：（附：手机对比脚本一例)

html

head

title手机对比功能/title

script language=”JavaScript”

lastScrollY = 0;

function heartBeat() {

diffY = document.body.scrollTop;

percent =.1*(diffY-lastScrollY);

if(percent0) percent = Math.ceil(percent);

else percent = Math.floor(percent);

document.all.float.style.pixelTop+= percent;

lastScrollY = lastScrollY+percent;

}

window.setInterval(“heartBeat()”,1);

/script

script

var strCookies = document.cookie;

// document.write (strCookies);

var cookieName = ‘JsItem’ + “=”;

var cookieName2 = ‘Jscount’ + “=”;

var valueBegin, valueEnd, value;

valueBegin = strCookies.indexOf(cookieName);

// document.write (valueBegin);

var item=[];

var item2=[];

if(valueBegin == -1){

var itemtotal=0;

}else{

valueEnd = strCookies.indexOf(cookieName2);

value = strCookies.substring(valueBegin+cookieName.length,valueEnd-2);

// document.write (value);

var item = value.split(‘,’);

// document.write (value.length);

value = strCookies.substr(valueEnd + cookieName2.length,1);

// document.write (value);

var itemtotal= value;

}

function redraw() {

floatstr = “table height=100% width=100% bgcolor=#000000form method=’get’ action=’/compare2005.php’ name=’compare’ target=’_blank’tr bgcolor=#cc9900tdcenterinput type=’button’ value=’开始对比’ name=’submits’ onclick=’comparecheck();’ style=’cursor:hand;’br”;

i=1;

for(var m=0;mitem.length;m++) {

if(item[m]){

pid = m;

names = item[m];

ft = “font color=red size=1|/fontbrinput type=button name=pid”+i+” value='”+names+”‘ onclick=\”del(‘”+pid+”‘)\” style=’border:1px solid;border-color:red ;background-color:white;height:24;width:120;cursor:hand;color:’black’;’input type=’hidden’ name=’pid”+i+”” value='”+pid+”‘br”;

floatstr = floatstr+ft;

i++;

}

}

floatstr = floatstr + “/center/td/tr/form/table”;

floater.innerHTML = floatstr;

}

function comparecheck() {

mark=0

if(document.compare.pid1) mark++;

if(document.compare.pid2) mark++;

if(document.compare.pid3) mark++;

if(document.compare.pid4) mark++;

if(document.compare.pid5) mark++;

if(mark2) {

alert (‘请至少选择两款机型进行对比!’);

}else {

document.compare.submit();

}

}

function add(pid,names) {

if(!item[pid]) {

if(itemtotal 5) {

itemtotal++;

item[pid] = names;

redraw();

}else {

alert(‘抱歉，最多只能有5款机型进行对比!’);

}

}else {

alert(‘您已经选择了’+names+’!’);

}

}

function del(pid) {

item2=[];

for(key in item) {

if(key!=pid) item2[key]=item[key];

}

item = item2;

itemtotal=itemtotal-1;

redraw();

}

/script

script language=”JavaScript”

function SaveItem(){

if(item.length 0){

var strcookie = ‘JsItem’ + “=” + item ;

document.cookie = strcookie;

var strcookie1 = ‘Jscount’ + “=” + itemtotal;

document.cookie = strcookie1;

}

}

/script

meta http-equiv=”Pragma” content=”no-cache”

meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″

style type=”text/css”

!–

body{font-size=9pt}

TH{FONT-SIZE: 9pt}

TD{ FONT-SIZE: 9pt}

#floater {

position: absolute;

right: 0px;

top: 600;

width: 125;

visibility: visible;

z-index: 10;

left: 5px;

}

—

/style

/head

body onLoad=”redraw();” onUnload=”SaveItem();”

script LANGUAGE=”JavaScript”

self.onError=null;

currentX = currentY = 0;

whichIt = null;

lastScrollX = 0; lastScrollY = 0;

NS = (document.layers) ? 1 : 0;

IE = (document.all) ? 1: 0;

!– STALKER CODE —

function heartBeat() {

if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }

if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }

if(diffY != lastScrollY) {

percent = .1 * (diffY – lastScrollY);

if(percent 0) percent = Math.ceil(percent);

else percent = Math.floor(percent);

if(IE) document.all.floater.style.pixelTop += percent;

if(NS) document.floater.top += percent;

lastScrollY = lastScrollY + percent;

}

if(diffX != lastScrollX) {

percent = .1 * (diffX – lastScrollX);

if(percent 0) percent = Math.ceil(percent);

else percent = Math.floor(percent);

if(IE) document.all.floater.style.pixelLeft += percent;

if(NS) document.floater.left += percent;

lastScrollX = lastScrollX + percent;

}

}

!– /STALKER CODE —

!– DRAG DROP CODE —

function checkFocus(x,y) {

stalkerx = document.floater.pageX;

stalkery = document.floater.pageY;

stalkerwidth = document.floater.clip.width;

stalkerheight = document.floater.clip.height;

if( (x stalkerx x (stalkerx+stalkerwidth)) (y stalkery y (stalkery+stalkerheight))) return true;

else return false;

}

function grabIt(e) {

if(IE) {

whichIt = event.srcElement;

while (whichIt.id.indexOf(“floater”) == -1) {

whichIt = whichIt.parentElement;

if (whichIt == null) { return true; }

}

whichIt.style.pixelLeft = whichIt.offsetLeft;

whichIt.style.pixelTop = whichIt.offsetTop;

currentX = (event.clientX + document.body.scrollLeft);

currentY = (event.clientY + document.body.scrollTop);

} else {

window.captureEvents(Event.MOUSEMOVE);

if(checkFocus (e.pageX,e.pageY)) {

whichIt = document.floater;

StalkerTouchedX = e.pageX-document.floater.pageX;

StalkerTouchedY = e.pageY-document.floater.pageY;

}

}

return true;

}

function moveIt(e) {

if (whichIt == null) { return false; }

if(IE) {

newX = (event.clientX + document.body.scrollLeft);

newY = (event.clientY + document.body.scrollTop);

distanceX = (newX – currentX); distanceY = (newY – currentY);

currentX = newX; currentY = newY;

whichIt.style.pixelLeft += distanceX;

whichIt.style.pixelTop += distanceY;

if(whichIt.style.pixelTop document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop;

if(whichIt.style.pixelLeft document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft;

if(whichIt.style.pixelLeft document.body.offsetWidth – document.body.scrollLeft – whichIt.style.pixelWidth – 20) whichIt.style.pixelLeft = document.body.offsetWidth – whichIt.style.pixelWidth – 20;

if(whichIt.style.pixelTop document.body.offsetHeight + document.body.scrollTop – whichIt.style.pixelHeight – 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop – whichIt.style.pixelHeight – 5;

event.returnValue = false;

} else {

whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);

if(whichIt.left 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;

if(whichIt.top 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;

if( (whichIt.left + whichIt.clip.width) = (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;

if( (whichIt.top + whichIt.clip.height) = (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;

return false;

}

return false;

}

function dropIt() {

whichIt = null;

if(NS) window.releaseEvents (Event.MOUSEMOVE);

return true;

}

!– DRAG DROP CODE —

if(NS) {

window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);

window.onmousedown = grabIt;

window.onmousemove = moveIt;

window.onmouseup = dropIt;

}

if(IE) {

document.onmousedown = grabIt;

document.onmousemove = moveIt;

document.onmouseup = dropIt;

}

if(NS || IE) action = window.setInterval(“heartBeat()”,1);

/script

div id=’floater’ style=’position:absolute;right:1px;top:51px;filter:alpha(opacity=70);z-index:99;width:140;’ align=center

form method=’get’ action=’/compare2005.php’ name=’compare’ target=’_blank’

table height=100% width=100% bgcolor=#000000tr bgcolor=#cc9900tdcenterinput type=’button’ value=’开始对比’ name=’submits’ onclick=’comparecheck();’ style=’cursor:hand;’br

/td/tr/form/table

/div

table width=”768″ border=”1″ align=”center” cellpadding=”2″ cellspacing=”0″ bordercolorlight=”#cccccc” bordercolordark=”#ffffff”

tbody

tr align=”center” bgcolor=”#E0E0E0″

td手机型号/td

td网络类型/td

td上市日期/td

td网店价格/td

td手机论坛/td

td对比功能/td

/tr

tr align=”center”

td height=”25″a href=”/product/1859.html” target=”_blank”三星 SGH-X138/a/td

tdGSM900/1800MHz/GPRS/tdtd05年05月/td

tda href=”/price2005.php?cid=7pid=1859″ target=”_blank”font color=red￥1350/font/a/tdtda href=”” target=”_blank”手机论坛/a/td

tdinput style=”BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid” onclick=”add(‘1859′,’ SGH-X138′);” type=button value=对比篮 //td

/tr

/trtr align=”center”td height=”25″a href=”/product/1817.html” target=”_blank”三星 SCH-M309/a/tdtdCDMA 1X/tdtd05年03月/tdtda href=”/price2005.php?cid=7pid=1817″ target=”_blank”font color=red￥4800 – ￥6875/font/a/tdtda href=”” target=”_blank”手机论坛/a/tdtdinput style=”BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid” onclick=”add(‘1817′,’ SCH-M309′);” type=button value=对比篮 //td/trtr align=”center”td height=”25″a href=”/product/1821.html” target=”_blank”三星 SGH-E618/a/tdtdGSM900/1800/1900MHz/GPRS/tdtd05年02月/tdtda href=”/price2005.php?cid=7pid=1821″ target=”_blank”font color=red￥2920 – ￥3980/font/a/tdtda href=”” target=”_blank”手机论坛/a/tdtdinput style=”BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid” onclick=”add(‘1821′,’ SGH-E618′);” type=button value=对比篮 //td/trtr align=”center”td height=”25″a href=”/product/1735.html” target=”_blank”三星 SCH-M339/a/tdtdCDMA 1X/tdtd05年02月/tdtda href=”/price2005.php?cid=7pid=1735″ target=”_blank”font color=red￥7399 – ￥8660/font/a/tdtda href=”” target=”_blank”手机论坛/a/tdtdinput style=”BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid” onclick=”add(‘1735′,’ SCH-M339′);” type=button value=对比篮/td/tr

/table

/body

/html

2.建立一个MySQL的数据库及对比商品的数据表，使用php与js通信得到的参数为准，从MySQL取库，显示到页面即可！

3.说简单其实很简单，思路就是这样！你可以看看《手机之家》的对比栏功能，就大概知道一些了！

记得给分啊！

关于js的页面跳转的传值问题

打不开你所说的网页，不知道具体情况。但js传值，无非是两种情况。一种是用GET或POST的方法把值送给服务器，然后在服务器处理后返回新的页面。另一种是用Cookie保存在本地，下一个页面读取上一个页面留下的Cookie。前者一般用于关键性的数据，后者用于辅助性的数据。