利用js动态生成一个简单的商品详情页

JavaScript019

利用js动态生成一个简单的商品详情页,第1张

使用jquery： var $div=$('')var content="动态创建的内容"$div.html(content) //会替换所有子元素或文本节点使用javascript：var div = document.createElement('div')var content = document.createTextNode("动态创建的内容")div.appendChild(content)

你这段代码是商品放大镜的代码设置，一般我们都会把这个代码写到goods_gallery.lbi库文件里面，然后在商品详情页面引用这个库文件，下面代码是库文件里面内容

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">

<!-- {if $pictures}-->

<div class="clearfix" style="padding:5px">

<div class="goods_gallery">

<div id="demo" >

<ul id="proSmallPic" class="slide-li slide-txt" onmouseover="moveLeft()" onmousedown="clickLeft()" onmouseup="moveLeft()" onmouseout="scrollStop()" style="width:320px ">

<!-- {foreach from=$pictures item=picture name=no key=key}-->

<li class="">

<a href="{$picture.img_url}" rev={$picture.img_url} rel=goodsPic>

<img src="{$picture.img_url}" alt="{$goods.goods_name}" height="49" width="49">

</a>

</li>

<!--{/foreach}-->

</ul>

</div>

<div id="demo2" style="display:inlineoverflow:visible"></div>

</div>

<script>

function $gg(id){

return (document.getElementById) ? document.getElementById(id): document.all[id]

}

var boxwidth=62//跟图片的实际尺寸相符

var box=$gg("demo")

var obox=$gg("demo1")

var dulbox=$gg("demo2")

obox.style.width=obox.getElementsByTagName("li").length*boxwidth+'px'

dulbox.style.width=obox.getElementsByTagName("li").length*boxwidth+'px'

box.style.width=obox.getElementsByTagName("li").length*boxwidth*5+'px'

var canroll = false

if (obox.getElementsByTagName("li").length >= 5) {

canroll = true

dulbox.innerHTML=obox.innerHTML

}

var step=5temp=1speed=50

var awidth=obox.offsetWidth

var mData=0

var isStop = 1

var dir = 1

function s(){

if (!canroll) return

if (dir) {

if((awidth+mData)>=0)

{

mData=mData-step

}

else

{

mData=-step

}

} else {

if(mData>=0)

{

mData=-awidth

}

else

{

mData+=step

}

}

obox.style.marginLeft=mData+"px"

if (isStop) return

setTimeout(s,speed)

}

function moveLeft() {

var wasStop = isStop

dir = 1

speed = 50

isStop=0

if (wasStop) {

setTimeout(s,speed)

}

}

function moveRight() {

var wasStop = isStop

dir = 0

speed = 50

isStop=0

if (wasStop) {

setTimeout(s,speed)

}

}

function scrollStop() {

isStop=1

}

function clickLeft() {

var wasStop = isStop

dir = 1

speed = 25

isStop=0

if (wasStop) {

setTimeout(s,speed)

}

}

function clickRight() {

var wasStop = isStop

dir = 0

speed = 25

isStop=0

if (wasStop) {

setTimeout(s,speed)

}

}

</script>

</div>

<!-- {/if}-->

然后在商品详情页面，引用mz-packed.js，script.js和scrollpic.js，再引用greybox.css即可。以下4个JS与CSS都是通用的，你可以去别的模板里面找一下