用JS模拟向左移动的侧移式灯箱效果

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量143 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/obestboy/archive/2012/01/10/2318556.html
版权

HTML结构如下：

     其中ahot是表示有几屏，现在正移动到哪一屏；

     ohot表示整个灯箱，ihot也是整个灯箱，但先是隐藏起来的；

     而dhot表示一屏灯箱，此处共四屏；

    hot_div是表示一屏灯箱的一行，共四行，在实际案例里一行有三幅图片。

<div class="gg_title" id="leftmove_title"><p>花虎体坛点击热榜</p></div>
<div class="gg_body" id="leftmove">
<div id="ahot"><div><a>1</a><a>2</a><a>3</a><a>4</a></div></div>
<div id="ohot">                        
<div id="ihot" class="hidden">     

<div class="dhot"> 
<div class="hot_div">

</div>                                    

<div class="hot_div">                      

</div>                                    

<div class="hot_div">                      

</div>  

</div> 


<div class="dhot"> 
<div class="hot_div">

</div>                                    

<div class="hot_div">                      

</div>                                    

<div class="hot_div">                      

</div>  

</div>            

<div class="dhot"> 
<div class="hot_div">

</div>                                    

<div class="hot_div">                      

</div>                                    

<div class="hot_div">                      

</div>  

</div>

<div class="dhot"> 
<div class="hot_div">

</div>                                    

<div class="hot_div">                      

</div>                                    

<div class="hot_div">                      

</div>  

</div>           

</div>
</div>
</div>
<div class=vertical_space></div>

 

我这里直接贴上我实际的代码，供参考 

 接下来就那些div的class的定义了，我直接贴代码，我是用JS写的，你可以自己转换一下，很简单的。

#leftmove {width:386px;height:480px; position:relative;right:0px;}
#ahot {width:386px;height:25px;background-color:#0099CC;}
#ohot {width:386px;height:480px; overflow:hidden; position:relative;top:10px;}
#ihot {width:1800px;height:480px;position:relative;}
.dhot {float:left;width:386px;height:480px;}
#ahot a {float:left;position:relative;left:15px;display:block;cursor:pointer;width:30px;height:25px;line-height:25px;text-align:center;background: #0099CC;color:white;font-size:20px;font-weight:bold;}
#ahot div {float:left;display:block;position:relative;left:100px;}
#right_ad160x600 {float:right;width: 165px; height: 600px;background-color:#FF0000;color:#fff;font-size:20px;font-weight:bold;position:relative;text-align:center;top:40px;right:8px;}
.hot_div {position:relative;left:15px;width:386px;height:150px;}
.top_small_div {float:left;width:120px;height:120px;margin:auto auto auto 2px ;}
.top_small_img {width:100px;height:100px;border:2px solid #EAfAFA;padding:2px;}
.top_small_text {display:block;width:100px; height:20px;line-height:20px;overflow:hidden;text-align:center;}
.right_small_div {text-align:center;width:120px;height:120px;margin:auto auto auto 5px ;}
.my_colee_bottom {width: 155px; height: 700px; overflow: hidden;position:relative;top:5px;}
.gg_title {width:388px;background-color: #70B7C0;height:25px;background-repeat:no-repeat;font-weight: bold;padding-top: 5px;color:#fff;font-size:14px;position:relative;right:0px;}
.gg_body {width:386px;background-color:#DDDDDD;position:relative;right:0px;border-left: 1px solid #9599AD; border-right:1px solid #9599AD; border-bottom:2px solid #9599AD;}
.gg_title p {text-align:center;margin:0px;}
.vertical_space {height:5px;}
.hidden { display:none;}
#ad300x250 {width:305px;height:255px;font-size:20px;font-weight:bold;position:relative;text-align:center;left:10px;color:white;}
#ad300x2501 {width:305px;height:255px;font-size:20px;font-weight:bold;position:relative;text-align:center;left:10px;}

下面就是JS脚本了，仔细看吧，用了jquery，你还得在你的HTML文件里加上jquery

<script src="http://www.playtigers.com/hbcms/script/jquery/jquery_1.3.1.js" type="text/javascript"></script>

 

var hottotal=$(".dhot").length;
var hotwidth=$("#ohot").width();
var hotdistance=20;
var hotleft1=0;
var hotleft2=0;
var hotdis=0;
var hot2t,hot3t,hot4t;
function hotmove(){
var hotnext=hotdis+1;
if(hotnext>hottotal-1) {
             hotleft1=-1*hotnext*hotwidth;
             hotleft2=hotleft2+hotdistance;
             hotleft3=hotleft2+"px";
if(hotleft2<0) {
if(hot2t) clearTimeout(hot2t);
if (hot4t) clearTimeout(hot4t);
                    $("#ihot").css({"left":hotleft3});
                    hot3t=setTimeout("hotmove()",10);
             }    
else {
if(hot3t) clearTimeout(hot3t);
                    $("#ahot a").eq(3).css({"color":"#fff"});
                    $("#ahot a").eq(0).css({"color":"red"});
                    $("#ihot").css({"left":"0px"});
                    hotdis=0;
                    hot4t=setInterval("hotmove()",8000);
             }    
    }
else {
          hotleft1=-1*hotnext*hotwidth;
          hotleft2=hotleft2-hotdistance;    
if(hotleft1<hotleft2) {
if (hot4t) clearTimeout(hot4t);
                  hotleft3=hotleft2+"px";
                  $("#ihot").css({"left":hotleft3});
                  hot2t=setTimeout("hotmove()",20);
            }
else {
                 $("#ahot a").eq(hotdis).css({"color":"#fff"});
                 $("#ahot a").eq(hotnext).css({"color":"red"});
                 $("#ihot").css({"left":hotleft1});
if(hot2t) clearTimeout(hot2t);
                 hotdis=hotnext;
                 hot4t=setInterval("hotmove()",8000);
           }
    } 
}


 $(document).ready(function(){
   $("#ahot a").eq(0).css({"color":"red"});
   $(function(){
         $('#leftmove').hover(
function () { if (hot4t) clearTimeout(hot4t);},
function () {hot4t=setInterval("hotmove()",8000);} 
         );

         $('#ahot a').click(function(){
var thishot=$("#ahot a").index($(this));
              $("#ahot a").eq(hotdis).css({"color":"#fff"});
              $("#ahot a").eq(thishot).css({"color":"red"});
var thisleft=-1*thishot*hotwidth;          
               $("#ihot").css({"left":thisleft});
               hotdis=thishot;
           }
         );
  });
   hot4t=setInterval("hotmove()",8000);
});

 

好了，这样大功告成了。我的效果图如下：一屏一屏地向左侧移动，看起来还是蛮动感的。

只是这个页面在博客园无法模拟啊，我再看看哪里问题。

花虎体坛点击热榜

1 2 3 4
 

 下面把用到的JS脚本文件放在下面

http://files.cnblogs.com/obestboy/leftmove.js

转载于:https://www.cnblogs.com/obestboy/archive/2012/01/10/2318556.html

weixin_30347335
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS效果-灯箱效果-图片大图查看
qq_42381297的博客
10-19 2834
一个简单的自己写的简陋版“灯箱效果”，不多说看代码：（自己找一下图片，路径记得改，用到jQuery）嫌js麻烦，主要想试一下实现逻辑。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;灯箱效果&lt;/title&gt; &lt;style&am
html 灯箱效果
10-26
html 灯箱效果
JQuery实现灯箱特效
越陌度阡
08-10 1194
给大家分享一个用JQuery-rebox编写的灯箱特效，实现效果如下： 以下是代码实现，欢迎大家复制粘贴，另外这个插件现在网上也不好找，名种收费和会员，也给大家奉上。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; c......
灯箱效果lightbox.js的使用示例
vcxiaohan的博客
12-08 7158
灯箱效果想必大家都很熟悉，平常用的也会比较多。 今天研究了下反响比较好的jquery插件lightbox.js，虽然界面效果不错，但是也有缺点 兼容性：各大浏览器和ie6+ 不足： 1 由于我们使用时是直接在css里写data-lightbox属性调用它，所以如果需要修改自定义参数，只能修改源码 2 没有考虑窗口缩放事件 具体示例： demo *
JS图片灯箱(lightBox)效果基本原理和demo
weixin_34239169的博客
01-27 534
       到年底了，项目不怎么忙，所以有空特地研究了下KISSY中源码JS灯箱效果，感觉代码比较简单，所以就按照他们的思路依赖于Jquery框架也封装了一个，特地分享给大家，以前经常看到网上很多这样的插件，感觉很多人很牛逼的样子，这样的效果也能做出来，碰巧今天自己也能研究出来一个，代码也不多，就300多行代码，嘿嘿！如果写的不够好，或者还不够的，希望大家多多指教！或者多多发表意见，那些需要值得...
JavaScript
Alvin博客
11-24 1万+
1、javaScript的概念:是一种表述语言，也是一种基于对象(Object)和事件驱动(EventDriven)的，安全性好的脚本语言，运行在客户端，从而减轻服务器端的负担，总结如下：   1.javaScript主要用来向HTML页面找那个添加交互行为。   2.javaScript是一种脚本语言，语法和java类似。   3.javaScript一般用来编写客户端脚本。
《JavaScript网页特效经典300例》
weixin_30767835的博客
07-07 1414
《JavaScript网页特效经典300例》 基本信息 作者： 杨磊 张志美 丛书名： 百炼成钢系列丛书 出版社：电子工业出版社 ISBN：9787121220524 上架时间：2014-1-23 出版日期：2014 年1月 开本：16开 页码：411 版次：1-1 所属分类：计算机 更多关于》》》 《软件开发与创新：ThoughtWorks文集：续集》 ...
在swiper中使用长页面，以及嵌套多个swiper时滑动卡顿、无法滑动的问题。
热门推荐
Elephant_H的博客
06-29 1万+
前言 一般而言，swiper的应用场景大多是两种： 满屏切换的H5页面 pc&amp;amp;amp;amp;amp;amp;移动端各种样式的轮播图 但有的时候，面对奇怪的需求，我们需要改变，甚至让swiper实现一些无法实现的功能。 需求 近期接到一个h5项目，主体头部是一个选项卡，对应两个子页面，每个子页面的第一屏为一个满屏的kv，监测到向下滑动时平滑过渡到第二屏，而第二屏是一个长页面。 思路 ...
支持视频、图片的js弹出式灯箱效果代码
08-13
总之，js弹出式灯箱是网页中一种实用的交互设计，它可以通过JavaScript库或自定义代码轻松实现。通过提供的资源，你可以快速地在你的网站上实现图片和视频的弹出展示，提升用户的浏览体验。在具体应用时，务必考虑...
jQuery全屏画廊灯箱效果
03-31
jQuery全屏画廊灯箱效果是一种常见的网页设计技术，它为用户提供了一种优雅的方式来展示图像，尤其是当用户希望在不离开当前页面的情况下查看大图时。这种效果通常基于JavaScript库jQuery，结合Lightbox概念实现，...
jQuery图片灯箱预览效果
06-24
在网页设计中，图片展示是不可或缺的一部分，而为了提升用户体验，常常会采用“图片灯箱预览效果”来实现一种沉浸式的浏览体验。jQuery 图片灯箱预览效果就是这样的一个解决方案，它允许用户在不离开当前页面的情况...
电信设备-可移动式立体广告灯箱.zip
09-18
【电信设备-可移动式立体广告灯箱】 在IT领域，电信设备是构成通信网络的基础，而可移动式立体广告灯箱则是其中一种创新的展示技术，尤其在城市信息化和数字化进程中扮演着重要角色。这类广告灯箱不仅具有传统广告...
jQuery实现仿路边灯箱广告图片轮播效果
10-24
此效果模拟了现实生活中路边大型广告牌的动态展示方式，通过LED切换的效果，使得图片在页面底部持续滚动播放，为用户带来视觉上的新鲜感。 在实现这个效果时，主要涉及以下几个关键知识点： 1. **jQuery库的引入**...
js实现点击往左移动
Revival_Liang的博客
06-22 7252
Document *{margin: 0px;padding: 0px;} ul{width: 10000px;height: 50px;left: 0px; position: relative; list-style: none;transition: width 0.5s;-moz-transition: left 0.5s;-webkit-transition: left 0.
div向左、向右移动的动画效果
weixin_43452467的博客
04-05 8206
1.先把需要移动div定位到动画开始前的位置 <head> <style> .box1{ position:relative; width: 50%; height: 10%; background-color: yellow; } ...
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 329
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
【React 】开发环境搭建详细指南
lph159的博客
07-24 1108
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 124
【代码】vue el-select的下拉树形结构。
qml popup 灯箱效果
07-15
在QML中，我们可以使用Popup组件来实现灯箱效果。 首先，我们需要在QML代码中导入Qt Quick的Popup组件，并创建一个Popup对象。然后，我们可以设置Popup的属性，例如位置、大小和动画效果等。接下来，我们可以在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值