JS实现的动态画廊功能,不依赖jquery; 代码实现简单、易用;
实现原理: 通过JS定时器,定时修改div marginLeft 值,使div中的内容移动;
核心JS代码
/**
* 滚动插件对象
* @param json param
* @param int intervalId 定时器编号
* @param Object container 需动容器
* @param int totalPx 移动总相素
* @param int speedTime 每次移动时间
* @param int timeNum 移动次数
*/
var Whell = function(param) {
this.intervalId = null;
this.container = param.container;
this.totalPx = param.totalPx;
this.speedTime = param.speedTime || 10;
this.timeNum = param.timeNum || 15;
var spacePx = parseInt(this.totalPx/this.timeNum);
if(spacePx < 0){
this.spacePx = 0 - spacePx;
}else{
this.spacePx = spacePx;
}
};
Whell.prototype = {
start : function(){
var obj = this;
this.intervalId = setInterval(function(){
obj.scroll();
}, this.speedTime);
},
/**
* 滚轮滚动方法
*/
scroll : function(){
if (this.totalPx == 0) {
//移动相素之和为1024时,停止移动
clearInterval(this.intervalId);
} else {
var currntMargin = _getPxNumber(this.container.style.marginLeft);
if(this.totalPx > 0){
//向右移动
if(this.totalPx > this.spacePx){
this.container.style.marginLeft = (currntMargin + this.spacePx) + "px";
this.totalPx = this.totalPx - this.spacePx;
}else{
this.container.style.marginLeft = (currntMargin + this.totalPx) + "px";
this.totalPx = 0;
}
}else if(this.totalPx < 0){
//向左移动
if(this.totalPx + this.spacePx < 0 ){
this.container.style.marginLeft = (currntMargin - this.spacePx) + "px";
this.totalPx = this.totalPx + this.spacePx;
}else{
this.container.style.marginLeft = (currntMargin + this.totalPx) + "px";
this.totalPx = 0;
}
}
}
}
};
/**
* 画廊滚动
*/
Whell['gallery'] = {
slideView : function(container) {
var image = _$(".g_image", container)[0];
var pictWidth = image.width;
var pictHeight = image.height;
var pictEls = _$(".gallery_image", container).length;
var stripViewerWidth = pictWidth * pictEls;
var gallery_main = _$(".gallery_main", container)[0];
gallery_main.style.width = stripViewerWidth + "px";
container.style.width = (pictWidth+10) + "px";
container.style.height = (pictHeight + 80) + "px";
_each(_$(".gallery_paging", container), function(z, node) {
L.event.add(node, "click", function(){
//更改点击区域样式
var gallery_paging_list = _$(".gallery_paging", container);
_each(gallery_paging_list, function(i, paging){
if(i == z){
paging.className = "gallery_paging gallery_paging_selected";
}else{
paging.className = "gallery_paging";
}
});
//滚动
var cnt = -(pictWidth * z);
var startPx = gallery_main.style.marginLeft;
var totalPx = cnt - _getPxNumber(startPx);
//定时执行滚动div
var whell = new Whell({totalPx:totalPx, container: gallery_main});
//启动定时器
whell.start();
//更改描述
var gallery_description_list = _$(".gallery_description", container);
_each(gallery_description_list, function(i, description){
if(i == z){
description.style.display = "block";
}else{
description.style.display = "none";
}
});
return false;
});
});
}
};
分享到:
相关推荐
用jQuery+CSS3+javascript制作画廊,功能包括图片随机飘落(仿雪花、落叶效果),图片的3-D选择、缩放,流光字体的实现,轮播照片,3-D旋转木马效果等等,不是很美观,后期会继续改善!
Android 图片浏览功能简单实现(画廊效果实现,支持放大缩小),博客参考地址:http://blog.csdn.net/qq_31546677/article/details/76472598
lightGallery插件基于jquery支持在web端点击、在终端设备上触摸全屏放大图片,支持画廊左右滑动图片,支持显示图片缩略图及图片下载放大缩小功能。提供的demo进行了简单画廊的演示。
今天我为大家介绍如何创建一个简易而又不失华丽的jquery幻灯片画廊,这个jquery特效的功能 也许在其他作品中也会有所体现,但这次我介绍的可以说是个集合
android 图片的放大镜功能 源代码(正方形放大镜) 类似淘宝 简单实现.zip,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
WebGL的东西WebGL实验的小型画廊在学习WebGL的道路上! 此仓库将是我在此过程中汇集的不同项目和实验的集合。我的图片库资源:从最基础的内容开始,它涵盖了许多很酷的东西,例如3D对象的转换,纹理贴图以及长达10周...
简单的lightbox和光photoswipe廊可作为功能和闪亮的模块使用。 可以在inst文件夹中找到Evample应用程序,而上提供了实时版本。 该软件包正在大力开发中。 lightbox画廊已完全正常运行,但photoswipe无法按预期工作...
Unite Gallery是一款功能强大的多用途响应式视频和图片画廊jQuery插件。它使用模块化技术,使用简单,易于定制。你可以通过CSS来改变画廊的皮肤,甚至可以自定义主题样式。它还支持移动触摸,支持图片缩放等。
主要介绍了jquery可定制高度画廊效果,很有艺术感,功能实现非常简单,推荐给大家,有需要的小伙伴可以参考下。
HorizontalScrollView仿gallery 照片墙效果,添加监听当前滑动到第几页,添加动态添加效果,代码简单有需要自己扩展.zip,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
这是一个Swift µframework,提供了许多我在许多其他框架中使用的简单功能。 我不是继续为每个消费者重新实现它们,而是将它们聚集在这里。 值得注意的是,该框架不提供任何新类型,也没有提供对自定义类型进行操作...
它支持高级的L系统功能,例如上下文重写或参数化L系统,以及一些独特的功能,例如将符号重写为另一个L系统。 Malsys能够将输出生成为位图图像,SVG(矢量图形)图像,3D WebGL场景,ASCII艺术甚至PNG动画(抱歉,还...
HTML5结合JS不刷新网页实现单击缩放图片功能,点击后具有图片缩放功能,放大时动作流畅,简单实用,适合在本窗口点击查看大图,一般WEB端生成的相册、画廊图片展示等,都可以使用本特效中的一个创作思路。
gdsCAD是一个简单但功能强大的Python软件包,用于创建,读取和操作GDSII布局文件。 它适合脚本编写和交互式使用。 它在生成带有多个增量调整对象的设计时尤其出色。 gdsCAD使用matplotlib可视化从单个几何图元到整个...
模板包括功能和增强功能的完整列表,以及快速入门指南。指示下载并解压缩.zip文件或克隆存储库。 通过网络启用目录。 访问.html页面。 有关配置选项,请参见readme.html页面。 部署中要部署此应用程序,请从Portal ...
画廊Rails上的完整GALLERY模型具有所有常见必要功能的简单酷炫功能列表:1.安全的登录系统。 2.上传图片。 3.管理员身份验证。 4.为管理员用户添加类别。 5. Porfile页面显示您的“个人资料”,“个人资料图片”,...
简单播放一首歌的功能,加上了控制音量和画廊的效果,以及一些菜单,对话框的操作!简单播放一首歌的功能,加上了控制音量和画廊的效果,以及一些菜单,对话框的操作!
画廊 一个简单但功能强大的图片库,用纯 JavaScript 编写
主要介绍了Android开发中画廊视图Gallery的两种使用方法,结合实例形式分析了Android画廊视图Gallery的简单布局与功能实现相关操作技巧,需要的朋友可以参考下