废话不多说了，直接给大家贴代码了，具体代码如下所述： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>仿万科的底部的新闻滑动特效</title><style>* {padding: 0;margin: 0;}#subject {position: relative;width: 80%;height: 165px;background: skyblue;margin: 200px auto;overflow: hidden;}#subject > ul > li {position: absolute;float: left;list-style: none;width: 40%;height: 165px;font-size...
一、循环向上滚动的文字，如上面的滚动效果 二、实现的思路 1、建立三个层dome、dome1、dome2 2、垂直滚动的文字在dome1上 3、通过层的滚动来实现文字滚动 三、源代码 <html> <head> <title>循环向上滚动的文字</title> <link href="css/scrollTop.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="domes"> <div class="dome_top">近7日畅销榜</div> <div id="dome"> <div id="dome1"> <table width="100...
自己做了碰撞检测的封装,先看下实例demo,在看封装 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>碰撞检测</title><style type="text/css">*{margin: 0;padding: 0;}#divA,#divB{width: 200px;height: 200px;background-color: purple;font-size: 50px;line-height: 200px;text-align: center;position: absolute;color: #fff;}#divA{left: 30px;top: 30px;z-index: 5;}#divB{left: 300px;top: 300px;}</style></head...
本文实例为大家分享了使用js制作一般网站首页图片轮播效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>图片轮播</title><style>.warp{width: 600px;height: 750px;position: relative;margin:30px auto 0;overflow: hidden;}#box{width: 600px;height: 750px;position: absolute;top: 0px;left: 0px;overflow: hidden;/*overflow-x:auto;*/}#box #con{width: 6000...
先给大家展示下效果图，如果大家感觉还不错，请参考实现代码哦！HTML： <div class="container iden_top"> <ul> <li> <p class=iden_add_name>应用标识1</p> <span class="iden_top_button"></span> <div class="iden_top_dete"></div> </li> </ul> <span class="iden_add">+</span> </div><div class="data_z_create_box"> <div class="create_z_create_box_top"> <span class="data_z_create_box_top_title"></span> <div class=...
本文实例讲述了JavaScript使用setTimeout实现延迟弹出警告框的方法。分享给大家供大家参考。具体如下：先给大家展示一个延迟/定时/强制弹出窗口的JS代码参数解释： 设置时间：Then.setTime(Then.getTime() + 1*60*60*1000)mylove/ttan.htm(过渡网页) ttan.htm中的 http://弹出网页/ 是要弹出的网页scroll:1(滚动条) status:1(状态栏) help:1(帮助按钮) toolbar=1(工具栏) resizable:1(是否可以用鼠标拖动改变大小) dialogWidth:800...
本文实例讲述了JS+CSS实现的漂亮渐变背景特效代码。分享给大家供大家参考，具体如下： 运行效果截图如下：具体代码如下： <html><head><title>JS配合CSS实现的漂亮渐变背景特效6个实例</title><script>var setGradient = (function() {var p_dCanvas = document.createElement(canvas);var p_useCanvas = !!(typeof(p_dCanvas.getContext) == function);var p_dCtx = p_useCanvas ? p_dCanvas.getContext(2d) : null;var p_isIE =/...
在网站开发过程中，特别是前端开发这块，经常会使用到很多图片滑块动画，也就是一些基于jQuery和HTML5的焦点图插件。本文将为大家收集10个超赞的jQuery图片滑块动画，这些现成的jQuery插件将为你节省很多开发时间，而且效果都还不错，一起来欣赏一下吧。 1、jQuery+HTML5实现的超炫全屏焦点图效果源码 这次我们要来分享一款非常绚丽的jQuery焦点图插件，同时这款焦点图也利用了HTML5和CSS3的相关特性，使图片切换效果更加丰富多彩。...
本文为大家分享了一种常见的并且比较复杂的轮播效果，就是优酷主界面的轮播图，效果图如下：我们在书写代码之前，先分析效果图的结构： 1. 左右两个方向按钮，可以用来切换上一张与下一张。 2. 下方有分页指示器，用来标注滚动到了第几张，当然，你点击对应的按钮，也可以跳转到对应的图片。 3. 中间主要显示区域就是用来摆放需要轮播的图片。 根据上面描述，我们首先可以书写HTML代码。 一、HTML代码 <body> <div id="youku"> <d...
一个纯jq形式的横向轮播焦点图，可点击小圆点或者左右按钮进行切换，属于定宽类型。改成自适应宽度的也不难，将css里面的bannerCon宽度改为百分比，再在js里面将ul和li的宽度跟随父级容器的宽度变化即可，需要用到$(window).resize。 兼容到IE6+以上浏览器，有轮播速度和切换间隔两个参数可以改。效果图如下：Html代码如下：<!doctype html> <html lang="zh-CN"> <head><meta charset="utf-8"><title>banner图</title><link href="...
本文实例讲述了JS实现来回出现文字的状态栏特效代码。分享给大家供大家参考，具体如下： 运行这款来回出现文字的状态栏特效时，请注意页面左下角的状态栏。貌似IE8以上版本看不到效果唉。那么究竟是如何实现的呢？主要是用函数来显示消息，根据place的值取当前需显示的字符串，准备在300毫秒后收起显示，将需取的字符串长度计数器加一准备下一次显示；同时使用函数隐藏消息，取Message右边的一定长度的字符串，设定消隐下一个字符的...
本文实例讲述了jquery实现的动态回到顶部特效代码。分享给大家供大家参考，具体如下： 这款jquery动态回到顶部特效，不是一下子就回到了网页顶部，而是带点缓冲的效果，有动画效果，使用了jQuery插件，这是个非常常用的网页特效，希望大家喜欢哦。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-back-top-dh-style-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional...
本文实例讲述了jQuery实现的个性化返回底部与返回顶部特效代码。分享给大家供大家参考，具体如下： 运用了所学习的jQuery特性，制作了这款效果，该效果集结了返回底部、返回顶部、网站留言导航三种功能，网站留言的链接你可以修改为任意一个您想导航的链接，这个可以灵活运用了。本款效果的亮点在于兼容性和动画效果，以及设计美观的箭头等。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-back-top-...
本文实例讲述了jQuery实现分章节锚点“回到顶部”动画特效。分享给大家供大家参考，具体如下： 这里演示基于jquery实现的分章节动画实现“回到顶部”的效果，可通过 网页顶部的数字序号直接进入网页的章节，当处于第二章节的时候，网页右侧会显示竖排的控制按钮，点击按钮会回到相应章节，其实也就是定义好的锚点，当然也可回到顶部，网页上见到的回顶部大多不是这个样子，所以本款效果还挺新颖。 运行效果截图如下：在线演示地址如...
本文实例讲述了JS实现从顶部下拉显示的带动画QQ客服特效代码。分享给大家供大家参考，具体如下： 这是一款动画版QQ在线客服代码，从网页顶部下拉出来的QQ客服，下滑结束后有弹性缓冲效果。在世界地图的映衬下，似乎一下子上升了品位。动画效果是由jq实现的，QQ客服的一些信息自己修改下，换成你自己的QQ，上传到网页就可用啦。注：在火狐台chrome浏览器中测试效果会更好。 运行效果截图如下：在线演示地址如下： http://demo.jb51....