0顶

js横向模拟滚动条展示特效

稿源：互联网 2022-04-02 21:40:25 点击： 7933 撤稿纠错

运行网页特效代码出现脚本错误，请刷新一次加载JQUERY即可。

以下讨论的是和横向滚动相关的js横向模拟滚动条展示特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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=utf-8" />
<title>无标题文档</title>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$(function(){
 var scro_zoom = parseInt($(".scro_mouse").width()/2);
 var scro = $("#scro");
 var scroWidth = parseInt($("#scro").width());
 var scroImgWidth = parseInt($(".scro_img ul li").width());
 var scroMouse = parseInt($(".scro_mouse").width());
 var scroMove = $(".scro_img ul");
 var scroImgLength = $(".scro_img ul li").length;
 var scroImgBoxWidth = scroImgWidth * scroImgLength + scroImgLength * 10 + 10;
 var zoompos = {x:0,y:0};
 var flag = false;
 var scropos;
 scroMove.css("width",scroImgBoxWidth + "px");
 
 
 $(".scro_mouse").bind("mousedown",function(e){
  flag = true;
  $(this).css("background","blue");
  $(".show").fadeIn(300);
  return false;
 }).mousemove(function(e){
  if(flag){
   $zoompos(e.pageX,e.pageY);
   $(this).css("left",zoompos.x);
   scroMove.css("left",-scropos + "px");
  }
 }).mouseup(function(e){
  flag = false;
  $(".show").hide();
  $(this).css("background","#ccc");
 })
 $(document).mouseup(function(e){
  flag = false;
  $(".show").hide();
  $(".scro_mouse").css("background","#ccc");
 })
 
 function $zoompos(x,y){
  zoompos.x = x - scro.offset().left - scro_zoom; //得到left值;
  zoompos.y = y - scro.offset().top - 5;//得到top值;
  scropos = parseInt((scroImgBoxWidth - scroWidth) / (scroWidth - scroMouse) * zoompos.x);
  if(zoompos.x <= 0){
   zoompos.x = 0;
  }
  if(zoompos.x + scroMouse >= scroWidth){
   zoompos.x = scroWidth - scroMouse;
  }
  if(scropos < 0){
   scropos = 0;
  }
  if(scropos >= scroImgBoxWidth - scroWidth){
   scropos = scroImgBoxWidth - scroWidth;
  }
  $(".show").text( zoompos.x + "," + zoompos.y + "," + $(".scro_mouse").css("left"));
 }
})
</script>
<style type="text/css">
 *{ margin:0; padding:0;}
 #box{ width:460px; border:1px solid #000; margin:50px auto;}
 #scro{ width:100%; height:30px; background:red; margin:10px 0; position:relative;}
 .scro_line{ width:100%; height:0; overflow:hidden; border-top:2px groove #000; position:absolute; left:0; top:15px; z-index:0;}
 .scro_mouse{ width:66px; height:20px; background:#ccc; cursor:pointer; position:absolute; left:0; top:5px; z-index:1;}
 .show{ width:100px; height:30px; position:absolute; display:none; top:-30px; left:0;}
 .scro_img{ width:460px; height:60px; margin:10px 0; overflow:hidden; position:relative;}
 .scro_img ul{ position:absolute; left:0; top:0;}
 .scro_img ul li{ display:inline; float:left; width:80px; height:60px; margin-left:10px; background:red;}
</style>
</head>
<body>
    <div id="box">
     <div class="scro_img">
         <ul>
             <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
            </ul>
        </div>
        
        <div id="scro">
         <div class="show"></div>
         <div class="scro_line"></div>
         <div class="scro_mouse"></div>
        </div>
        <div class="text"></div>
    </div>
</body>
</html>

关于js横向模拟滚动条展示特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011022267763.shtml方便下次再访问哦。

·上一篇： 一款简单的日历选择器特效
·下一篇： 图片背景跟随鼠标划动的导航菜单

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

js横向模拟滚动条展示特效

文章分类LIST >>返回首页

最新游戏

最新新闻