Ⅰ web前端如何实现滚动横幅广告
可以用CSS动画 将包含横幅的div设置overflow:hidden
然后横幅在其中 改变定位的left值
Ⅱ 前端jquery有谁做过酒仙网左侧楼层的滚动监听特效吗，老是实现不了想要的结果，求助
这个吗？ 添加鼠标滚轮事件，，监听当前楼层距离顶部的的距离，<=某个值时，，给左侧快捷方式 添加激活 状态就行了，，，望采纳！！！,有疑问欢迎骚扰...
Ⅲ JQuery 实现在同一页面锚点链接之间的平滑滚动
web开发前端一直用JQuery
，真正接触了才体会到，JQuery
原来比我想象的要强大的多，也可能比我体会到的还要强大的多，特别是兼容性那个好，于是把一些好玩的，酷炫的，可以代替
JS
的，统统给用上了。
从
JQuery
引入今天的正题，用
JQuery
实现锚点链接之间的平滑滚动。以前介绍过一个用
JS
实现的页面锚点跳转缓冲特效，效果相当不错，可以在同一页面的锚点链接之间实现平滑的滚动，但是
JS
代码相对来说比较冗长，现在好了，只要已经加载了
JQuery，我们就可以用较为简短的代码实现相同的效果。
使用方法如下：
1、载入
JQuery
库；
2、关键代码：
$(document).ready(function()
{
$('a[href*=#]').click(function()
{
if
(location.pathname.replace(/^\//,
'')
==
this.pathname.replace(/^\//,
'')
&&
location.hostname
==
this.hostname)
{
var
$target
=
$(this.hash);
$target
=
$target.length
&&
$target
||
$('[name='
+
this.hash.slice(1)
+
']');
if
($target.length)
{
var
targetOffset
=
$target.offset().top;
$('html,body').animate({
scrollTop:
targetOffset
},
1000);
return
false;
}
}
});
});
还是再要强调一下加载的顺序，先引用JQuery
类库。顺便说一下，经测试，该滚动效果在各浏览器下都兼容适用，唯有在
Opera
下表现有点怪异，还有待改进。
Ⅳ 前端，能说说你对滚动事件的理解吗
对于前端来说，其实滚动时间已经非常简单了，只需要把几张图片隔一段时间之后让他们自动会显示，这样看起来就会有滚动的效果。
Ⅳ 我是一名前端开发者，做滑动效果，用到了jquery.sly.js插件，
这根插件没关系，他只不过是出发个事件
Ⅵ 求教手机前端上下滑动翻页效果，类似swiper插件，但是如果一页显示不完时可以滑动查看，应该怎么做
swiper可以嵌套。
nested 用于嵌套相同方向的swiper时，当切换到子swiper时停止父swiper的切换。
请将子swiper的nested设置为true。
由于需要在slideChangeEnd时判断作用块，因此快速滑动时这个选项无效。
<script>
var mySwiper = new Swiper('#swiper-container1')//父swiper
var mySwiper2 = new Swiper('#swiper-container2',{//子swiper
nested:true,
})
</script>
Ⅶ 这几种网站前端效果制作谁会制作1、点击小图标，在页面固定位置弹出放大图片框，图片框可随页面滚动
我会做，需要请私信
Ⅷ web前端开发这种特效有人会做吗 急！！！
第一种叫做视差滚动，第二种叫做轮播。
主要是滚到相应页面的话会有动画吧，动画是用Css3的animation写的
Ⅸ 前端开发中常用到的js特效有哪些
HTML5 DOM 选择器
// querySelector() 返回匹配到的第一个元素var item = document.querySelector('.item');console.log(item);// querySelectorAll() 返回匹配到的所有元素，是一个nodeList集合var items = document.querySelectorAll('.item');console.log(items[0]);1234567
阻止默认行为
// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) { event = event || window.event； if (event.preventDefault){ // w3c方法 阻止默认行为
event.preventDefault();
} else{ // ie 阻止默认行为
event.returnValue = false;
}
}, false);// jQuery$('#btn').on('click', function (event) { event.preventDefault();
});1234567891011121314151617
阻止冒泡
// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) { event = event || window.event； if (event.stopPropagation){ // w3c方法 阻止冒泡
event.stopPropagation();
} else{ // ie 阻止冒泡
event.cancelBubble = true;
}
}, false);// jQuery$('#btn').on('click', function (event) { event.stopPropagation();
});1234567891011121314151617
鼠标滚轮事件
$('#content').on("mousewheel DOMMouseScroll", function (event) {
// chrome & ie || // firefox
var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) || (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));
if (delta > 0) {
// 向上滚动
console.log('mousewheel top');
} else if (delta < 0) { // 向下滚动
console.log('mousewheel bottom');
}
});123456789101112
检测浏览器是否支持svg
function isSupportSVG() {
var SVG_NS = 'http://www.w3.org/2000/svg'; return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;
}
// 测试console.log(isSupportSVG());1234567
检测浏览器是否支持canvas
function isSupportCanvas() {
if(document.createElement('canvas').getContext){ return true;
}else{ return false;
}
}// 测试，打开谷歌浏览器控制台查看结果console.log(isSupportCanvas());12345678910
检测是否是微信浏览器
function isWeiXinClient() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}// 测试alert(isWeiXinClient());1234567891011
jQuery 获取鼠标在图片上的坐标
$('#myImage').click(function(event){
//获取鼠标在图片上的坐标
console.log('X：' + event.offsetX+'\n Y:' + event.offsetY);
//获取元素相对于页面的坐标
console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top);
});1234567
验证码倒计时代码
<!-- dom --><input id="send" type="button" value="发送验证码">12
// 原生js版本var times = 60, // 临时设为60秒
timer = null;
document.getElementById('send').onclick = function () {
// 计时开始
timer = setInterval(function () {
times--; if (times <= 0) {
send.value = '发送验证码';
clearInterval(timer);
send.disabled = false;
times = 60;
} else {
send.value = times + '秒后重试';
send.disabled = true;
}
}, 1000);
}
// jQuery版本var times = 60,
timer = null;
$('#send').on('click', function () {
var $this = $(this); // 计时开始
timer = setInterval(function () {
times--; if (times <= 0) {
$this.val('发送验证码');
clearInterval(timer);
$this.attr('disabled', false);
times = 60;
} else {
$this.val(times + '秒后重试');
$this.attr('disabled', true);
}
}, 1000);
});2122
常用的一些正则表达式
//匹配字母、数字、中文字符
/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/
//验证邮箱
/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/
//验证手机号
/^1[3|5|8|7]\d{9}$/
//验证URL
/^http:\/\/.+\./
//验证身份证号码
/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/
//匹配中文字符的正则表达式
/[\u4e00-\u9fa5]/
//匹配双字节字符(包括汉字在内)
/[^\x00-\xff]/
js时间戳、毫秒格式化
function formatDate(now) {
var y = now.getFullYear(); var m = now.getMonth() + 1; // 注意js里的月要加1
var d = now.getDate(); var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds(); return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;
}
var nowDate = new Date(2016, 5, 13, 19, 18, 30, 20);
console.log(nowDate.getTime()); // 获得当前毫秒数: 1465816710020console.log(formatDate(nowDate));123456789101112131415
js限定字符数（注意：一个汉字算2个字符）
<input id="txt" type="text">//字符串截取function getByteVal(val, max) {
var returnValue = ''; var byteValLen = 0; for (var i = 0; i < val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; else byteValLen += 1; if (byteValLen > max) break;
returnValue += val[i];
} return returnValue;
}
$('#txt').on('keyup', function () {
var val = this.value; if (val.replace(/[^\x00-\xff]/g, "**").length > 14) { this.value = getByteVal(val, 14);
}
});12345678910111213141516171819
js判断是否移动端及浏览器内核
var browser = {
versions: function() {
var u = navigator.userAgent;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Firefox') > -1, //火狐内核Gecko
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
iPhone: u.indexOf('iPhone') > -1 , //iPhone
iPad: u.indexOf('iPad') > -1, //iPad
webApp: u.indexOf('Safari') > -1 //Safari
};
}
}
if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {
alert('移动端');
}21
之前我用过一个检测客户端的库 觉得挺好用的，也推荐给大家 叫 device.js，大家可以 Googel 或 网络
GItHub仓库地址：https://github.com/matthewhudson/device.js
getBoundingClientRect() 获取元素位置
//它返回一个对象，其中包含了left、right、top、bottom四个属性var myDiv = document.getElementById('myDiv');var x = myDiv.getBoundingClientRect().left;
var y = myDiv.getBoundingClientRect().top;
// 相当于jquery的： $(this).offset().left、$(this).offset().top // js的：this.offsetLeft、this.offsetTop123456
HTML5全屏
function fullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}}
fullscreen(document.documentElement);12345678910111213
Ⅹ 手机前端，左右两个div，怎么做两个滚动，就是我滚动左边的时候右边不懂，滚动右边左边不动，怎么实现
你看看这样可以实现么；
就是一个网站在浏览器里（高度足够滚动），浏览器会出现滚动条，我叫它为右边（right）的div，然后在你的网页中也有一处是出现滚动条的，我叫它为左边（left）的div，意思就是网页为大的div（右边的 right）；它里面包含着左边（left）的div；
大概意思你懂了么？
不过好像右边动 左边也会动=。=