html中点击缩略图显示不同的图片有没有demo代码量越少越好？_随笔

请把下面段代码保存为test.html，跟s1.jpg, s2.jpg, s3.jpg和b1.jpg, b2.jpg, b3.jpg六张图片放在一起，应该就可以实现点击小图片，显示大图片。希望对你有用。

<html>

<body>

var Simgs = ["s1.jpg", "s2.jpg", "s3.jpg"]

var Bimgs = ['b1.jpg', 'b2.jpg', 'b3.jpg']

for(x in Simgs)

{document.write("<img id="+Bimgs[x]+" src="+Simgs[x]+" onclick=showbig(this.id) />")}

function showbig(sid){ document.getElementById("showbig").src=sid}

</script>

</body>

</html>

①首先，需要有这么个"图标主体"库

②其次，把这个"图标字体"库,引入html页面(是图标字体库对应的css引入html)

③最后，使用"图标字体"库

具体 *** 作：

制作"图标字体"：

①这里以http://www.iconfont.cn为例子，来制作:

首先，打开网址后，页面右侧有登录按钮，先进行登录 *** 作(后面会说明外面为什么选择登录，也可以不登录。但我还是建议登录。)

②制作图标，这个制作的图标是要svg格式的可以找自己公司的设计师去设计，也可以在里面的图标库搜索自己需要的图标的名称，比如"首页，分类"等。

③ 点击自己选择的首页和分类，它会在这个位置出现：

④然后点击下载到本地，就自动下载一个叫"iconfont.zip"的压缩包。这个就是图标字体库。解压这个压缩包可以发现有这些文件：

1部分是指图标内容，可以忽略，但不能删除

2部分是指图标css，不能删除

3部分是使用图标的示例dome，可以删除(建议保留)

⑤使用图标：

打开dome.html,在浏览器中可以看到，相关的下载的图标，以及如何使用。这里可以我提一下，使用图标有2中方式，1是以内容的形式使用，2是以css 的形式使用：

图片滚动代码 (从右向左滚动)

</marquee>

图片滚动代码 (从下往上滚动)

把图片的连接地址写在这里

</marquee>

1.direction属性:决定文本的滚动方向，分为向左left和向右right，up和down默认状态向左。

<marquee direction=left>从右向左滚动</marquee>

<marquee direction=right>从左向右滚动</marquee>

2.behavior属性:指定文本的滚动方式，分为三种:

Scroll:从一端消失后，在另一端出现并继续滚动。

<marquee behavior=scroll>一圈一圈地滚动</marquee>

Slide:从一端滚动，接触到另一端后停止

<marquee behaviro=slide>只滚动一次就停止</marquee>

Alternate:从一端滚动到另一端后，反向滚动。

direction=up（left、right、down）这个属性可以更改，这样就可以实现上下左右了但是.我建议用一种无缝的文字滚动.这样的效果会比较好看.而用marquee就没那么好了方法代码先介绍一下它的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。

先了解一下对象的几个的属性：

innerHTML:设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

向上滚动的代码：

var speed=30

demo2.innerHTML=demo1.innerHTML//克隆demo1为demo2

function Marquee(){

if(demo2.offsetHeight-demo.scrollTop<=0)//当滚动至demo1与demo2交界时

demo.scrollTop-=demo1.offsetHeight//demo跳到最顶端

else{

demo.scrollTop++

}

var MyMar=setInterval(Marquee,speed)//设置定时器

demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器

</script>

向下滚动：

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo.scrollTop<=0)

demo.scrollTop+=demo2.offsetHeight

else{

demo.scrollTop--

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

向左滚动：

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

向右滚动：

var speed=30

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo.scrollLeft<=0)

demo.scrollLeft+=demo2.offsetWidth

else{

demo.scrollLeft--

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6130762.html

html中点击缩略图显示不同的图片有没有demo代码量越少越好？

发表评论

评论列表（0条）