如下图，怎么用CSS+JS实现这样的显示图片效果。请高手解答。

2023-04-15 23:12:02JavaScript058

如下图，怎么用CSS+JS实现这样的显示图片效果。请高手解答。,第1张

[HTML部分]

<span class="txt_1">横向的JS相册效果</span>

</div>

</div>

[CSS部分]

body {background:#000margin:0font:12px Verdanatext-align:center}

#tbody {width:650pxmargin:20px autotext-align:left}

#mainbody {width:640pxmargin:5pxborder:1px solid #222padding:1px}

#mainphoto {cursor:pointerdisplay:block}

#goleft {float:leftclear:leftmargin:6px 5px 0 3px}

#goright {float:rightclear:rightmargin:6px 3px 0 5px}

#photos {width:610pxheight:54pxline-height:54pxborder:1px solid #222margin:10px 0overflow:hidden}

#showArea img {display:blockfloat:leftmargin:1px 0cursor:pointerborder:1px solid #222}.txt_1 {font:bold 24px Verdana, Tahomacolor:#fff}

[JS部分]

var browse = window.navigator.appName.toLowerCase()

var MyMar

var speed = 1//速度，越大越慢

var spec = 1//每次滚动的间距, 越大滚动越快

var minOpa = 90//滤镜最小值

var maxOpa = 100//滤镜最大值

var spa = 2//缩略图区域补充数值

var w = 0

spec = (browse.indexOf("microsoft") >-1) ? spec : ((browse.indexOf("opera") >-1) ? spec*10 : spec*20)

function $(e) {return document.getElementById(e)}

function goleft() {$('photos').scrollLeft -= spec}

function goright() {$('photos').scrollLeft += spec}

function setOpacity(e, n) {

if (browse.indexOf("microsoft") >-1) e.style.filter = 'alpha(opacity=' + n + ')'

else e.style.opacity = n/100

}

$('goleft').style.cursor = 'pointer'

$('goright').style.cursor = 'pointer'

$('mainphoto').onmouseover = function() {setOpacity(this, maxOpa)}

$('mainphoto').onmouseout = function() {setOpacity(this, minOpa)}

$('mainphoto').onclick = function() {location = this.getAttribute('name')}

$('goleft').onmouseover = function() {this.src = 'images/goleft2.gif'MyMar=setInterval(goleft, speed)}

$('goleft').onmouseout = function() {this.src = 'images/goleft.gif'clearInterval(MyMar)}

$('goright').onmouseover = function() {this.src = 'images/goright2.gif'MyMar=setInterval(goright,speed)}

$('goright').onmouseout = function() {this.src = 'images/goright.gif'clearInterval(MyMar)}

window.onload = function() {

setOpacity($('mainphoto'), minOpa)

var rHtml = ''

var p = $('showArea').getElementsByTagName('img')

for (var i=0i<p.lengthi++) {

w += parseInt(p[i].getAttribute('width')) + spa

setOpacity(p[i], minOpa)

p[i].onclick = function() {location = this.getAttribute('name')}

p[i].onmouseover = function() {

setOpacity(this, maxOpa)

$('mainphoto').src = this.getAttribute('rel')

$('mainphoto').setAttribute('name', this.getAttribute('name'))

setOpacity($('mainphoto'), maxOpa)

}

p[i].onmouseout = function() {

setOpacity(this, minOpa)

setOpacity($('mainphoto'), minOpa)

}

rHtml += '<img src="' + p[i].getAttribute('rel') + '" width="0" height="0" alt="" />'

}

$('showArea').style.width = parseInt(w) + 'px'

var rLoad = document.createElement("div")

$('photos').appendChild(rLoad)

rLoad.style.width = "1px"

rLoad.style.height = "1px"

rLoad.style.overflow = "hidden"

rLoad.innerHTML = rHtml

}

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery实现的点击图片放大且在当前页面查看原图丨芯晴网页特效丨CsrCode.Cn</title>

div, ul, li {

margin: 0px

padding: 0px

list-style-type: none

}

#Over {

position: absolute

width: 100%

z-index: 100

left: 0px

top: 0px

}

.img {

width:90%

background-color: #FFF

height: 90%

padding: 3px

border-top-width: 1px

border-right-width: 1px

border-bottom-width: 1px

border-left-width: 1px

border-top-style: solid

border-right-style: solid

border-bottom-style: solid

border-left-style: solid

}

.content {

text-align: center

width: 200px

height:150px

margin-right: auto

margin-left: auto

}

.EnlargePhoto {

cursor: pointer

}

.TempContainer {

position: absolute

z-index: 101

margin-right: 0px

margin-left: 0px

text-align: center

width: 100%

cursor: pointer

}

</style>

</head>

$(document).ready(function(e) {

var ImgsTObj = $('.EnlargePhoto')//class=EnlargePhoto的都是需要放大的图像

if(ImgsTObj){

$.each(ImgsTObj,function(){

$(this).click(function(){

var currImg = $(this)

CoverLayer(1)

var TempContainer = $('<div class=TempContainer></div>')

with(TempContainer){

appendTo("body")

css('top',currImg.offset().top)

html('<img border=0 src=' + currImg.attr('src') + '>')

}

TempContainer.click(function(){

$(this).remove()

CoverLayer(0)

})

}

else{

return false

}

//====== 使用/禁用蒙层效果 ========

function CoverLayer(tag){

with($('#Over')){

if(tag==1){

css('height',$(document).height())

css('display','block')

css('opacity',0.9)

css("background-color","#000")

}

else{

css('display','none')

}

})

</script>

<body>

</div>

</body>

</html>

<br>第一次运行本代码，请刷新一下本页面先~~<br>所需js文件：<a href="/images/jquery-1.6.2.min.js" target=_blank>jquery-1.6.2.min.js</a><br><hr><p align="center"><font color=black>本特效由 <a href="http://www.CsrCode.cn" target="_blank">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者</font></p>

我修改测试通过一个。但是有个问题。若改成鼠标悬停边缘滚下去，也就是onMouseOver。是停不下来的，会一直滚下去，因为无论怎么样都是鼠标碰触事件。所以我强烈建议用点击事件,onclick。

js css image都是调用的。我都写到页面里了，你自己改下。图片地址我没改。本地测试的。自己换成你的图片。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>图片展示特效</title>

<style>

body{ margin:20px autowidth:100%height:auto}

#dHomePageCarousel {

height:221px

width:670px

position:relative

margin:40px auto

}

#dLocalHomesCarousel {

height:131px

margin:0px 2px 3px 1px

overflow:hidden

position:relative

}

.divCarouselInfo {

color:#3C404E

font-size:12px

width:639px

height:64px

line-height:16px

margin-right:15px

padding-top:10px

position:relative

}

.imgBorder{

border:2px solid #fff

position:absolute

cursor:pointer

}

.imgBorder:hover {

border:2px solid #FFAA55

cursor:pointer

position:absolute

}

.btnCarouselLT {

background:url("../images/btn_nav_carousel.png") no-repeat scroll left top transparent

display:block

height:41px

overflow:hidden

position:absolute

cursor:pointer

top:17px

width:40px

}

.btnCarouselRT {

background:url("../images/btn_nav_carousel.png") no-repeat scroll right top transparent

display:block

height:41px

overflow:hidden

position:absolute

cursor:pointer

top:17px

width:40px

}

img {

border:medium none

}

.author{ width:700pxmargin:0 autoheight:autotext-align:center}

</style>

</head>

</div>

function AdItem(Photo,url) {

this.Photo = Photo

this.url = url

}

var ad = new Array()

ad[0] = new AdItem('images/1.jpg','#')ad[1] = new AdItem('images/2.jpg','#')ad[2] = new AdItem('images/3.jpg','#')ad[3] = new AdItem('images/4.jpg','#')ad[4] = new AdItem('images/5.jpg','#')ad[5] = new AdItem('images/6.jpg','#')

var img = new Array()

img[0] = document.getElementById("imgSmallLeft")

img[1] = document.getElementById("imgMiddleLeft")

img[2] = document.getElementById("imgBig")

img[3] = document.getElementById("imgMiddleRight")

img[4] = document.getElementById("imgSmallRight")

img[5] = document.getElementById("imgHidden")

var position = 0

for(i=0i<img.lengthi++){

img[i].src = ad[i].Photo

}

var cur = 2

adname.href = ad[2].url

</script>

</div>

function roll(direction){

var imgLength = img.length

var dataLength = ad.length

var start = position

if('r' == direction){

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

start = start + 1

if(start >(dataLength-1))

start = start - dataLength

img[i].src = ad[start].Photo

}

position = position + 1

if(position >(dataLength-1))

position = position - dataLength

}

if('l' == direction){

var a = true

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

if(a){

start = start - 1

if(start <0){

start = start + dataLength

a = false

}

if(start <(dataLength-1)){

a = false

}

}else{

start = start + 1

if(start >(dataLength-1)){

start = start - dataLength

a = true

}

//alert(position + " === " + i + " === " + start)

img[i].src = ad[start].Photo

if(start == (dataLength-1)){

start = -1

}

position = position - 1

if(position <0)

position = position + dataLength

}

function right(){

i++

var img0H = parseFloat(img[0].style.height)

var img0W = parseFloat(img[0].style.width)

var img0L = parseFloat(img[0].style.left)

var img1H = parseFloat(img[1].style.height)

var img1W = parseFloat(img[1].style.width)

var img1L = parseFloat(img[1].style.left)

var img2H = parseFloat(img[2].style.height)

var img2W = parseFloat(img[2].style.width)

var img2L = parseFloat(img[2].style.left)

var img3H = parseFloat(img[3].style.height)

var img3W = parseFloat(img[3].style.width)

var img3L = parseFloat(img[3].style.left)

var img4H = parseFloat(img[4].style.height)

var img4W = parseFloat(img[4].style.width)

var img4L = parseFloat(img[4].style.left)

var img5H = parseFloat(img[5].style.height)

var img5W = parseFloat(img[5].style.width)

var img5L = parseFloat(img[5].style.left)

//解决IE兼容性问题

if(navigator.userAgent.indexOf("MSIE")>0 &&i%2==0) {

img1W = img1W + 1

img2H = img2H + 1

img2L = img2L + 1

img3H = img3H + 1

img3L = img3L + 1

img4L = img4L + 1

img4W = img4W + 1

}

img[0].style.height = (img0H - 2).toString() + "px"

img[0].style.left = (img0L - 5).toString() + "px"

img[0].style.width = (img0W - 3).toString() + "px"

img[1].style.height = (img1H - 1).toString() + "px"

img[1].style.left = (img1L - 5).toString() + "px"

img[1].style.width = (img1W - 1.5).toString() + "px"

img[2].style.height = (img2H - 1.5).toString() + "px"

img[2].style.left = (img2L - 6.5).toString() + "px"

img[2].style.width = (img2W - 2).toString() + "px"

img[3].style.height = (img3H + 1.5).toString() + "px"

img[3].style.left = (img3L - 8.5).toString() + "px"

img[3].style.width = (img3W + 2).toString() + "px"

img[4].style.height = (img4H + 1).toString() + "px"

img[4].style.left = (img4L - 6.5).toString() + "px"

img[4].style.width = (img4W + 1.5).toString() + "px"

img[5].style.height = (img5H + 2).toString() + "px"

img[5].style.left = (img5L - 5).toString() + "px"

img[5].style.width = (img5W + 3).toString() + "px"

//alert(img[1].style.width)

if(i>19){

clearInterval(hide)

reset()

roll('r')

isRunning = 'false'

}

function left(){

i++

var img0H = parseFloat(img[0].style.height)

var img0W = parseFloat(img[0].style.width)

var img0L = parseFloat(img[0].style.left)

var img1H = parseFloat(img[1].style.height)

var img1W = parseFloat(img[1].style.width)

var img1L = parseFloat(img[1].style.left)

var img2H = parseFloat(img[2].style.height)

var img2W = parseFloat(img[2].style.width)

var img2L = parseFloat(img[2].style.left)

var img3H = parseFloat(img[3].style.height)

var img3W = parseFloat(img[3].style.width)

var img3L = parseFloat(img[3].style.left)

var img4H = parseFloat(img[4].style.height)

var img4W = parseFloat(img[4].style.width)

var img4L = parseFloat(img[4].style.left)

var img5H = parseFloat(img[5].style.height)

var img5W = parseFloat(img[5].style.width)

var img5L = parseFloat(img[5].style.left)

//解决IE兼容性问题

if(navigator.userAgent.indexOf("MSIE")>0 &&i%2==0) {

img0W = img0W + 1

img1H = img1H + 1

img1L = img1L + 1

img2H = img2H + 1

img2L = img2L + 1

img3L = img3L + 1

img3W = img3W + 1

}

img[0].style.height = (img0H + 1).toString() + "px"

img[0].style.left = (img0L + 5).toString() + "px"

img[0].style.width = (img0W + 1.5).toString() + "px"

img[1].style.height = (img1H + 1.5).toString() + "px"

img[1].style.left = (img1L + 6.5).toString() + "px"

img[1].style.width = (img1W + 2).toString() + "px"

img[2].style.height = (img2H - 1.5).toString() + "px"

img[2].style.left = (img2L + 8.5).toString() + "px"

img[2].style.width = (img2W - 2).toString() + "px"

img[3].style.height = (img3H - 1).toString() + "px"

img[3].style.left = (img3L + 6.5).toString() + "px"

img[3].style.width = (img3W - 1.5).toString() + "px"

img[4].style.height = (img4H - 2).toString() + "px"

img[4].style.left = (img4L + 5).toString() + "px"

img[4].style.width = (img4W - 3).toString() + "px"

img[5].style.height = (img5H + 2).toString() + "px"

img[5].style.left = (img5L + 5).toString() + "px"

img[5].style.width = (img5W + 3).toString() + "px"

//alert(img[1].style.left)

if(i>19){

clearInterval(hide)

reset()

roll('l')

isRunning = 'false'

}

var isRunning

function move(direction){

//alert(isRunning)

if(isRunning != 'udefined' &&isRunning == 'true')

return

frequency = 20

if(navigator.userAgent.indexOf("MSIE")>0) {

frequency = 15

}

if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){

frequency = 20

}

i = 0

if(direction == 'r'){

cur = cur + 1

img[5].style.left = "640px"

hide = setInterval("right()", frequency)

isRunning = 'true'

}

if(direction == 'l'){

cur = cur - 1

img[5].style.left = "-90px"

var pos = position - 1

if(pos <0)

pos = pos + ad.length

img[5].src = ad[pos].Photo

hide = setInterval("left()", frequency)

isRunning = 'true'

}

if(cur >(ad.length - 1))

cur = 0

if(cur <0)

cur = ad.length - 1

//alert(cur)

adname.href = ad[cur].url

if(navigator.userAgent.indexOf("Firefox")>0){

adname.textContent = ad[cur].name

adtel.textContent = ad[cur].phone

adaddr.textContent = ad[cur].address

adprice.textContent = ad[cur].price

adtime.textContent = ad[cur].time

} else {

adname.innerText = ad[cur].name

adtel.innerText = ad[cur].phone

adaddr.innerText = ad[cur].address

adprice.innerText = ad[cur].price

adtime.innerText = ad[cur].time

}

function moveC(direction){

if(isRunning != 'true'){

move(direction)

clearInterval(movec)

}

function moveD(direction){

move(direction)

if('r' == direction){

movec = setInterval("moveC('r')",5)

} else {

movec = setInterval("moveC('l')",5)

}

function reset(){

img[0].style.width = "70px"

img[0].style.height = "50px"

img[0].style.left = "10px"

img[1].style.width = "100px"

img[1].style.height = "75px"

img[1].style.left = "110px"

img[2].style.width = "140px"

img[2].style.height = "105px"

img[2].style.left = "240px"

img[3].style.width = "100px"

img[3].style.height = "75px"

img[3].style.left = "410px"

img[4].style.width = "70px"

img[4].style.height = "50px"

img[4].style.left = "540px"

img[5].style.width = "10px"

img[5].style.height = "10px"

img[5].style.left = "-90px"

}

autoplay = setInterval("move('r')",2000)

function openNewPage(){

window.open(ad[cur].url)

}

</script>

</body>

</html>

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

# 上一篇：新建吾悦广场有哪些服装品牌

# 下一篇：css图片慢慢出现效果

推荐阅读

热门文章

最新发布

标签列表

如下图，怎么用CSS+JS实现这样的显示图片效果。请高手解答。

给您推荐相同类型的内容：