`
wangking717
  • 浏览: 263123 次
  • 性别: Icon_minigender_2
  • 来自: 成都
社区版块
存档分类
最新评论

Jquery文字连接移动效果,鼠标放上去,横向移动特效

 
阅读更多

这种jQuery文字横向滚动效果,可以应用到文章列表页标题栏上,做出来的效果就很不错,用户体验高。

 

HTML代码:

<div class="hover_style"><a href="#">字滚动1111111111</a></div>
<div class="hover_style"><a href="#">文字滚动2222222222</a></div>

 

JS代码:

<script type="text/javascript">
	$(function(){
		
		$(".hover_style").mouseover(function(e){
			$(this).stop(true,false).animate({"margin-left":"+10px"},500);
		}).mouseleave(function(e){
			$(this).stop(true,false).animate({"margin-left":"0px"},500);
		});
	});
</script>

 

末了,多多支持本博客。

分享到:
评论
2 楼 wangking717 2016-04-12  
CommonAccount 写道
怎么我写了没反应

你需要把jquery引用进去才行哈。
1 楼 CommonAccount 2014-06-04  
怎么我写了没反应

相关推荐

    jquery鼠标移到Image上方时显示文字效果

    本示例中,我们关注的是一个基于jQuery实现的图片特效,即“鼠标移到Image上方时显示文字效果”。这个功能是通过结合jQuery事件监听器和CSS样式来创建的,当用户将鼠标悬停在图片上时,会在图片底部显示相关信息,...

    支持移动端的jQuery滑动条拖动横向图片滚动特效

    这个功能是通过使用jQuery插件mCustomScrollbar来完成的,它为网站提供了丰富的自定义滚动条效果,并且能够适应各种设备,包括移动设备,支持响应式布局。 首先,我们需要了解jQuery库。jQuery是一个广泛使用的...

    jQuery鼠标悬停缩略图横向切换大图展示特效.zip

    这个特效的核心在于通过jQuery监听用户的鼠标事件,当鼠标移动到缩略图上或者点击缩略图时,触发相应的功能。首先,我们需要在HTML中设置好结构,包括一个用于显示大图的区域和一系列的缩略图。缩略图通常会包含在`...

    jQuery+d3横向树型股份结构图特效

    《jQuery+d3横向树型股份结构图特效详解》 在当今的数据可视化领域,有效地展示复杂的股份结构至关重要。本文将深入探讨如何使用jQuery和d3.js库来创建一个横向树型的股份结构图,帮助读者理解如何利用这两个强大的...

    使用jquery实现各种特效

    通过创建两个图像元素,一个大图和一个小图,我们可以利用jQuery监听小图的鼠标移动事件,实时调整大图的缩放和位置,从而实现放大镜效果。 “翻书效果”是模拟真实书籍翻页的动画,给用户带来互动的阅读体验。这个...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放...

    横向滚动(筋斗云特效)jQuery导航代码

    【横向滚动(筋斗云特效)jQuery导航代码】是一种网页设计技术,主要用于创建具有动态视觉效果的导航菜单。这种特效通常使用户在浏览网站时有一种流畅的体验,如同孙悟空翻筋斗云般的轻盈感。在网页设计中,良好的导航...

    jQuery swiper水平左右滑动时间轴特效

    2. **jQuery事件处理**:利用jQuery的`.on()`方法绑定鼠标拖动和箭头按键事件,当这些事件触发时,更新时间轴的位置。 3. **DOM操作**:jQuery提供了方便的DOM操作方法,如`.append()`、`.prepend()`,可以用于添加...

    jQuery横向动态滑动特效.zip

    本项目“jQuery横向动态滑动特效”是利用jQuery实现的一种常见的网页交互功能,通常用于展示产品、图片或者文章列表,使得用户可以通过水平滑动来浏览更多的内容。这个效果在现代网页设计中非常流行,能提升用户体验...

    jQuery横向纵向下拉菜单特效

    在上述示例中,我们使用了`slideToggle()`来实现平滑的展开和收起效果,`stop()`是为了防止连续快速移动鼠标时的动画堆栈问题。 5. **响应式设计**:为了确保在不同设备和屏幕尺寸上的良好表现,可以使用媒体查询...

    jQuery实现鼠标经过菜单选项显示下拉横向导航菜单特效源码.zip

    本资源提供了一个使用jQuery实现的鼠标经过菜单选项时显示下拉横向导航菜单的特效源码,适用于构建响应式和动态的网页界面。jQuery是一个广泛使用的JavaScript库,它简化了JavaScript的DOM操作、事件处理以及动画...

    实用的jquery横向无限循环滚动插件

    "实用的jQuery横向无限循环滚动插件"是一个专门为网页设计的动态效果插件,它允许网页上的内容(如图片、文本或产品展示)以横向无限循环的方式进行滚动,从而提供一种流畅且引人注目的用户体验。这种被称为"自动...

    jQuery带缩略图横向滚动切换代码.zip

    这个库基于流行的jQuery框架,利用其强大的DOM操作和事件处理能力,实现了用户在浏览缩略图时,大图会自动按照用户的鼠标移动方向进行平滑的横向滚动切换。 在jQuery中,`$(document).ready()`函数常用于确保DOM...

    网站\腾讯网横向滚动轮播鼠标经过图片显示标题特效

    【描述】:描述中的“网站\腾讯网横向滚动轮播鼠标经过图片显示标题特效”进一步强调了该效果是腾讯网特有的设计元素。当用户浏览网页时,鼠标移动到滚动轮播的图片上,图片下方会显示出对应的标题,为用户提供清晰...

    100多个JQuery效果示例(实例)div+css+javascrpit

    50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放...

    横向滚动jQuery导航代码.zip

    `.scrollLeft()`用于设置或获取元素的水平滚动位置,而`.animate()`则用于创建平滑的动画效果,通过设定时间和缓动函数,使导航菜单在用户触发事件时(如鼠标滚轮、触摸滑动等)平滑地左右移动。 在实际应用中,这...

    jquery 动态示例

    50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播插件 53. jquery网站顶部滑动广告插件 54. jquery自动播放...

    jQuery发展历程横向时间轴代码.zip

    这个“jQuery发展历程横向时间轴代码”是一个示例项目,旨在展示jQuery如何被用来创建交互式的时间轴效果。 时间轴是一种常见的UI设计元素,用于展示一系列按时间顺序排列的事件或里程碑。在这个项目中,jQuery被...

    jQuery横向下拉导航菜单 jQuery横向下拉导航菜单网页特效.zip

    这段代码使用了jQuery的`.stop()`方法来阻止可能存在的动画队列,防止多个快速鼠标移动导致的动画混乱,`.slideDown()`和`.slideUp()`则分别用于展开和收起子菜单。 4. **响应式设计**:为了确保在不同设备和屏幕...

    基于jQuery实现圆形图片横向轮播特效源码.zip

    综上所述,基于jQuery实现的圆形图片横向轮播特效涉及到的知识点包括:jQuery选择器与链式调用、DOM操作、CSS样式设计(尤其是圆角效果)、动画处理(`animate()`方法)、事件监听、以及用户体验优化。通过掌握这些...

Global site tag (gtag.js) - Google Analytics