Jquery 图片随鼠标横向滚动

最新推荐文章于 2023-05-23 10:54:11 发布
最新推荐文章于 2023-05-23 10:54:11 发布
阅读量173 收藏 1
点赞数 1
分类专栏： WEB开发 文章标签： jquery 图片滚动 横向 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bozch/article/details/84160457
版权

图片滚动代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
  div.scrollMenu{
      width:500px;
   height:120px;
   overflow: hidden;
   border:1px solid red;
  }
  ul.scrollMenu{
 list-style-type: none;
 width:1280px;
 height:100px;
 margin:0;
  }


  .scrollMenu li{
    float:left;
 width:70px;
 margin-top:30px;
 text-align:center;
 padding: 0 0 20px 20px;
  }

  .scrollMenu img{
 text-align:center;
 display: block;
  }

  .scrollMenu span{
 display: block;
 font-weight:bold;
  }
</style>
<script language="javascript" src="jquery-1.6.min.js"></script>
<SCRIPT LANGUAGE="JavaScript">
$(function(){
    var div = $("div.scrollMenu"),
     ul = $("ul.scrollMenu");
 div.mousemove(function(e){
     var left = (e.pageX - div.offset().left)*(div.width()-ul.width())/div.width();
  $("#show").html(-left);
     div.scrollLeft(-left);
 });
});
</SCRIPT>

</HEAD>

<BODY>
   <div class="scrollMenu" title="图片横向滚动">
      <ul class="scrollMenu">
           <li><img src="Add.png"/><span> </span></li>
             <li><img src="Address_Book.png"><span> </span></li>
             <li><img src="Alert.png"><span> </span></li>
             <li><img src="Announcement.png"><span> </span></li>
             <li><img src="Back.png"><span> </span></li>
             <li><img src="Bin_Empty.png"><span>  </span></li>
             <li><img src="Bin_Full.png"><span> </span></li>
             <li><img src="Box.png"><span> </span></li>
             <li><img src="Burn.png"><span> </span></li>
             <li><img src="Calender.png"><span> </span></li>
             <li><img src="CD.png"><span> </span></li>
             <li><img src="Chat.png"><span> </span></li>
             <li><img src="Clock.png"><span> </span></li>
             <li><img src="Close.png"><span> </span></li>
             <li><img src="Computer.png"><span> </span></li>
             <li><img src="Contact.png"><span> </span></li>
             <li><img src="Database.png"><span> </span></li>
             <li><img src="Delete.png"><span> </span></li>
   </ul>
   </div>

   <div id="show"></div>
</BODY>
</HTML>

bozch
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html图片横向滚动,jQuery实现图片横向滚动特效
weixin_39776991的博客
06-04 696
特效描述：jQuery实现 图片横向 滚动特效。jQuery实现图片横向滚动特效代码结构1. 引入CSS2. 引入JS3. HTML代码Photography InformationClick the image to navigate.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum, error, magnam re...
JQuery图片随鼠标的移动
郭贝贝的博客编程
06-21 266
图片跟随鼠标的移动&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; #img { position:absolute;/*绝对位置*/ } &lt;/style&gt; &lt;script src="jquery-1.11.3.min.js"&gt
基于jquery实现点击左右按钮图片横向滚动
12-10
点击左右按钮图片横向滚动jquery，一次滚动四个，图片滚动完成，自动回到第一个版面： 效果图如下： 代码如下: <!DOCTYPE html> <html lange=”en”> <head> <title>点击左右按钮图片横向滚动</title> <meta charset=utf-8″ /> <style type=”text/css”> * { margin:0; padding:0;} body { font-size:12px;} .box {height:66px; float:left; width:440px; overflow: hidden; position:rela
Jquery实现轮播图效果
weixin_68250871的博客
05-23 2353
【代码】Jquery实现轮播图效果。
JS（JQ）-实现图片横向滑动效果
weixin_30457465的博客
09-14 1567
先看效果: 这是一个常用的js实现图片滑动的效果 这里面的代码很值得去研究：（勘称完美~） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html ...
vue项目实现pc和移动端长图拖拽+鼠标滚动横向滑动查看
weixin_62216253的博客
11-03 1155
我的图片是进入页面定位在最右边，向左拖拽查看图片。 vue项目 拖拽 鼠标滚轮横向滚动
jQuery图片随鼠标移动的案例
H_JH123的博客
05-01 583
html部分 JQ部分 //event参数来自事件绑定函数。 01.event.pageX： 属性返回鼠标指针的位置，相对于文档的左边缘。 提示：该事件属性通常与event.pageY属性一起使用。 02. event.pageY： 属性返回鼠标指针的位置，相对于文档的上边缘。 提示：该事件属性通常与event.pageX属性一起使用。 注意事项: 属性event.clientX(Y)与even.pageX(Y) 在JavaScript中都可使用且效果基本相同，反之在j...
jquery图片横向滚动
08-01
本教程将详细讲解如何利用jQuery实现一个“超酷横向滚动带倒影”的照片展示功能，同时包含横向滚动条并支持用户拉动操作。 首先，我们需要在HTML结构中设置一个容器来存放图片。这个容器可以是一个`<div>`元素，...
jQuery商品图片横向自动滚动轮播代码
06-10
【jQuery商品图片横向自动滚动轮播代码】是一种常见的网页交互设计，用于展示商品图片，提升用户体验。这种轮播效果能够使商品图片以横向的方式自动滚动，用户也可以通过左右箭头手动控制图片的切换。在鼠标悬停时，...
横向滚动jQuery导航特效代码
03-20
【横向滚动jQuery导航特效代码】是一种常见的网页设计技术，它为用户提供了一种创新且互动的浏览体验。在传统的垂直导航栏基础上，这种横向滚动效果利用了JavaScript库jQuery的强大功能，使得菜单项能够在水平方向上...
jQuery 横向图片滚动，带左右控制
05-12
内容索引:脚本资源,jQuery,图片滚动,无缝滚动代码,jQuery插件　　jQuery 横向图片滚动，带左右控制按钮,原作品中作者用数字代替了图片,源码爱好者把数字换成了图片,这样更直观一些,但是核心没有变,本滚动可自由判断最后一张图片,实现无缝循环滚动,效果展示如上图示,使用jQuery1.3.2插件.
jquery实现图片的左右滚动
02-02
使用jquery +div + ul 实现图片的左右滚动！
随鼠标滚动的广告类悬浮窗
03-22
随鼠标滚动的广告类悬浮窗 前端元素操作jQuery js 包含源码及图片
一排图片随鼠标左右移动而向左向右移动
04-29
一排图片的左端和右端有图片按钮点击就向左或向右 整体移动。鼠标如果向左则向左移动，向右则向右移动。
jquery实现图片左右滚动
05-12
jquery实现图片左右连续滚动
支持移动端的jQuery滑动条拖动横向图片滚动特效
01-02
在图片的展示上，可以使用CSS的`display: inline-block`或者`float: left`属性来使图片并排显示，从而实现横向滚动的效果。记得在图片的`width`属性上设置合适的值，确保它们可以在有限的空间内水平排列。 最后，...
jquery 图片横向动态展示
06-30 221
今天用jquery写了一个简单的图片横向动态展示，使用jquery极大的简化了js，对于jquery的初学者来说也容易理解。【原理简述】1、在此只添加了向右移动的按钮，添加向左的按钮的jquery代码，改变这些代码 if(page == page_count){ jq2.animate({left:'-0px'},'slow'); ...
鼠标经过箭头时,图片会向左或向右横向移动
ywybj686的专栏
05-15 771
//more javascript from http://www.webjx.comvar sh;marqueesWidth=610;preLeft=0; currentLeft=0; stopscroll=false; getlimit=0;preTop=0; currentTop=0;function scrollLeft(){ if(stopscroll==true) return; 
jquery横向滚动_使用jQuery进行横向滚动
culiao9310的博客
09-28 3071
jquery横向滚动View demo 查看演示Download Source 下载源After getting the request, we are going to show you how to create a “slide-in on scroll” effect. You’ve probably seen this cool effect on...
jquery设置区域内滑动鼠标横向滚动
最新发布
08-10
要使用 jQuery 设置区域内滑动鼠标横向滚动，你可以使用以下代码： ``` $(document).ready(function() { $('#your-element').mousemove(function(e) { // 获取鼠标滚动事件 var scroll = e.originalEvent....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值