横向的JS相册效果

最新推荐文章于 2024-03-22 13:25:22 发布
最新推荐文章于 2024-03-22 13:25:22 发布
阅读量281 收藏
点赞数
分类专栏： 编程语言 文章标签： 相册 function microsoft xhtml div javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/moandyang/article/details/7344494
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="数字图腾" />
<title>横向的JS相册效果</title>
<style>
body {background:#000;margin:0;font:12px Verdana;text-align:center;}
#tbody {width:650px;margin:20px auto;text-align:left;}
#mainbody {width:640px;margin:5px;border:1px solid #222;padding:1px}
#mainphoto {cursor:pointer;display:block;}
#goleft {float:left;clear:left;margin:6px 5px 0 3px;}
#goright {float:right;clear:right;margin:6px 3px 0 5px;}
#photos {width:610px;height:54px;line-height:54px;border:1px solid #222;margin:10px 0;overflow:hidden;}
#showArea img {display:block;float:left;margin:1px 0;cursor:pointer;border:1px solid #222}
.txt_1 {font:bold 24px Verdana, Tahoma;color:#fff;}
</style>
</head>
<body>
<div id="tbody"><span class="txt_1">横向的JS相册效果</span>
    <div id="mainbody">
      <img src=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="数字图腾" width="640" height="400" id="mainphoto" rel=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name=" http://www.makewing.com" />
    </div>
    <img src=" http://download.makewing.com/lanren/code/jsphotobook/images/goleft.gif" width="11" height="56" id="goleft" />
    <img src=" http://download.makewing.com/lanren/code/jsphotobook/images/goright.gif" width="11" height="56" id="goright" />
    <div id="photos">
      <div id="showArea">
        <!--
          SRC: 缩略图地址
          REL: 大图地址
          NAME: 网址
        -->
        <img src=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="数字图腾" width="80" height="50" rel=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name=" http://www.makewing.com" />
        <img src=" http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="数字图腾" width="80" height="50" rel=" http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" name=" http://www.makewing.com" />
        <img src=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="数字图腾" width="80" height="50" rel=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name=" http://www.makewing.com" />
        <img src=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="数字图腾" width="80" height="50" rel=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name=" http://www.makewing.com" />
        <img src=" http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="数字图腾" width="80" height="50" rel=" http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" name=" http://www.makewing.com" />
        <img src=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="数字图腾" width="80" height="50" rel=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name=" http://www.makewing.com" />
        <img src=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="数字图腾" width="80" height="50" rel=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name=" http://www.makewing.com" />
        <img src=" http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="数字图腾" width="80" height="50" rel=" http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" name=" http://www.makewing.com" />
        <img src=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="数字图腾" width="80" height="50" rel=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name=" http://www.makewing.com" />
        <img src=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="数字图腾" width="80" height="50" rel=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name=" http://www.makewing.com" />
        <img src=" http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="数字图腾" width="80" height="50" rel=" http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" name=" http://www.makewing.com" />
        <img src=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="数字图腾" width="80" height="50" rel=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name=" http://www.makewing.com" />
        <img src=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="数字图腾" width="80" height="50" rel=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name=" http://www.makewing.com" />
        <img src=" http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" alt="数字图腾" width="80" height="50" rel=" http://download.makewing.com/lanren/code/jsphotobook/images/02.jpg" name=" http://www.makewing.com" />
        <img src=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" alt="数字图腾" width="80" height="50" rel=" http://download.makewing.com/lanren/code/jsphotobook/images/01.jpg" name=" http://www.makewing.com" />
      </div>
    </div>
</div>
</body>
</html>
<script language="javascript" type="text/javascript">
var browse = window.navigator.appName.toLowerCase();
var MyMar;
var speed = 1; //速度，越大越慢
var spec = 1; //每次滚动的间距, 越大滚动越快
var minOpa = 50; //滤镜最小值
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 = 'http://download.makewing.com/lanren/code/jsphotobook/images/goleft2.gif'; MyMar=setInterval(goleft, speed);}
$('goleft').onmouseout = function() {this.src = 'http://download.makewing.com/lanren/code/jsphotobook/images/goleft.gif'; clearInterval(MyMar);}
$('goright').onmouseover = function() {this.src = 'http://download.makewing.com/lanren/code/jsphotobook/images/goright2.gif'; MyMar=setInterval(goright,speed);}
$('goright').onmouseout = function() {this.src = 'http://download.makewing.com/lanren/code/jsphotobook/images/goright.gif'; clearInterval(MyMar);}
window.onload = function() {
    setOpacity($('mainphoto'), minOpa);
    var rHtml = '';
    var p = $('showArea').getElementsByTagName('img');
    for (var i=0; i<p.length; i++) {
        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>
mgl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS特效：水平图片滚动
08-10 156
<style type="text/css">.blk_29 {PADDING-RIGHT: 0px;PADDING-LEFT: 0px;PADDING-BOTTOM: 10px;OVERFLOW: hidden;PADDING-TOP: 10px;ZOOM: 1;POSITION: relative}.blk_29 .LeftBotton { BACKGROU...
横向及纵向的JS相册效果
weixin_30914981的博客
10-12 120
横向的JS相册效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&gt...
纯JS实现图片的横向（竖向）滚动
wzy88123的博客
03-03 1457
纯JS实现图片的横向（竖向）滚动
JavaScript处理移动端拍摄图片旋转问题
LonewoIf的博客
11-14 598
引入exif-js <script src="https://cdn.jsdelivr.net/npm/exif-js@2.3.0/exif.min.js"></script> /** * 处理图片文件（处理移动端拍摄图片旋转问题） * fileObj.file 图片文件独享 * fileObj.resolution 在指定图片格式为 image/jpeg 或 im...
横向的js相册效果
03-21
下面我们将详细探讨如何创建一个横向JS相册效果，以及涉及的主要技术点。 首先，我们需要准备的基本元素包括HTML结构、CSS样式和JavaScript代码。在`index.html`文件中，我们会设置一个包含多个图片的容器，每个...
横向的JS相册效果.rar
06-29
通过以上技术，我们可以构建出一个功能完备且用户友好的横向JS相册效果。实际开发时，可能还会涉及其他前端库或框架，如jQuery、React或Vue，它们能提供更丰富的功能和更简洁的语法，帮助开发者快速实现这一效果。...
JS横向弹性相册特效代码
03-20
综上所述，"JS横向弹性相册特效代码"涉及到JavaScript基础、DOM操作、CSS3动画、事件处理、动画函数、响应式设计以及代码优化等多个技术层面。通过学习和实践这样的项目，开发者可以提升自己在前端开发中的综合技能...
js特效脚本含源码和说明横向的JS相册效果
最新发布
03-31
js特效脚本含源码和说明横向的JS相册效果本资源系百度网盘分享地址
JS相册（很炫的效果）
06-19
一个很漂亮的JS相册，老外写的！
js实现手机相册效果,触摸切换图片特效源代码
06-04
js实现手机相册效果,触摸切换图片特效源代码
js相册效果
11-09
Js 相册，用js写的相册效果的页面；欢迎来搞
js实现相册功能（横向滚动）
09-16
类似相册的浏览功能，找了好久！才找到的，提供给大家啦！
几种js相册特效集合
02-19
js写的几种相册代码 很帅的 功能强大 表现形式好 兼容ie FF等主流浏览器
js实现图片横向滚动
wang1253的博客
04-03 4884
&lt;!doctype html&gt;&lt;html lang="en"&gt;    &lt;head&gt;        &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;                    &lt;meta name="keywords
用JS制作炫酷的化学周期表
weixin_45647046的博客
09-08 668
炫酷的化学周期表 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>炫酷的化学元素周期表</title> <sty
Three.js基础入门介绍——【毕业季】Three.js动态相册
I_loveCong的博客
03-22 1045
岁月匆匆，又是一年毕业季，这次做个动态相册展示图片，放些有意思的内容，一起回忆下校园生活吧。
分享92个JS相册效果JS代码，总有一款适合你
zy0412326的专栏
02-22 4833
分享92个JS相册效果JS代码 链接：https://pan.baidu.com/s/10AUc6EN5TB4ZPydLAAEu5Q 提取码：pxj1 下面是文件的名字，我放了一些图片，文章里不是所有的图主要是放不下...，大家下载后可以看到。 jQuery旅游相册Tab切换代码 jQuery相册图片掀开切换代码 jQuery图片相册轮播切换代码 JS人体艺术网站图集相册特效 JS响应式3D照片墙展示特效 jQuery立体相册鼠标点击切换代码 支持全屏缩放下载功能lightbox插件 html5.
用JavaScript一个图片特效设计（横向的相册效果、纵向的相册效果、图片轮播等）。
06-10
好的，这里提供一个简单的图片轮播的实现示例。 HTML代码： ``` <div class="slideshow"> <img src="1.jpg" alt="图片1"> <img src="2.jpg" alt="图片2"> <img src="3.jpg" alt="图片3"> <img src="4.jpg" alt="图片4"> </div> ``` CSS代码： ``` .slideshow { position: relative; width: 500px; height: 300px; overflow: hidden; } .slideshow img { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s ease-in-out; } .slideshow .active { opacity: 1; } ``` JavaScript代码： ``` // 获取轮播容器元素 var slideshow = document.querySelector('.slideshow'); // 获取轮播图片元素 var images = slideshow.querySelectorAll('img'); // 设置当前显示的图片索引 var index = 0; // 定义轮播函数 function slide() { // 隐藏当前显示的图片 images[index].classList.remove('active'); // 计算下一个要显示的图片的索引 index = (index + 1) % images.length; // 显示下一个图片 images[index].classList.add('active'); // 每隔3秒执行一次轮播函数 setTimeout(slide, 3000); } // 显示第一张图片，并启动轮播 images[index].classList.add('active'); setTimeout(slide, 3000); ``` 这段代码实现了一个简单的图片轮播，每隔3秒钟自动切换图片。你可以根据自己的需求进行修改和扩展。例如，可以添加左右箭头来手动切换图片，也可以添加缩略图导航栏来让用户选择要查看的图片。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值