- 浏览: 340425 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (354)
- 学习 (219)
- 工作 (69)
- 前端技术 (188)
- 个人评论 (1)
- 工作总结 (1)
- 工作的方法 (1)
- 代码库 (1)
- jQuery (63)
- javascript (4)
- css (4)
- 网络通信协议 (3)
- web (7)
- 服务端性能 (1)
- 优化 (1)
- html5 (4)
- serialize (1)
- 上线页面 (1)
- ie6 (6)
- js (1)
- iframe (1)
- flash (1)
- a (1)
- img (1)
- 页面tms的要求 (1)
- kissy (3)
- 需求也页面 (0)
- 需求页面 (2)
- 视频插件 (1)
- 切图片 (1)
- map (1)
- display (1)
- 浮动定位 (1)
- 大小图片的切换功能 (2)
- demo (1)
- margin (1)
- a标签 (1)
- border (1)
- 侧导航 (1)
- 切换PNG格式的css (1)
- padding (1)
- 显示添加和删除 (1)
- 滚动条 (1)
- 和图片处理 (1)
- 移动端 (1)
- 定位 (1)
- 移动端的包的引入作用与直接拨打电话的A标签 (1)
- git (1)
- node.js (1)
- Zepto (1)
最新评论
-
幻紫1992:
还有分页的功能、、(⊙o⊙)嗯
[JS代码库] -
幻紫1992:
就是没有返回顶部的按钮,这个页面、、
[JS代码库] -
幻紫1992:
很受用,O(∩_∩)O谢谢啦~
[JS代码库] -
nlnl520coco:
想下个东西 规则太苛刻了 网站得改进
[JS代码库] -
hxp520520:
new Limiter() 这个对象是kissy API里面的 ...
Limiter的简单demo--20131029
1、效果及功能说明
3D动画文字滚动特效带标签云上下文字滚动,鼠标光标定位时上下文字滚动感应
2、实现原理
首先将在div定义一个可以辨识鼠标位置的方法比且获得鼠标的位置然后定义方法通过辨别鼠标的位置让里面的文字或向上滚动或向下滚动,定义滚动的速度和滚动的平率速度慢滚动就慢平率慢画面就会给用户一种很卡的感觉,在控制文字的层级关系让显示在最前面的文字保持最高层级和文字在滚动中的尺寸大小最前面的最大最后面的最小,还可以通过移动鼠标让滚动效果停止
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
(无图片)5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
3D动画文字滚动特效带标签云上下文字滚动,鼠标光标定位时上下文字滚动感应
2、实现原理
首先将在div定义一个可以辨识鼠标位置的方法比且获得鼠标的位置然后定义方法通过辨别鼠标的位置让里面的文字或向上滚动或向下滚动,定义滚动的速度和滚动的平率速度慢滚动就慢平率慢画面就会给用户一种很卡的感觉,在控制文字的层级关系让显示在最前面的文字保持最高层级和文字在滚动中的尺寸大小最前面的最大最后面的最小,还可以通过移动鼠标让滚动效果停止
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
(无图片)5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} body{font-family:Arial, "MS Trebuchet", sans-serif;background-color:#111;} #list{margin:0 auto;height:600px;width:600px;overflow:hidden;position:relative;background-color:#000;} #list a{position:absolute;text-decoration:none;color:#666;} #list a:hover{color:#ccc;} </style> </head> <body> <div id="list"> <ul> <li><a href="http://www.17sucai.com/">PhP</a></li> <li><a href="http://www.17sucai.com/">jQuery</a></li> <li><a href="http://www.17sucai.com/">Magento</a></li> <li><a href="http://www.17sucai.com/">MySql</a></li> <li><a href="http://www.17sucai.com/">Js</a></li> <li><a href="http://www.17sucai.com/">HTML</a></li> <li><a href="http://www.17sucai.com/">CSS</a></li> <li><a href="http://www.17sucai.com/">Ajax</a></li> <li><a href="http://www.17sucai.com/">ThinkPHP</a></li> <li><a href="http://www.17sucai.com/">Apache</a></li> <li><a href="http://www.17sucai.com/">Linux</a></li> <li><a href="http://www.17sucai.com/">Python</a></li> <li><a href="http://www.17sucai.com/">web</a></li> <li><a href="http://www.17sucai.com/">xhtml</a></li> </ul> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ //定义一个可以激活所有函数的方法 var element = $('#list a'); //定义参数获得所有a标签 var offset = 1; //定义参数 var stepping = 0.03; //定义参数控制文字滚动的速度数字越大,速度越快 var list = $('#list'); //定义参数 获得listID var $list = $(list) //定义获得参数 $list.mousemove(function(e){ //定义一个获得鼠标指针在页面中的位置方法 var topOfList = $list.eq(0).offset().top //定义参数获得list通过遍历获得当前的偏移的高度 var listHeight = $list.height() //定义参数获得list的宽度方法 stepping = (e.clientY - topOfList) / listHeight * 0.2 - 0.1; //定义文字滚动的速度等于方法参数e调用y轴减去高度提取list的值除与list的宽度乘与0.2秒-0.1秒 }); for (var i = element.length - 1; i >= 0; i--){ //判断 i 等于选择器选取带有指定标签名的元素的长度 - 1;i>0; i-1 element[i].elemAngle = i * Math.PI * 2 / element.length; //等于选择器选取带有指定标签名的元素带有i参数调用旋转的量,用弧度表示。正值表示顺时针方向旋转,负值表示逆时针方向旋转 } setInterval(render, 20); //周期(以毫秒计)来调用函数或计算表达式控制移动位置的平率数字越少移动平率越快数字越大移动平率越慢 要是慢的话看起来就会很卡 一动一动的 一点贯连感都没有 完全不自然 function render(){ //定义方法 for (var i = element.length - 1; i >= 0; i--){ //判断 定义参数i等于选择器选取带有指定标签名的元素的长度 - 1;i>0; i-1 var angle = element[i].elemAngle + offset; //定于参数 获得旋转量用弧度表示加上当前的偏移 x = 120 + Math.sin(angle) * 30; //定义X轴 120px 加上 PHP Math方法调用函数返回一个数的正弦乘30 y = 45 + Math.cos(angle) * 40; //定义Y轴 45px 加上 PHP Math方法调用函数返回一个数的余弦乘40 //这两个就是判断鼠标在上或者在下从而改变旋转上下 size = Math.round(40 - Math.sin(angle) * 40); //定义参数PHP Math方法是取近似值的数,也就是四舍五入的说法.返回一个整数值获得正弦值 var elementCenter = $(element[i]).width() / 2; //定义参数 选择器选取带有指定标签名的元素获得宽度除与2 var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px" //定义参数 获得宽度方法除与2乘x除与100 - elementCenter参数 + 坐标单位px $(element[i]).css("fontSize", size + "pt"); //控制样式大小单位pt $(element[i]).css("opacity",size/100); //控制样式透明度 $(element[i]).css("zIndex" ,size); //控制样式层级关系 $(element[i]).css("left" ,leftValue); //控制样式控制距左多少 $(element[i]).css("top", y + "%"); //控制样式高度多少 } offset += stepping; //offset = offset + stepping } }); </script> </body> </html>
发表评论
-
Zepto
2015-08-15 13:49 1231Zepto Zepto,是一个比较 ... -
node.js的学习-20140611
2014-06-11 23:17 767//创建一个h1方法里面舒服一个nihao functi ... -
node.js的学习-20140609
2014-06-09 23:01 579Node.js 是一个基于Chrome JavaScript ... -
git的学习-20140604
2014-06-04 23:30 530Git使用 首先 开启"G ... -
PC和移动端的页面的一些差距-20140525
2014-05-25 23:46 876首先 1、标签、描述等描述清晰准确 2、网站结构3层树状结构 ... -
Bootstrap排版基础样式和响应式图片-20140521
2014-05-22 00:41 2735Bootstrap基础排版样式 .col-xs-* // ... -
Bootstrap特性、设计和组件-20140519
2014-05-19 22:22 710特点 Bootstrap是基于jQuery框架开发的,它在j ... -
Bootstrap流式布局-20140515
2014-05-16 00:26 14747流布局是一种适应屏幕的做法。即不固定块的宽度,而是采用百分比作 ... -
Bootstrap的宽度和分辨率的差别-20140514
2014-05-14 23:05 6262首先在bootstrap里面所有 ... -
Bootstrap的认识-20140513
2014-05-14 00:09 1376通过公司的两个比较大 ... -
jquery初步认识-20140123
2014-01-24 01:30 692一、原型模式结构 // 定义一个jQuery构造函数 ... -
html5的特殊标签作用-20140114
2014-01-15 01:04 912<base>、定义页面中所有链接的基准URL & ... -
ie下的指定样式-20140106
2014-01-08 00:00 7661. <!--[if !IE]><!--&g ... -
margin-left在IE6下左浮动加倍-20140102
2014-01-02 23:04 749一、IE6下如果line-height超出本身区块的heigh ... -
浮动存在的问题-20131229
2013-12-29 23:00 540看一个正常的浮动案例 <!DOCTYPE h ... -
在ie6下同张图片不能外面包有a标签后在画热区-20131223
2013-12-23 23:47 867最近在做页面有的发现一个问题 <div class ... -
ie6下导航存在的问题和-2013-12-20
2013-12-21 00:51 637最近在做事的时候发现一个有趣的问题,在上网也找过但是都没有很好 ... -
按比例展示的小js-20131217
2013-12-18 00:41 431做需求的做到一个关于这个功能的项目所以记下来 Math.ra ... -
定位需要注意-20131214
2013-12-15 01:07 694在CSS中关于定位的内容 ... -
flash在Safari下的BUG-20131212
2013-12-12 01:09 768<object width="940&qu ...
相关推荐
《jQuery上下间歇文字滚动详解》 在网页设计中,动态效果往往能吸引用户的注意力,增强用户体验。"jQuery上下间歇文字滚动"就是这样一款优秀的JavaScript特效,它为单排文字提供了一个圆滑、流畅的上下滚动展示方式...
简单易用的图片文字滚动插件--jQuery Scrollbox.rar简单易用的图片文字滚动插件--jQuery Scrollbox.rar简单易用的图片文字滚动插件--jQuery Scrollbox.rar简单易用的图片文字滚动插件--jQuery Scrollbox.rar简单易用...
【标签】"jQuery 文字滚动"标签表明这个技术是基于jQuery库的,jQuery是一个广泛使用的JavaScript库,简化了HTML文档遍历、事件处理、动画以及Ajax交互。它的API设计使得创建复杂的页面动态效果变得简单,而文字滚动...
"jquery文字上下滚动"是jQuery应用的一个常见功能,常用于网站新闻更新、滚动公告或者滚动字幕等场景,为用户提供动态且吸引人的视觉效果。 要实现jQuery文字上下滚动的效果,首先需要在页面中引入jQuery库。这通常...
在这个特效中,我们可能需要使用到`marquee`标签或者自定义CSS动画来实现文字滚动。 接下来,我们将焦点转向“鼠标点击停止特效”。这个功能通常通过监听鼠标点击事件(`click`事件)来实现。当用户点击时,...
在网页设计中,动态效果常常能提升用户体验,其中“jQuery 文字水平无缝滚动鼠标滑过文字悬停”是一种常见的交互式文本展示技术。这个技术利用jQuery库的强大功能,结合CSS和JavaScript实现文字在水平方向上平滑滚动...
标题中的“一个jQuery广告文字上下滚动效果”是指利用JavaScript库jQuery实现的一种动态展示文本的特效,常见于网站的广告栏或者新闻滚动条。这种效果可以让文字以上下滚动的方式吸引用户的注意力,增加信息的可见性...
在这个“jQuery-实现文字无缝滚动效果.zip”压缩包中,包含了一个利用jQuery实现的文字滚动效果的代码示例。接下来,我们将详细讨论这个知识点。 一、jQuery基础知识 1. 选择器:jQuery提供了丰富的选择器,如ID...
**jQuery文字上下无缝滚动** 在网页设计中,为了吸引用户的注意力或者展示大量信息,我们经常需要使用滚动效果。"jQuery文字上下无缝滚动"是一种常见的网页动态效果,它可以使文字或内容在页面上持续滚动,给予用户...
标题和描述提到的"jQuery单行文字上下不间断循环滚动效果"就是一个这样的实例,它主要用于创建一串文字在单一行内循环滚动,通常用于网站的头部或侧边栏,以动态展示最新的新闻标题或公告。 要实现这个效果,首先...
本项目聚焦于使用jQuery和CSS3创建的文字3D翻转与旋转动画特效,提供了五种不同的动画模式,为网页增添引人入胜的用户体验。 首先,jQuery是一个轻量级的JavaScript库,它简化了JavaScript的DOM操作、事件处理、...
标题中的“jquery单行文字循环滚动”指的是使用jQuery库实现的一种常见的前端文本动画效果,它能使一行文字在页面上连续不断地循环滚动,常用于显示新闻标题、滚动公告等。jQuery是一个广泛使用的JavaScript库,它...
图片文字滚动插件通常利用CSS定位和jQuery的动画功能,通过改变元素的位置或透明度,模拟出从一端向另一端滚动的效果。它可以根据需求设置滚动速度、方向、循环次数等参数,实现多样化的效果。 三、核心功能解析 1....
总结来说,jQuery文字滚动显示是通过选择器定位元素,结合动画方法来实现的。理解jQuery的基本用法和动画原理,可以轻松创建各种动态效果,提升网页的用户体验。在实际项目中,根据需求和场景灵活运用,将使页面更加...
这个压缩包包含两个关键文件:`jquery-ui-1.8.16.custom.min.js` 和 `jquery-ui-1.8.16.custom.css`,这些都是jQuery UI的特定版本,即1.8.16。这个版本在当时是一个广泛使用的稳定版本,提供了丰富的功能和组件。 ...
【jQuery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动-20130622】这个项目是基于JavaScript库jQuery实现的一种效果,它模拟了新浪微博中图片和文字列表的滚动展示方式,通常用于新闻资讯或者社交媒体的动态展示...
**jQuery页面上下滚动触发区块动画特效** 在网页设计中,用户交互体验是非常关键的一环,而动态效果可以显著提升用户体验。"jQuery页面上下滚动触发区块动画特效"是一种常见且吸引人的设计手法,它使得网页在用户...
《jQuery UI与jQuery插件深度解析——以jquery-ui-1.8.2.custom.min.js为例》 在Web开发领域,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。而jQuery UI作为jQuery的一个扩展,提供了丰富的用户界面组件...
《jQuery仿WP动画悬浮标签云插件解析与应用》 在网页设计中,标签云(Tag Cloud)是一种常见的展示信息的方式,它通过不同大小的字体或颜色来表示各个标签的重要性和频率,使得用户可以直观地浏览和探索内容。...
总之,"Jquery 球面滚动 云标签"插件提供了一种创新的标签展示方式,通过jQuery的便利性和强大的动画功能,使得网页的标签云更具吸引力和动态感。在实际应用中,你可以结合自己的设计需求,灵活调整和扩展这个插件,...