html代码特效大全

HTML是网页设计及开发的基础，随着HTML5标准的推出，网页制作的效果也得到了极大的提升。其中，通过HTML代码实现的各种特效为网页增添了不少亮点，下面是一些常用的HTML代码特效大全，供大家参考。

1. 图片自动轮播
<script>
var speed=30; //设置图片速度，数值越大速度越慢
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth;
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouSEOver=function() {clearInterval(MyMar)};
tab.onmouSEOut=function() {MyMar=setInterval(Marquee,speed)};
</script>

2. 根据用户IP地址自动获取天气信息
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<script type="text/javascript">
function getWeather(){
var city = "";
var myCity = new BMap.LocalCity();
myCity.get(function(result){
city = result.name;
getWeatherInfo(city);
});
}
function getWeatherInfo(city){
$.ajax({
url:'http://wthrcdn.etouch.cn/weather_mini',data:{city:city},type:'get',dataType:'jsonp',success:function(data){
console.log(data);
}
});
}
</script>

3. 页内跳转到指定位置
<script>
$(document).ready(function(){
$("a").on('click',function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html,body').animate({
scrollTop: $(hash).offset().top
},800,function(){
window.location.hash = hash;
});
}
});
});
</script>

4. 文字逐个显示
<script type="text/javascript">
function type(str,id){
var strLen = str.length;
var i = 0;
var fun = function(){
if(i > strLen){
clearInterval(id); //关闭定时器
}
else{
document.getElementById('content').innerHTML = str.slice(0,i++)+'|';
}
};
return setInterval(fun,200); //每200毫秒调用一次fun
}
</script>

5. 图片悬浮放大
<script>
$(function(){
var i,offsetx,offsety,x,y,ov = $("#ov"),//获取悬浮展示图片的div
img = $("#img");//原始图片
$("a").mouSEOut(function(){
ov.hide();//鼠标移走时隐藏悬浮展示图片div
});
$("a").mousemove(function(e){
//获取鼠标指针的位置
x = e.pageX;
y = e.pageY;
//offset() 方法返回或设置匹配元素相对于文档的偏移（位置）
offsetx = x + 20;
offsety = y + 20;
ov.css({//设置悬浮展示图片div的位置和背景图片
left:offsetx +"px",top:offsety +"px",background:"url("+ this.href +") no-repeat center"
});
ov.show();
return false;
});
});
</script>

以上是一些常用的HTML代码特效，可以为网页增添更多的魅力和亮点，有需要的网页设计师不妨参考一下哦~